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

发布于:2023-01-16 ⋅ 阅读:(468) ⋅ 点赞:(0)

通过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 COLOR{RED="red",BLUE="blue"};
export default class Main{
    constructor(){
        console.log(COLOR.BLUE);
    }
}
局部引入
export default class Main{
    constructor(){
        enum COLOR{RED="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");
    }
}
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到