美文网首页
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进阶

    1.类型别名 类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其...

  • Typescript进阶

    类型别名 类型别名用来给一个类型起个新名字。 上例中,我们使用 type 创建类型别名。 字符串字面量类型 字符串...

  • TypeScript 进阶

    一、编译ts文件 命令: tsconfig.json配置文件的配置选项: include定义希望被编译文件所在的目...

  • React SSR & Next.js & GraphQL &

    React SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程(18...

  • typescript进阶之旅

    一、基础类型 1. 布尔 2. 数字 3. string 4. 数组 5. 元组 元组类型允许表示一个已知元素数量...

  • TypeScript进阶(类)

    类 传统方法中,JavaScript 通过构造函数实现类的概念,通过原型链实现继承。而在 ES6 中,我们终于迎来...

  • TypeScript 进阶语法

    本文接 TypeScript 基础语法入门[https://www.jianshu.com/p/8fe11ebb7...

  • TyepScript入门之进阶篇

    现在我们学习TypeScript的进阶部分。我学习TypeScirpt的目的是因为我发现React js的源码是用...

  • TypeScript进阶(泛型)

    泛型是指在定义函数,接口或类的时候,不先预先指定具体的类型,而使用的时候再指定类型的一种特性。简单的?实现一个函数...

  • js语言进阶 - TypeScript

    什么是TypeScript? TypeScript是微软公司开发的一款开源的JavaScript超集语言(Java...

网友评论

      本文标题:Typescript进阶

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