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

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 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 and will have all the keys and properties of the interface .

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 can be a string type or undefined type.

Now that we changed the accepted types for , 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 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 . 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 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 . Any object that doesn't match the keys and properties of will not be accepted.

Example #5: Functions

Function arguments and the function’s return type can be checked with TypeScript.

takes one argument called which has to match all the keys and properties of . The second argument must be a string. After all the function arguments are listed, we add the return type of the function. Because 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 so TypeScript will only accept numbers for

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:

More about:

Jennifer Watanabe

Jennifer is a Software Engineer who enjoys creating good looking ui that’s also functional. In her free time she likes to catch up on the latest streaming shows.