（TypeScript篇）二.基础

1.类Class

概念：定义了一切事物的抽象特点

对象：类的实例

面向对象三大特性：封装继承多态

1）构建动物类

class Animal{

   name: string;

   static categories: string[] = ['mamba', 'google'];

   // 构造器

    constructor(name: string){

        this.name = name;

    }

    // 静态方法

    static isAnimal(a){

        return a instanceof Animal

    }

    // 方法

    run(){

        return `${this.name} is running`

    }

}

// 实例化

const snake = new Animal('snake');

console.log(snake.run()); // 对象点方法

console.log('静态属性',Animal.categories); // 类名点属性名

2）构建其继承

class Dog extends Animal{  // 继承

    bark(){  // 继承之后增加的方法

        return `${this.name} is barking`;

    }

}

const xiaohuang = new Dog('xiaohuang');// 实例化对象小黄

console.log(xiaohuang.run());

console.log(xiaohuang.bark());

 

3）继承之后实现方法的重写

class Cat extends Animal{

    constructor(name){

       super(name);

    }

    run(){  // 重写run方法

        return 'Mamba，' + super.run();

    }

}

const maomao = new Cat('maomao');  // 实例化Cat类为maomao

console.log(maomao.run());

 

4）修饰符public private protected

说明：private 设置属性或方法只能自己类中访问，其子类也不行

protected其子类可以访问

public 公开

 

2.接口interface

对对象的形状（shape）进行描述

对类（class）进行抽象

Duck Typing鸭子类型

 

1）定义接口用类来实现

interface Radio{

    switchRadio(): void;

}

interface Battery{

    checkBatteryStatus(): void;

}

// 类实现

class Car implements Radio{

    switchRadio(){

       console.log(123);

    }

}

// 多实现

class Cellphone implements Radio, Battery{

    switchRadio(){

       console.log(123);

    }

    checkBatteryStatus(){

        console.log(54555);

    }

}

 

2）设置接口属性

interface Person{

    readonly id: number;  // 只读属性，定义时候赋值，不能修改

    name: string;

    age?: number;   // ?表示可选属性

}

// 常规属性必须添加，可选属性没必要添加，只读属性必须定义时候赋值

let mamba: Person = {

    id: 1,

    name: 'mamba',

    age: 20

}

// mamba.id = 2; 报错，只读属性不能修改

// const 定义常量 readonly 用在属性上

// const a:number = 2; 

// a = 3; // 这里会报错

 

3.枚举enum

enum Direction{

    Up = 'UP';

    Down = 'DOWN';

    Left = 'LEFT';

    Right = 'RIGHT';

}

const value = 'UP';

if(value === Direction.Up){

    console.log('go up!');

}

console.log(Direction.Up);

 

4.泛型

说明：泛型是指在定义函数 接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

1）定义格式

function echo<T>(arg: T): T{

    return arg;

}

// 会发生类型推论

// 给你定义const result:string

// 根据传递的值可以得出如：数字number就会变成number类型

const result = echo('mamba');

 

2）定义多个参数,元组

function swap<T, U>(tuple:[T, U]): [U, T]{

    return [tuple[1], tuple[0]];

}

const result2 = swap(['string', 123]); // 类型推论，T是string类型 U是number类型

console.log(result2[0]);

function echoWithArr<T>(arg: T[]): T[]{

    console.log(arg.length);

    return arg;

}

const arr2 = echoWithArr([1, 2, 3]);  // 类型推论，是个number类型的数组

 

3）约束泛型

// 说明：约束有length这个属性

interface IWithLength{

    length: number

}

function echoWithLength<T extends IWithLength>(arg: T): T{

    console.log(arg.length);

    return arg;

}

const str = echoWithLength('str');

const obj = echoWithLength({length: 10});

const arr2 = echoWithLength([1, 2, 3]);

console.log('##################');

 

4）定义类的泛型

class Queue<T>{

    private data = [];

    push(item: T){

        return this.data.push(item);

    }

    pop(): T{

        return this.data.shift();

    }

}

const queue = new Queue<number>();

queue.push(1);

console.log(queue.pop().toFixed());

 

const queue2 = new Queue<string>();

queue2.push('str');

console.log(queue2.pop().length);

 

5）接口泛型

interface KeyPair<T, U>{

    key: T;

    value: U;

}

let kp1: KeyPair<number, string> = {key: 123, value: 'str'};

let kp2: KeyPair<string, number> = {key: 'str', value: 456};

 

let arr: number[] = [1, 2, 3];

// 泛型

let arrTwo: Array<number> = [1, 2, 3];

 

// 定义接口

interface IPlus<T>{

   (a: T, b: T): T

}

function plus(a: number, b: number): number{

    return a + b;

}

function connect(a: string, b: string): string{

    return a + b;

}

const a: IPlus<number> = plus;

const b: IPlus<string> = connect;

 

5.类型别名

type PlusType = (x: number, y: number) => number;

function sum(x: number, y: number): number{

    return x + y;

}

const sum2: PlusType = sum;

 

type NameResolver = () => string;

type NameOrResolver = string | NameResolver;

function getName(n: NameOrResolver): string{

    if(typeof n === 'string'){

        return n;

    }else{

        return n();

    }

}

 

6.类型断言 

说明：断言必须存在一种类型

function getLength(input: string | number): number{

    const str = input as String;

    if(str.length){

        return str.length;

    }else{

        const number = input as Number;

        return number.toString().length;

    }

    // 另外一种写法

    if((<String>input).length){

        return (<string>input).length;

    }else{

       return input.toString().length;

    }

}