Typescript

A static typing language designed for development of large applications that trans-compiles to JavaScript.

Table of contents

  • What is TypeScript ?
  • Let's get started
  • Multiple types
  • Typecast
  • Tuples
  • Enums
  • Function params
  • Generic type
  • Let's discuss if you have any questions.

What is TypeScript ?

  • Strict static typing language.
  • Type-script is open source programming language developed and maintained by Microsoft.
  • You need to trans-compile to Js to use it.
  • .ts is the extension of the file.
  • https://www.typescriptlang.org/play

Other type checker available is Flow (developed by Facebook)

Let's get started

// person.ts

let person; // Default type for any variable is "any"

const name: string = 'John Doe';
const age: string = '23';
const siblings: array = ['Jane', 'Micheal', 'Tom'];

Other types of variable

string = "", "J", "John"
number = 1, -1, 0
any = "", 12, {}
array = ['a'], [1, 2]
boolean = true, false
null = null
void = function returns void

Multiple types

// person.ts

const example1: number | string = 35;
const example2: number | string = 'Hello world';
const example3: number[];

const getLength = val => val.toString().length;

getLength(example1);
getLength(example2);

Sometimes we may require to have multiple data type for a variable.

Intersection of types

type person = {
    firstName: string;
};

type friend = {
    friendFrom: string;
}

const myFriend: person & friend;

Sometimes we may require to have multiple data type for a variable.

Array types

const example1: any[] = ['Hello World', 1, true];
// const example1 = ['Hello World', 1, true];

const example4: number[] = [1, 5, 43, 98];

const example2: (number | boolean)[] 
                = [1, 3, true, false];

const example3: boolean[][] = [ [true, false] ];

Typecast

let definetlyNotAString: any = 'I am a string';

let strLength = (definetlyNotAString as string).length;

// OR

// let strLength = (<string> definetlyNotAString).length;

We may have to typecast to different type at some time.

Tuples

const exampleTuple: [string, number] 
                  = ['Hello World', 30];

You can fix the types in the array.

Enums

enum Direction {
    Up = 1,
    Down,
    Left,
    Right,
}

Enums allow us to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases

Auto-incremented from the point, you mention the value.

Up = 1, Down = 2,

Left = 3, Right = 4

Enums

Enums allow us to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

Initial value would be 0

Up = 0, Down = 1,

Left = 2, Right = 3

enum Direction {
    Up = "Up",
    Down = "Down",
    Left = "Left",
    Right = "Right",
}

Or can give a value to be more explicit

Function params

class Person {
    firstName: string;
    constructor(data?: any) {
        this.firstName = data.firstName || 'Dylan';
    }
}
function add(val1: number, val2: number): number {
    return val1 + val2;
}
function sayHello(person: Person): string {
    return `Say hello to ${person.firstName}`;
}
function voidExample(): void {
    add(1,2);
}

Custom types

type person = {
    firstName: string,
    middleName: string,
    lastName: string,
    age: number,
    friends: string[],
};

const james: person = {
    firstName: 'Johnny',
    middleName: 'G',
    lastName: 'Doe',
    age: 32,
    friends: ['John', 'Jane', 'Marie'],
}

Custom types

type person = {
    name?: string,
    age: number,
};

const p: person = {
    age: 30
}

export interface IPerson {
    name: string,
    age: number,
    friends?: string[] 
}

Adding a ? mark to a property makes it optional

Make a interface in a separate file

Generic type

function example<T>(arg: T): T {
    return arg;
}

example(5);
function example<T>(arg: T[]): T {
    return arg[0];
}

example([5]);

Thank you

Playground

https://www.typescriptlang.org/play/

Typescript

By Jagat Jeevan Sahoo

Made with Slides.com

Typescript

Catch the type error in compile time with TypeScript.

  • 286

More from Jagat Jeevan Sahoo