最新要闻

广告

5G

首例5g乳腺手术价格是多少钱？首例5g乳腺手术成功率是多少？

首例5g乳腺手术价格是多少钱？首例5g乳腺手术成功率是多少？

 电信光纤多少钱一年？电信光纤价格表

电信光纤多少钱一年？电信光纤价格表

科技

  1. 首页
  2. 资讯
  3. 内容

TypeScript 程序员晋级的 11 个必备技巧

来源：前端新世界

当你学习TypeScript时，你的第一印象可能会欺骗你：这不就是JavaScript注解的一种方式吗？不就是编译器用来帮助我找到潜在bug的吗？


(资料图)

虽然这种说法没错，但随着你对TypeScript不断了解，你会发现这门编程语言最不可思议的力量在于编写、推断和操作数据类型。

本文总结的一些技巧，可以帮助大家充分发挥TypeScript的潜力。

#1 用集合的概念思考问题

数据类型是程序员日常要处理的概念，但要简洁地定义它却出奇地困难。然而我发现集合非常适合用作概念模型。

刚开始学习TypeScript时，我们常常会发现用TypeScript编写类型的方式很不自然。举一个非常简单的例子：

type Measure = { radius: number };type Style = { color: string };// typed { radius: number; color: string }type Circle = Measure & Style;

如果你在逻辑AND的意义上解释运算符&，可能会认为Circle是一个虚拟类型，因为它是两种类型的结合，没有任何重叠的字段。这不是TypeScript的工作方式。此时通过集合的概念思考更容易推断出正确的行为：

每个类型都是一系列值的集合。有些集合是无限的：例如string、object；有些是有限的：例如bool，undefined，...unknown​是通用集（包括所有值），而never是空集（包括无值）。类型Measure是包含radius数字字段的所有对象的集合。style也是如此。&​运算符创建一个交集：Measure & Style表示包含radius和color的对象集，这实际上是一个较小的集合，字段更常用。同理，|运算符创建一个并集：一个较大的集合，但常用字段可能较少（如果组合两个对象类型的话）。

集合还有助于了解可分配性：仅当值的类型是目标类型的子集时，才允许赋值：

type ShapeKind = "rect" | "circle";let foo: string = getSomeString();let shape: ShapeKind = "rect";// disallowed because string is not subset of ShapeKindshape = foo;// allowed because ShapeKind is subset of stringfoo = shape;
#2 了解声明类型和收窄类型

TypeScript中一个非常强大的功能是基于控制流的自动类型收窄。这意味着变量在代码位置的任何特定点都有两种与之关联的类型：声明类型和收窄类型。

function foo(x: string | number) {  if (typeof x === "string") {    // x"s type is narrowed to string, so .length is valid    console.log(x.length);    // assignment respects declaration type, not narrowed type    x = 1;    console.log(x.length); // disallowed because x is now number  } else {    ...  }}
#3 使用可区分的联合类型而不是可选字段

当定义一组多态类型（如Shape）时，很容易这样开始写代码：

type Shape = {  kind: "circle" | "rect";  radius?: number;  width?: number;  height?: number;}function getArea(shape: Shape) {  return shape.kind === "circle" ?     Math.PI * shape.radius! ** 2    : shape.width! * shape.height!;}

需要非空断言（访问radius、width和height​时），因为kind和其他字段之间没有建立关系。相反，可区分的联合类型是一个更好的解决方案：

type Circle = { kind: "circle"; radius: number };type Rect = { kind: "rect"; width: number; height: number };type Shape = Circle | Rect;function getArea(shape: Shape) {    return shape.kind === "circle" ?         Math.PI * shape.radius ** 2        : shape.width * shape.height;}

从以上代码可以看出，类型收窄消除了强制类型转换的需要。

#4 使用类型谓词避免类型断言

如果你以正确的方式使用TypeScript的话，你会发现自己很少使用显式类型断言（比如value as SomeType）；但是，有时你可能会冲动地写出诸如这样的代码：

type Circle = { kind: "circle"; radius: number };type Rect = { kind: "rect"; width: number; height: number };type Shape = Circle | Rect;function isCircle(shape: Shape) {  return shape.kind === "circle";}function isRect(shape: Shape) {  return shape.kind === "rect";}const myShapes: Shape[] = getShapes();// error because typescript doesn"t know the filtering// narrows typingconst circles: Circle[] = myShapes.filter(isCircle);// you may be inclined to add an assertion:// const circles = myShapes.filter(isCircle) as Circle[];

更优雅的解决方案是将isCircle和isRect​更改为返回类型谓词，这样就可以帮助TypeScript在filter调用后进一步收窄类型：

function isCircle(shape: Shape): shape is Circle {    return shape.kind === "circle";}function isRect(shape: Shape): shape is Rect {    return shape.kind === "rect";}...// now you get Circle[] type inferred correctlyconst circles = myShapes.filter(isCircle);
#5 控制联合类型的分布方式

类型推断是TypeScript的特性；大多数时候，它默默地为你工作。但是有时你可能对模棱两可的细微情况进行干预。分布式条件类型就是其中一种情况。

假设我们有一个ToArray辅助类，如果输入类型还不是数组类型，则返回数组类型：

type ToArray = T extends Array ? T: T[];

你认为以下类型会推断出什么？

type Foo = ToArray;

答案是string[] | number[]​。但这是模棱两可的。为什么不是(string | number)[]呢？

默认情况下，当TypeScript遇到联合类型（此处为string | number​）的泛型参数（此处为T​）时，它会分布到每个组成部分中，这就是为什么会得到string[] | number[]​的原因。你可以通过使用特殊语法并将T​包装在一对[]中来更改此行为，例如：

type ToArray = [T] extends [Array] ? T : T[];type Foo = ToArray;

现在Foo​被推断为类型(string | number)[]。

#6 使用详尽检查捕获在编译时未处理的情况

在switch​语句中使用enum枚举时，一个好习惯是在没有匹配到合适值的情况下主动抛错，而不是像在其他编程语言中那样默默地忽略它们：

function getArea(shape: Shape) {  switch (shape.kind) {    case "circle":      return Math.PI * shape.radius ** 2;    case "rect":      return shape.width * shape.height;    default:      throw new Error("Unknown shape kind");  }}

通过使用never类型，静态类型检查就可以更早地查找到错误：

function getArea(shape: Shape) {  switch (shape.kind) {    case "circle":      return Math.PI * shape.radius ** 2;    case "rect":      return shape.width * shape.height;    default:      // you"ll get a type-checking error below                // if any shape.kind is not handled above      const _exhaustiveCheck: never = shape;      throw new Error("Unknown shape kind");  }}

有了这个，在添加新的shape​种类时，就不可能忘记更新getArea函数。

该技术背后的基本原理是，除了never​之外，不能为never​类型分配任何内容。如果shape.kind​的所有备选项都被case​语句用尽，那么达到default​的唯一可能类型是never​；但是，如果未涵盖所有备选项，则将泄漏到default分支并导致无效分配。

#7 宁可使用type而不是interface

在TypeScript中，type和interface​是两种非常相似的数据结构，都可以用来构造复杂的对象的。虽然可能有争议，但我的建议是在大多数情况下始终使用type，仅在满足以下任一条件时才使用interface：

想利用interface的合并功能。有涉及类/接口层次结构的OO样式代码。

否则，始终使用更通用的type构造会产生更一致的代码。

#8 只要合适宁可使用元组而不是数组

对象类型是构造结构化数据的常用方法，但有时你可能希望使用更简洁的表示形式，而改用简单的数组。例如，Circle可以定义为：

type Circle = (string | number)[];const circle: Circle = ["circle", 1.0];  // [kind, radius]

但是这种构造是松散的，如果创建类似["circle", "1.0"]的内容很容易出错。我们可以通过使用元组来使其更严格：

type Circle = [string, number];// you"ll get an error belowconst circle: Circle = ["circle", "1.0"];

使用元组的一个很好的例子是React中的useState。

const [name, setName] = useState("");

既紧凑又类型安全。

#9 控制推断类型的通用性或特殊性

TypeScript在进行类型推断时使用合理的默认行为，旨在使常见情况下的代码编写变得容易（因此类型不需要显式注释）。有几种方法可以调整其行为。

使用const缩小到最具体的类型
let foo = { name: "foo" }; // typed: { name: string }let Bar = { name: "bar" } as const; // typed: { name: "bar" }let a = [1, 2]; // typed: number[]let b = [1, 2] as const; // typed: [1, 2]// typed { kind: "circle; radius: number }let circle = { kind: "circle" as const, radius: 1.0 };// the following won"t work if circle wasn"t initialized// with the const keywordlet shape: { kind: "circle" | "rect" } = circle;
使用satisfies来检查类型，而不影响推断的类型

请看以下示例：

type NamedCircle = {    radius: number;    name?: string;};const circle: NamedCircle = { radius: 1.0, name: "yeah" };// error because circle.name can be undefinedconsole.log(circle.name.length);

有个错误，这是因为根据circle​的声明类型NamedCircle，name​字段确实可以未定义，即使变量初始值设定项提供了字符串值。当然，我们可以删除:NamedCircle​类型注释，但这将松散对circle对象有效性的类型检查。进退两难。

幸运的是，Typescript 4.9引入了一个新的satisfies关键字，它允许你在不更改推断类型的情况下检查类型：

type NamedCircle = {    radius: number;    name?: string;};// error because radius violates NamedCircleconst wrongCircle = { radius: "1.0", name: "ha" }    satisfies NamedCircle;const circle = { radius: 1.0, name: "yeah" }    satisfies NamedCircle;// circle.name can"t be undefined nowconsole.log(circle.name.length);

修改后的版本具有两个优点：对象字面量保证符合NamedCircle类型，推断类型具有不可为空的名称字段。

#10 使用infer创建额外的泛型类型参数

在设计实用工具函数和类型时，你经常会觉得需要使用从给定类型参数中提取的类型。在这种情况下，infer关键字就可以派上用场。它可以帮助快速推断新的类型参数。下面是两个简单的例子：

// gets the unwrapped type out of a Promise;// idempotent if T is not Promisetype ResolvedPromise = T extends Promise ? U : T;type t = ResolvedPromise>; // t: string// gets the flattened type of array T;// idempotent if T is not arraytype Flatten = T extends Array ? Flatten : T;type e = Flatten; // e: number

infer​关键字在T extends Promise​中的工作原理可以理解为：假设T​与一些实例化的泛型Promise类型兼容，临时凑合一个类型参数U​以使其工作。因此，如果T​被实例化为Promise​，则U​的解决方案将是string。

#11 创新类型操作以保持DRY

TypeScript提供了强大的类型操作语法和一组非常有用的实用程序，可帮助你将代码重复减少到最低限度。以下是一些简单示例：

与其重复字段声明：

type User = {    age: number;    gender: string;    country: string;    city: string};type Demographic = { age: number: gender: string; };type Geo = { country: string; city: string; };

还不如使用pick实用程序提取新类型：

type User = {    age: number;    gender: string;    country: string;    city: string};type Demographic = Pick;type Geo = Pick;

与其复制函数的返回类型：

function createCircle() {    return {        kind: "circle" as const,        radius: 1.0    }}function transformCircle(circle: { kind: "circle"; radius: number }) {    ...}transformCircle(createCircle());

还不如使用ReturnType提取：

function createCircle() {    return {        kind: "circle" as const,        radius: 1.0    }}function transformCircle(circle: ReturnType) {    ...}transformCircle(createCircle());

与其并行同步两种类型的shape​（此处为config​类型和Factory）：

type ContentTypes = "news" | "blog" | "video";// config for indicating what content types are enabledconst config = { news: true, blog: true, video: false }    satisfies Record;// factory for creating contentstype Factory = {    createNews: () => Content;    createBlog: () => Content;};

还不如使用映射类型和模板字面量类型根据config​的形状自动推断正确的factory类型：

type ContentTypes = "news" | "blog" | "video";// generic factory type with a inferred list of methods// based on the shape of the given Configtype ContentFactory> = {    [k in string & keyof Config as Config[k] extends true        ? `create${Capitalize}`        : never]: () => Content;};// config for indicating what content types are enabledconst config = { news: true, blog: true, video: false }    satisfies Record;type Factory = ContentFactory;// Factory: {//     createNews: () => Content;//     createBlog: () => Content; // }
总结

这篇文章介绍了一系列TypeScript语言的高级应用。在实践中，你可能会发现直接这样用并不常见；但是，这些技术被大量用于那些专门为TypeScript而设计的库：如Prisma和tRPC。了解这些技巧可以帮助你更好地理解这些工具是发挥其威力的。

关键词：