typescript常用技术点以及Demo

前一段时间一直在用typescript搬砖，今天结合typescript的官方文档系统地整理一下前段时间搬砖所用到的技术点。话不多说，让我们开始吧。

typescript官方文档地址：https://www.tslang.cn/docs/handbook/basic-types.html

ts的类型：

// ts的类型

let person1: string = "zy";
let person2: Array<number> = [1, 2, 3];
let person3: boolean = true;
let person4: object = {};

function sayHello(person: string): void {
    console.log("hello " + person);
}

console.log(person1);
console.log(person2);
sayHello(person1);
// sayHello(person2);  // 这个不可以

ts的高级类型：

// ts的高级类型

// 交叉类型，是将多个类型合并为一个类型的类型。
// 这里将多个对象合并为一个对象。
function extend<T, U>(first: T, second: U): T & U {
    let result = <T & U>{};
    for (let id in first) {
        (<any>result)[id] = (<any>first)[id];
    }
    for (let id in second) {
        if (!result.hasOwnProperty(id)) {
            (<any>result)[id] = (<any>second)[id];
        }
    }
    return result;
}

// Person类
class Person {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
}

// logger类，只有一个输出方法
class StringConsoleLogger {
    log(content: string): void {
        console.log(content);
    }
}

console.log("交叉类型测试");
let jim = extend(new Person("Jim"), new StringConsoleLogger());
jim.log(jim.name);


// 联合类型，某个参数可以是某几种类型。
// 注意：如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员。
function toString(value: string | number | boolean) {
    console.log(value);
}

console.log("联合类型测试");
toString(123);
toString("abc");
toString(true);


// 类型别名，给类型起个新名字
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}

ts的枚举：

// ts的枚举
// 使用枚举我们可以定义一些带名字的常量，可以清晰地表达意图或创建一组有区别的用例。

enum Direction {
    Up = 0,
    Down = 1,
    Left = 2,
    Right = 3
}

function getDirection(direction: Direction): void {
    console.log("you direction is: " + direction);
}

getDirection(Direction.Left);
getDirection(Direction.Right);
getDirection(Direction.Up);
getDirection(Direction.Down);

ts的接口：

// ts的接口

// 定义一个接口
interface Person {
    firstName: string;
    lastName: string;
}

// 直接使用接口，感觉这个更像c++的结构体
function sayHello(personA: Person, personB: Person): void {
    console.log("Hello " + personA.firstName + " " + personA.lastName);
    console.log("Hello " + personB.firstName + " " + personB.lastName);
}

let person1 = { firstName: "shadowings", lastName: "zy" };
let person2 = { firstName: "123", lastName: "456" };

sayHello(person1, person2);

ts的泛型：

// ts的泛型，可以用来创建可重用的组件

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

// 使用泛型前需要先确定T的类型
console.log(identity<number>(1));
console.log(identity<string>("abc"));
console.log(identity<boolean>(true));

ts的类与继承：

// ts的类与继承

// 抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。
// abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
abstract class Animal {
    abstract toString(): string;
    sleep(): string {
        return "i am sleeping";
    }
}

// 这是一个继承
// 继承的构造器一定要有super()，否则this编译不通过。
class Person extends Animal{
    protected name: string;
    protected age: number;
    constructor(name: string, age: number) {
        super();
        this.name = name;
        this.age = age;
    }
    toString() {
        return "name: " + this.name + "age: " + this.age;
    }
}

class Student extends Person{
    protected school: string;
    constructor(name: string, age: number, school: string) {
        super(name, age);
        this.school = school;
    }
    toString(): string {
        return "name: " + this.name + " age: " + this.age + " school: " + this.school;
    }
}

let student1 = new Student("aaa", 123, "XXX school");
console.log(student1.toString());
console.log(student1.sleep());