4.3: TypeScript

Learning Objectives

1. Introduction to TypeScript

2. How to setup a React Typescript application

Introduction

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.

Introduction to TypeScript by Robert Kolsek, Rocket Academy Section Leader

The Basics

Documentation - The Basicstypescriptlang

TypeScript official documentation

1. Understand Static type-checking, which ensures that your code will be able to run, before you try to run and execute your code.

2. 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.

3. Use Explicit Types when developing to describe the values that you will invoke functions with.

TypeScript Types

Documentation - Everyday Typestypescriptlang

TypeScript official documentation, Types

1. Primitives, and Complex data types and how you annotate them within TypeScript.

2. 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.

3. 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.

React and TypeScript

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.

npx create-react-app name-of-app --template 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.

Typing Component Props

Typing Component Props | React TypeScript Cheatsheetsreact-typescript-cheatsheet.netlify.app

TypeScript React cheatsheet

React Typescript Hooks

Hooks | React TypeScript Cheatsheetsreact-typescript-cheatsheet.netlify.app

React TypeScript Cheatsheet

Forms and Events

Forms and Events | React TypeScript Cheatsheetsreact-typescript-cheatsheet.netlify.app

Handling forms and events in TypeScript

1. Become aware of the form event types that are present in React TypeScript.

2. Try the code out in the TypeScript Playground.

React Context and Interfaces

Context | React TypeScript Cheatsheetsreact-typescript-cheatsheet.netlify.app

React TypeScript Context and Interfaces

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!

Additional Resources

1. Official TypeScript Handbook with tutorials and walkthroughs of the most important TypeScript features for beginners

2. Here are some React TypeScript cheatsheets

3. How to combine TypeScript with JavaScript