4.3: TypeScript
Last updated
Last updated
Introduction to TypeScript
How to setup a React Typescript application
TypeScript is a popular programming language and syntactic superset of JavaScript that adds optional static typing of variables. Static typing means every variable can only store values that adhere to a specific, pre-defined data type. This allows for more robust error checking prior to runtime, reducing bugs due to variables storing unexpected values. TypeScript is developed and maintained by Microsoft. Many companies large and small choose to use TypeScript over JavaScript today due to the robustness it provides over vanilla JavaScript. Static typing in TypeScript is also similar to typing in other common languages such as Java and Go.
Static typing means every variable needs to be declared with a specific data type, and cannot store values that do not adhere to that data type. While requiring more upfront effort to define the type of each variable, static typing can increase development speed in the long term by reducing bugs due to ambiguous typing of variables. Popular languages like Java and Go require static typing, and their robustness due to static typing is a large reason for their popularity.
Robert Kolsek, esteemed section leader at Rocket delivered this intro to TypeScript with hands-on examples during one of his classes. The majority of the video demonstrates type checking with TypeScript and how it yields benefits compared with vanilla JavaScript.
Understand Static type-checking, which ensures that your code will be able to run, before you try to run and execute your code.
Implement code that handle Non-exception Failures, if TypeScript notices some JavaScript in your code that is not valid it will warn you of the error.
Use Explicit Types when developing to describe the values that you will invoke functions with.
Primitives, and Complex data types and how you annotate them within TypeScript.
Type Aliases and Interfaces allow us to define objects that we want to use within our functions. These features are almost interchangeable, but the key difference is that a tpye cannot be re-opened to add new properties while and interface is always extendable.
Type Assertions are vital if you are getting information from a DOM element.
If you are developing a full application using TypeScript we recommend following the all of the material within this handbook.
When creating React applications you are able to add TypeScript into the project when using the Create-React-App. Use the command below to create a React boilerplate that contains TypeScript.
When working on a React TypeScript project we need to being to apply Typing to many React concepts, like Props as well as States. To understand this and more please have a look at the following sets of documentation.
Become aware of the form event types that are present in React TypeScript.
Try the code out in the TypeScript Playground.
These are just some set of documentation that you can look through to get started while developing a React TypeScript project. Now try to build up a project using TypeScript!
Official TypeScript Handbook with tutorials and walkthroughs of the most important TypeScript features for beginners
