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

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

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

let title: string
title = "Hello World"

object Type

TypeScript will also infer the object type automatically

const person = {
    name: 'Mike Taylor',
    age: 45
}

Will result in TypeScript object type

const person: {
  name: string;
  age: number;
} = {
  name: 'Mike Taylor',
  age: 45
}

Array type

The syntax to declare an array is: type

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.

const names: [number, string] = [100, 'Mike']

Emun type

Enum is mainly used to assign names to constants

enum Role { ADMIN, READ_ONLY, AUTHOR }
console.log(Role.ADMIN) // 0

You can also specify the key (key can be any type)

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.

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

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

type Dual = number | string

let title: Dual

title = "Hello"
title = 100

object type alias

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

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'

function displayMessage(): void {
  console.log('Hi there')
}

Function type

The declaring syntax is: (var: type, var: type) ⇒ return type

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.

let userInput: unknown
if (typeof userInput === 'string') {
  userName = userInout
}

OOP in TypeScript

class declaration

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

class Product {

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

  }
}

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

Access Modifiers (private, public, readonly, protected)

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

class Friends extends Person {
}

Getters and Setters

class Friend {
  get name() {

  }

  set name(value: string) {

  }
}

Static properties and methods

class Product {
  static defaultName = 'Product x'
  static display name() {
    console.log(defaultName)
  }
}

Person.display('iPad')

interface

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

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

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

interface Person<T> {
  name: string;
  age: number;
  data: T;
}

The <T> 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

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.

Comments

[Ash]

Great high-level, but detailed, overview of TypeScript... I keep meaning to pick it up and play with it 🤔

Thanks for the write up!

[Dang Quoc Huy]

Really meaningful artical. Thanks you so much