Basic TypeScript concepts

Posted by sryder on Fri, 22 May 2020 04:06:46 +0200

1. Base Type

There are 12

Boolean let isDone: boolean = false;

Number let dec: number = 6;

String let name: string ='bob';

Array let list: number[] = [1, 2, 3];

Tuple let x: [string, number] = ['hello', 10]

Enumerate enum Color {Red, Green, Blue} let c: Color =Color.Green;

Any let notSure: any = 4;

Void function warnUser(): void { console.log('this is no return value') }

Null/Undefined corresponds to null and undefined in js

Never represents the type of values that never exist

Object Object Type

Type assertions force type conversion <string>someValue or someValue as string

2. Interface

An interface is similar to a structure in that it can be used to define an object's attribute type, function type, class type, and so on.

interface SquareConfig {
    color?: string;
    width?: number;
}

interface SearchFunc {
    (source: stirng,subString: string): boolean;
}

2.1 Interface Inheritance

Interfaces can inherit more than one

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

2.2 Mixed Type

A type can be both a function, an object, and a doping type.

interface Counter{
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function(start: number){ };
    counter.interval = 123;
    counter.reset = function(){};
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

2.3 Interface Inheritance Class

Interfaces inherit a class and inherit only its members but not its implementation.You can inherit to the private s and protected members of this class.

3. Classes

Like the ES6 class, there is some additional support

3.1 Member Modifiers (Public, Private and Protected)

private，protected，public

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name)
        this.department = department;
    }

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

3.2 Read-only readonly

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}

3.3 Abstract Classes

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

4. Functions

The differences from the ES6 function are:

4.1 Function declaration parameters and return values have types

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

4.2 Supports function overloading

function pickCard(x: {suit: string; card: number; }[]): number;

function pickCard(x: number): {suit: string; card: number; };

5. Generics

Constrains the various types of member variables in a class with type variables, including attribute types, method parameter types, and return value types

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

7. Advanced Types

7.1 Cross Type

Multiple types merge into one type, composite type, and contain all types of attributes.Effects such as Person & Serializable & Loggable

7.2 Union Type

It can be any of several types, for example, number | string | boolean means a value can be number, string, or boolean.

If the value is a union type, only members common to all types of the union type can be accessed.

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors

7.5 can be null type

Is the nullable type in C#, b can be null

class C {
    a: number;
    b?: number;
}

7.4 Type Alias

A type alias is a new name given to a type.The alias does not create a new type, it simply refers to the original type.

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

type Tree<T> = {
    value: T;
    left: Tree<T>;
    right: Tree<T>;
}

8. Namespace

Same as C#Namespace

Topics: Attribute

Programmer Think

Basic TypeScript concepts

Hot Topics