美文网首页
Typescript进阶

Typescript进阶

作者: 一瓣山河 | 来源:发表于2019-02-05 22:13 被阅读52次

    类型别名

    类型别名用来给一个类型起个新名字。

    type Name = string;
    type NameResolver = () => string;
    type NameOrResolver = Name | NameResolver;
    function getName(n: NameOrResolver): Name {
        if (typeof n === 'string') {
            return n;
        } else {
            return n();
        }
    }
    

    上例中,我们使用 type 创建类型别名。

    字符串字面量类型

    字符串字面量类型用来约束取值只能是某几个字符串中的一个。

    type EventNames = 'click' | 'scroll' | 'mousemove';
    function handleEvent(ele: Element, event: EventNames) {
        // do something
    }
    
    handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
    handleEvent(document.getElementById('world'), 'dbclick'); // 报错,event 不能为 'dbclick'
    
    // index.ts(7,47): error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.
    

    上例中,我们使用 type 定了一个字符串字面量类型 EventNames,它只能取三种字符串中的一种。

    注意,类型别名与字符串字面量类型都是使用 type 进行定义。

    元组

    元组(Tuple)合并了不同类型的对象
    例子: 定义一对值分别为 string 和 number 的元组:

    let xcatliu: [string, number] = ['Xcat Liu', 25];
    

    当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项;其他情况可以只赋值一个元素。

    枚举

    枚举用于取值被限制在一定范围内的场景,枚举使用 enum 关键字来定义:

    enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
    

    枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射。
    枚举项的值也可以手动赋值,未手动赋值的枚举项会接着上一个枚举项递增。

    enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
    

    注:当有相同值的时候,后面赋值的会覆盖前面的。

    相关文章

      网友评论

          本文标题:Typescript进阶

          本文链接:https://www.haomeiwen.com/subject/mozvsqtx.html