An intro to TypeScript

What is TypeScript

TypeScript is a superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces, and module-statements just like in Java or C#.

Unlike JavaScript, which is a loosely-typed language,TypeScript supports static typing.

Some advantages

Self-documenting: Instead of adding comments to your code, with a type system you are annotating your code and it will always be in sync with the actual code
Avoid common pitfalls: TypeScript is going to spit out any compilation error unlike JavaScript which is an interpreted language. You can catch errors at the early stage during development, and less bugs = Win

Basic types

const name: string = "Jane";
const age: number = 40;
const isAlive: boolean = true;

isAlive.indexOf("Jane"); // will show an error since indexOf cannot be called on a boolean

Alternatively, this will also work:

const name = "Jane";
const age = 40;
const isAlive = true;

isAlive.indexOf("Jane"); // will also throw an error

Arrays

let food: string[];
food = ["cookie", "milk", "biscuit"];
food.push("donut");

food = [1, 2, 3]; // will throw an error
food.push(true); // will also throw an error

Functions

The function below takes in a parameter (word) with type string and returns a string.

function reverse(word: string): string {
  return word
    .split("")
    .reverse()
    .join("");
}

reverse("racecar"); // this is ok
reverse(true); // this will throw an error

We can omit the return type because the compiler can infer the return type. Hence this will also work:

function reverse(word: string) {
  return word
    .split("")
    .reverse()
    .join("");
}

Interfaces

An interface defines the syntax (eg. properties, methods) that members of the interface must adhere to.

Interfaces contain only the declaration of the members. It is the responsibility of the deriving class to define the members.

interface Person {
  name: string;
  age: number;
}

function birthYear(person: Person) {
  return 2018 - person.age;
}

Aliases

Type aliases create a new name for a type.

type Vegetable = "broccoli" | "carrot";
// the '|' is a union type, which means that Vegetable can be either a 'broccoli' or 'carrot'

type Fruit = "apple" | "banana" | "kiwi";

type Ingredient = Vegetable | Fruit; // chaining union types

const juice: Ingredient[] = ["broccoli", "kiwi"];
// probably a terrible juice but still valid in TypeScript

const juice2: Ingredient[] = ["broccoli", "bread"];
// will throw an error since bread is not a fruit or vegetable

To get started

Install - For NPM users:

npm install -g typescript

Name your file with a '.ts' extension. For example, 'helloworld.ts'
Write your code
Compile your code by typing tsc helloworld.ts in the command line. If all goes well, a JavaScript file helloworld.js will be generated!

TypeScript in your React applications

Create-React-App now has built-in support for working with TypeScript!

To create a new project, simply type:

npx create-react-app my-typescript-app --typescript

To add TypeScript to an existing application:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!

Blog