DEV Community

Uday Yadav
Uday Yadav

Posted on

TypeScript 101

Typescript

Typescript setup

install :

npm i -g typescript

compile :

tsc index.ts

compile and run :

npx ts-node <filename>.ts

Init project by

tsc --init

Type System


// bsaic data types
let id: number = 1;
let myname: string = 'uday yadav';
let isAgeStrict: boolean = false;
let edu: object = {
    collegeName: 'ADGITM',
    courseName: 'CSE'
}

let something: any = 'me';
something = 10;

let subjects: string[] = ['ada', 'java', 'se', 'csp', 'im', 'dcom'];
let arr: any[] = [1, true, 'uday']

// tuple
let person: [string, number, boolean] 
    = ['uday', 20, true];
// tuple array
let emp : [number, string] [] = [
    [1,'uday'],
    [2,'another uday']
];

// union
let idx : string | number = 'uday';
idx = 10;

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

console.log(Direction.Down);
// 2

enum DirectionWithString {
    Up = 'Up',
    Down = 'Down',
    Right = 'Right',
    Left = 'Left'
}

console.log(DirectionWithString.Down)
// Down


// objects
const user : {
    id : number,
    userName : string
} = {
    id : 1,
    userName : 'Uday Yadav'
}

console.log(user);

type AnotherUser = {
    id : number,
    userName : string
}

const anotherUser : AnotherUser = {
    id : 10,
    userName : 'Uday yadav'
}

console.log(anotherUser);

// type assertion

let cid : any = 1
let customerId = <number> cid;
let anotherCustomerId = cid as number;
// customerId = true; !! error
Enter fullscreen mode Exit fullscreen mode

Functions



function addNum(x: number, y: number) {
    return x + y;
}

addNum(2, 5);

function logger(message: string | number): string {
    return `msg : ${message}`;
}

console.log(logger('hello world'))
console.log(logger(123456789))

interface UserInterface {
    readonly id: number,
    username: string
    age?: number // to make this optional
}

const userImpl: UserInterface = {
    id: 1,
    username: 'John',
}

// userImpl.id = 1; !! error

// interface for functions

interface MathFunction {
    (x: number, y: number): number
}

const adder: MathFunction = (x: number, y: number) => x + y;
function adder2(): MathFunction {
    return (x: number, y: number) => x + y;
}

console.log(adder(2, 5));
console.log(adder2()(2, 5));
Enter fullscreen mode Exit fullscreen mode

OOPs in Typescript

interface PersonInterface {
    id: number
    personName: string
    register(): boolean
}


class Person implements PersonInterface {
    id: number; // also private, protected
    personName: string;

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


    register(): boolean {
        console.log(`msg: ${this.personName} is registered`)
        return true
    }
}

let person = new Person(1, 'John')
person.register()

class Employee extends Person {
    position: string

    constructor(id: number, personName: string, position: string) {
        super(id, personName);
        this.position = position
    }

}

let emp = new Employee(2, 'Jane', 'developer');
console.log(emp.register())
Enter fullscreen mode Exit fullscreen mode

Generics


function getArray<T>(items: T[]): T[] {
  return new Array().concat(items);
}

let numArray = getArray([1, 2, 3]);
let strArray = getArray(["a", "b", "c"]);

// numArray.push('hello'); !! error
Enter fullscreen mode Exit fullscreen mode

Discussion (0)