Types of TypeScript typings

A brief overview of the different approaches TypeScript offers to make our React code type safe.

Picture of an old typewriter
Photo by Patrick Fore on Unsplash

Freedom of choice is hard

TypeScript’s documentation example for generics
TypeScript’s documentation example for generics
Hmm yes I see.

In the beginning there was JavaScript

Vanilla JavaScript input

Inline types

TypeScript input with inline types
Gif of hovering over variables to see types
Gif of hovering over variables to see types
You will get addicted to this
TypeScript error : Type ‘{ value: number}’ is not assignable to type ‘string’
TypeScript error : Type ‘{ value: number}’ is not assignable to type ‘string’
Thank you squiggly red lines!
TypeScript error: Property ‘another’ does not exist
TypeScript error: Property ‘another’ does not exist
I’m a fan of the squigglies

Defining a type

TypeScript input with defined types

Defining an interface

TypeScript input typed with an interface
type InputProps = {
value: InputValue;
label: Label;
}
Google search result for “TypeScript dif” autocomplete to “TypeScript difference between type and interface”
Google search result for “TypeScript dif” autocomplete to “TypeScript difference between type and interface”
When 14 million people asked the same question

Using generics

A cup of tea
A cup of tea
Photo by Drew Taylor on Unsplash
// An input that only accepts a number value
<GenericTSInput<number>
value={1}
label="TS generic type (number)"
/>
// An input that only accepts a string value
<GenericTSInput<string>
value="Value"
label="TS generic type(string)"
/>
TypeScript error for generics
TypeScript error for generics
You’re always there for me, squiggly red lines

Freedom of choice is still hard

Developer at @TalonOne, JavaScript enthusiast, and enthusiast in general ✨ matand.dev