一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

2021-09-09 16:26:09 浏览数 (1)

作者:望道 https://juejin.cn/post/6904150785966211086

TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

你可以把本文看做一个带有示例的 TypeScript 高级类型备忘单

让我们开始吧!

Intersection Types(交叉类型)

交叉类型是一种将多种类型组合为一种类型的方法。这意味着你可以将给定的类型 A 与类型 B 或更多类型合并,并获得具有所有属性的单个类型。

代码语言:javascript复制
type LeftType = {
    id: number;
    left: string;
};

type RightType = {
    id: number;
    right: string;
};

type IntersectionType = LeftType & RightType;

function showType(args: IntersectionType) {
    console.log(args);
}

showType({ id: 1, left: 'test', right: 'test' });
// Output: {id: 1, left: "test", right: "test"}

如你所见,IntersectionType组合了两种类型-LeftTypeRightType,并使用符号形成了交叉类型。

Union Types(联合类型)

联合类型使你可以赋予同一个变量不同的类型

代码语言:javascript复制
type UnionType = string | number;

function showType(arg: UnionType) {
    console.log(arg);
}

showType('test');
// Output: test

showType(7);
// Output: 7

函数showType是一个联合类型函数,它接受字符串或者数字作为参数。

Generic Types(泛型)

泛型类型是复用给定类型的一部分的一种方式。它有助于捕获作为参数传递的类型 T。

优点: 创建可重用的函数,一个函数可以支持多种类型的数据。这样开发者就可以根据自己的数据类型来使用函数

泛型函数

代码语言:javascript复制
function showType<T>(args: T) {
    console.log(args);
}

showType('test');
// Output: "test"

showType(1);
// Output: 1

如何创建泛型类型:需要使用<>并将 T(名称可自定义)作为参数传递。上面的

0 人点赞