Your first Introduction to TypeScript
Tags: typescript, javascript, beginners, tutorial
Published: 2021-08-16 19:54:52

---
title: Your first Introduction to TypeScript
published: true
description: What and Why TypeScript? Difference between TypeScript and Javascript?
tags: typescript, javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4wn9wqqtuvr8dnq9xdm.png
canonical_url: https://eric-the-coder.com/your-first-introduction-to-typescript
---

Follow me on Twitter: https://twitter.com/EricTheCoder_

## What is Typescript?

TypeScript is a javascript superset

## Is TypeScript the same as Javascript? 
Yes and No. TypeScript has been created by Microsoft and is built on top of javascript. 

In short, it is the same as Javascript but with added features.

Everything you know from Javascript will be useful in TypeScript. 

## Which one should I learn first?
You definitively learn Javascript first. If you don't know Javascript, you will have a hard time learning and understanding TypeScript.

## Why create a new language? Javascript is ok, isn't it?
When people start using JavaScript in complex applications, they quickly realize that JavaScript became hard to work in terms of OOP and difficult to find some bugs.

TypeScript was developed by Microsoft to bridge this gap. 

## So what exactly TypeScript adds to javascript?

- Powerful type system
- Type error checking at development time
- Better Object-Oriented Programming
- New features like Interfaces, Generics, etc.
- Meta-Programming like Decorators
- Compile to javascript that can run on an older browser
- Code Auto-completion in the editor
- And more...


## Anything else I should know?
TypeScript does not run in the browser or with node.js like Javascript. To execute, TypeScript needs to be converted/compile to Javascript. 

Using TypeScript involves the use of a compiler. For example, if you have a file name app.ts, TypeScript compiler will create the javascript equivalent app.js. That one will be used to run your app.

So that is why we say TypeScript help at development time. 


## How to install and use TypeScript compiler
You can install TypeScript globally on your dev machine with this command
```
$ npm install -g typescript
```

To executer the compiler
```
$ tsc app.js

// or watch mode
$ tsc app.js -w
```
In watch mode TypeScript will automatically re-compile your app.ts in app.js on every save.

## TypeScript config?
There is a lot of config/setting available for TypeScript. I will not cover those in this introduction article but just want to let you know that TypeScript settings are store in a file called tsconfig.json. You can create this file with
```
$ tsc --int
```

## TypeScript 101
You will now learn how to use basic TypeScript features

### Core Types
One of the most valuable features of TypeScript is the type system. In TypeScript you can assign a type to a variable and TypeScript compiler will throw an error if anywhere in your code that type is not respected.

To understand what type, we will do a TypeScript vs Javascript comparison.

Here a regular Javascript code
```javascript
function add(num1, num2) {
  return num1 + num2
}

const result1 = add(10, 20).       // 30
const result2 = add("10", "20")  // 1020
```
In this example, result1 will be 30 and result2 will be 1020

#### Why result2 is not 30? 
Since you supply double quotes, Javascript thinks your parameters are string and so execute the code with that logic without reporting any error.

Now imagine the kind of damage this error could do in an accounting application. Finding that kind of bug in a 100k lines of code web application is very hard, very frustrating, and time-consuming.

#### TypeScript to the rescue!
Let's use the same code above but in TypeScript
```
function add(num1: number, num2: number) {
  return num1 + num2
}

const result1 = add(10, 20).       // 30
const result2 = add("10", "20")  // editor/compile error
```
The only difference is the :number type added after the parameter name

In this exemple, the 'const result2 = add("10", "20")' line will report an error in the code editor and when compiling.


### Type inference
When a variable is initialized TypeScript can infer/detect the type of the variable automaticaly
```jsx
let amount: number = 99.95
// same as
let amount = 99.95 // best practice
```
Both variables will be of type number.  The best practice is to let the TypeScript inference do its job since we set the initial value ourselves. That helps avoids repetitive code.

Note that we only specify the type when the variable is not initialized with a value
```jsx
let title: string
title = "Hello World"
```

### object Type
TypeScript will also infer the object type automatically
```jsx
const person = {
    name: 'Mike Taylor',
    age: 45
}
```

Will result in TypeScript object type
```jsx
const person: {
  name: string;
  age: number;
} = {
  name: 'Mike Taylor',
  age: 45
}
```

### Array type
The syntax to declare an array is: type[] (type followed by the bracket []) 
```jsx
const names: string[] = ['Mike', 'John', 'Paul']
const amounts: number[] = [100, 200, 300]
```

### Tuple type
Use when we need a fixed number of values in an array.
```jsx
const names: [number, string] = [100, 'Mike']
```

### Emun type
Enum is mainly used to assign names to constants
```jsx
enum Role { ADMIN, READ_ONLY, AUTHOR }
console.log(Role.ADMIN) // 0
```

You can also specify the key (key can be any type)
```jsx
enum Role { ADMIN = 100, READ_ONLY = 200, AUTHOR = 300 }
console.log(Role.ADMIN) // 100
```

### Any type
Use any as a fallback if you really don't know the type. 
```jsx
let title: any
title = 25
title = 'Hello World'
```
Note that this is not a good practice. Try to avoid it!

### union type
A variable can be flexible and be assigned with two type
```jsx
function combine(item1: (string | number), item2: (string | number)) {
    if (typeof item1 === 'number' && typeof item2 === 'number') {
        console.log(item1 + item2)
    } else {
        console.log(item1.toString() + item2.toString())
    }
}
```
The syntax for union type is:  type2 | type2

### Type Alias

We can create a custom type that will act as an alias for example a union type
```jsx
type Dual = number | string

let title: Dual

title = "Hello"
title = 100
```

### object type alias
```jsx
type User = { name: string; age: number }
const user1: User { name: 'Mike', age: 25 }

// the syntax is then simplyfy
function loadUser(user: User) {
  ..do something...
}

// instead of
function loadUser(user { name: stringl age: number }) {
  ..do something...
}
```

### Function return type
We can specify the return type of a function
```jsx
function add(num1: number, num2: number): number {
  return num1 + num2
}
```

### Void return type

When a function don't return any value TypeScript will infer the function to be type 'void'
```jsx
function displayMessage(): void {
  console.log('Hi there')
}
```

### Function type
The declaring syntax is: (var: type, var: type) ⇒ return type
```jsx
function add(num1: number, num2: number): number {
    return num1 + num2
  }

let calc: Function

// or more specific
let calc: (num1: number, num2: number) => number
calc = add
console.log(calc(10,20))
```

### Unknown type
Variable of type unknown will not be assignable except if we check the typeof the assignment.

```jsx
let userInput: unknown
if (typeof userInput === 'string') {
  userName = userInout
}
```
## OOP in TypeScript

### class declaration

```jsx
class Product {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name
    this.price = price
  }
}

const product1 = new Product('iPad', 500)
```

### Shorthand properties initialization
```jsx
class Product {

  constructor(private name: string, private price: number) {
    
  }
}

const product1 = new Product('iPad', 500)
```

### Access Modifiers (private, public, readonly, protected)

```jsx
class Product {
  private name: string;
  private price: number;

  constructor(name: string, price: number) {
    this.name = name
    this.price = price
  }

  public displayProduct() {
    console.log(this.name, this.price)
  }
}

const product1 = new Product('iPad', 500)
```

The public keyword is optional because that's the default modifier if none supply.

p**ublic** mean a variable or function available outside of the class

p**rivate** is for variables or functions not available outside of the class

**readonly** is to variables private and readonly

**Protected** is for variables or functions available only inside the class or subclass

### Inherits
```jsx
class Friends extends Person {
}
```

### Getters and Setters

```jsx
class Friend {
  get name() {
  
  }

  set name(value: string) {
  
  }
}
```

### Static properties and methods
```jsx
class Product {
  static defaultName = 'Product x'
  static display name() {
    console.log(defaultName)
  }
}

Person.display('iPad')
```

### interface
```jsx
interface IsPerson {
  name: string;
  age: number;
  speak(a: string) {
    console.log(a)
  }
}
```

```jsx
const me: IsPerson = {
  name: 'Mike',
  age: 25,
  speak(text: string): void {
    console.log(text)
  }
}
```

```jsx
class customer implements IsPerson {
  private name
  private age

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  public speak(text: string): void {
    console.log(text)
  }
}
```

## Generics
When writing programs, one of the most important aspects is to build reusable components. This ensures that the program is flexible as well as scalable in the long term.

Generics offer a way to create reusable components. Generics provide a way to make components work with any data type and not restrict to one data type. So, components can be called or used with a variety of data types. 

For example, if we want to create an interface with a data property that can contain a different object type

First create the interface
```jsx
interface Person<T> {
  name: string;
  age: number;
  data: T;
}
```
The &lt;T&gt; is a placeholder for the type that will be added by TypeScript at compile time


You can then use the generic interface in your code
```jsx
const person1: Person<string> = {
  name: 'Mike',
  age: 25,
  data: 'Info about person'
}

// or
const person1: Person<string[]> = {
  name: 'Mike',
  age: 25,
  data: ['Info about person', 'info2']
}
```
In the above example, the same interface has been used to store string and strings arrays.