An intro to TypeScript
Tags: typescript, react, beginners
Published: 2018-12-21 11:20:33

---
title: An intro to TypeScript
published: true
description: 
tags: typescript, react, beginners
---

![alt text](https://pbs.twimg.com/profile_images/743155381661143040/bynNY5dJ_400x400.jpg "TypeScript logo")

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

```typescript
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:

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

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

### Arrays

```typescript
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.

```typescript
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:

```typescript
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.

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

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

### Aliases

Type aliases create a new name for a type.

```typescript
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

1. Install - For NPM users:

```
npm install -g typescript
```

2. Name your file with a '.ts' extension. For example, 'helloworld.ts'

3. Write your code

4. 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!