TypeScript Beginner Guide: Converting Javascript into TypeScript (with React Native)

September 2, 2021

 :  

Jennifer Watanabe

Updated On

 :  

December 8, 2021

Tags

 :  

Development

Two people high-fiving each other
Photo by krakenimages on Unsplash

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.

Doesn’t quite make sense?

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.

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.

Want more enum examples?

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!)
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 #6: 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.

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 #7: Objects

Objects in TypeScript are written similarly to interfaces. If the object keys aren’t known, we can still define its type.

Example #8: 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 #9: 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:

Contributor’s Bio