typeScript核心篇——通过TS写es6类型编程：枚举，类型推论，类型兼容性，高级类型

Posted 2022-08-18 勇敢*牛牛

通过TS写es6类型编程

注意tsconifg修改配置：

"target": "ES6", 
"module": "ES6", 

导出：export default class Main
引入：import Main from './js/Main.js';  

tsc -W
=======================================
+++最最注意的是es6引入模块需要加后缀名.js+++
=======================================

枚举

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举

enum Direction 
    Up = 1,
    Down,
    Left,
    Right

如上，我们定义了一个数字枚举， Up使用初始化为 1。
其余的成员会从 1开始自动增长。 换句话说， Direction.Up的值为 1， Down为 2， Left为 3， Right为 4。

使用方法有两种：
全局引入和局部引入：

全局引入
export enum COLORRED="red",BLUE="blue";
export default class Main
    constructor()
        console.log(COLOR.BLUE);
    

局部引入
export default class Main
    constructor()
        enum COLORRED="red",BLUE="blue";
        console.log(COLOR.BLUE);
    

计算的和常量成员

enum FileAccess 
    // constant members
    None,
    Read    = 1 << 1,
    Write   = 1 << 2,
    ReadWrite  = Read | Write,
    // computed member
    G = "123".length

运行时的枚举
冻结的对象概念

enum E 
    X, Y, Z

function f(obj:  X: number ) 
    return obj.X;

f(E);

反向映射
除了创建一个以属性名做为对象成员的对象之外，数字枚举成员还具有了 反向映射，从枚举值到枚举名字。 例如，在下面的例子中：

enum Enum 
    A

let a = Enum.A;
console.log(a);//0

let nameOfA = Enum[a]; 
console.log(nameOfA);// "A"

const枚举
常量枚举，不允许修改这个常量枚举数据，不能计算

const enum Enum 
    A = 1,
    B = A * 2//不行

declare：描述

declare enum Enum 
    A = 1,
    B,
    C = 2

类型推论
当对一个对象进行赋值对象操作，使用泛型接口。

interface IObj
    a:number;
    b:number;


//也就是提前说明这个对象是包括<IOBj>的
var o:IObj=<IObj>;
o.a=1;
o.b=2;

交叉类型
将T类型和U类型都能放在c对象中。这个类型就叫交叉类型。相当于前面的不同类放在同一类数组的元素当中一样。

<T & U>

联合类型
函数返回一个什么类型或者什么类型

interface Bird 
    fly();
    layEggs();


interface Fish 
    swim();
    layEggs();


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


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

typeof类型保护

function isNumber(x: any): x is number 
    return typeof x === "number";

type定义类型：类型别名

本身就是类型
给赋值的时候，会自动 提示你的赋值范围为是那些。

类型别名
type MouseEmitter="click"|"mousedown"|"mouseover"|"mouseenter"|"mouseleave";
var a:MouseEmitter;
a="mousedown";

type Name=string|number;
var a:Name="a";
a="b";
a=10;

类型别名也可以是泛型 - 我们可以添加类型参数并且在别名声明的右侧传入：
type GetName<T>=value:T;
var a:GetName<number>=value:1;
var b:GetName<string>=value:"a";

映射类型

type Readonly<T> = 
    readonly [P in keyof T]: T[P];

type Partial<T> = 
    [P in keyof T]?: T[P];

关键字 keyof

命名空间

可以切换命名空间，开发阶段，线上阶段。

namespace A
    export class Box
        constructor()

        
        public  play()
            console.log("play1");
        
    


namespace B
    export class Box
        constructor()

        
        public play()
            console.log("play2");
        
    


var a:A.Box=new A.Box();
var b:B.Box=new B.Box();
a.play();
b.play();

装饰器 @ab()

若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：
而且装饰器必须是一个闭包写法：作用类似于proxy

• target就是装饰器在哪里被调用，target就是这个对象
• key就是装饰器被调用下面的方法名
• disc 就是装饰器被调用下面的方法的描述对象

function ab()
    return function(target:Main,key:string,disc:PropertyDescriptor)
        // target就是装饰器在哪里被调用，target就是这个对象
        // key就是装饰器被调用下面的方法名
        // disc 就是装饰器被调用下面的方法的描述对象
        // console.log(target,key,disc);
        // disc.value();
        target.play();
    

export default class Main
    @ab()
    public method()
        console.log("aaa")
    
    public play()
        console.log("play");