TypeScript Beginner Guide: Converting Javascript into TypeScript (with React Native)
If you’re like me, you learned Javascript first and want to start using TypeScript instead. Good news: TypeScript can be used anywhere Javascript can be used and it looks very similar to Javascript so it’s easy to learn!
Example #1: Interfaces
Interfaces will check the shape of our values. We define them outside the component by using the keyword interface and are conventionally Pascal cased.
After defining an interface we can use it to define a value’s shape. In this example we’re saying that the value of variable maltese and russellTerrier will have all the keys and properties of the interface DogBreed.
Example #2: Unions (“Or”)
Unions are represented by a single pipe (or vertical line) symbol. They describe a value that can be of more than one type. In this example we’re saying that the countryOfOrigin can be a string type or undefined type.
Now that we changed the accepted types for countryOfOrigin, we can set that value to be undefined and TypeScript will be ok with that. What TypeScript is doing is called type checking and is a large part of what makes TypeScript great.
If we tried to assign anything other than a string or undefined to countryOfOrigin TypeScript will fail to compile.
countryOfOrigin: 'Americas' // ✅ TypeScript accepts a string or undefined and this is a stringcountryOfOrigin: undefined // ✅ TypeScript accepts a string or undefined and this is undefinedcountryOfOrigin: 10 // ❌ TypeScript accepts a string or undefined and this is a number
Example #3: Enums
Enums are a set of constants that are used to tell other developers exactly what a value should be. They are defined outside the component using the keyword enum. Conventionally they are Pascal cased and the properties are written in caps.
Now we can change our dog objects to match the new enum. This way we can clearly define what values are acceptable for this property. It’s also easy for another developer to see our intention.
Example #4: useState
We can check the values passed to the useState hook by using angled brackets. (This is also called Generics. Check out the links at the end of this blog for more information!)
const [dog, setDog] = useState<DogBreed | null>(null)Because the default state is null, we have to add null to the angled brackets so that TypeScript knows to accept null. The other type we are accepting is the interface DogBreed. Any object that doesn't match the keys and properties of DogBreed will not be accepted.
Example #5: Functions
Function arguments and the function’s return type can be checked with TypeScript.
onPress takes one argument called selectedDog which has to match all the keys and properties of DogBreed. The second argument must be a string. After all the function arguments are listed, we add the return type of the function. Because onPress does not return anything the return type is void.
Example #5: Arrays
Arrays can be declared in TypeScript using square or angle brackets. If the array accepts more than one type use the angled brackets version.
number[] // Accepts an array of numbers: [1, 2, 3]Array<number> // Accepts an array of numbers: [1, 2, 3]Array<number | string> // Accepts an array of numbers or strings: [1, 2, 3, 'hi', 'hello']number | string[] // Accepts a single number or an array of strings: 1 OR ['hi', 'hello']
We can add this to the interface DogBreed so TypeScript will only accept numbers for averageHeight.
Need to see how this works in action?
Example #6: Objects
Objects in TypeScript are written similarly to interfaces. If the object keys aren’t known, we can still define its type.
{
[key: string]: string | number // The object's key will be a string and its value will be a string or a number
}Example #7: Optionals
Optionals are written using a question mark. When values are optional, they receive the undefined type automatically. Optionals can be added to function arguments too. Optionals are useful when you want TypeScript to check a value only if the value is provided.
Example #8: Final Code
Conclusion
Now you’ve learned some common TypeScript and have a good place to start!
For more beginning TypeScript resources, check out the following:
For more intermediate or advanced TypeScript resources, check out the following:
