TypeScript 发布 4.9 beta

$ npm install typescript@beta

另外，由于 beta 版本与正式版本通常不会有明显的差异，这一系列通常只会介绍 beta 版本而非正式版本。

非常合理，这么重磅的特性当然要版本凑个整才有仪式感。

如果你有兴趣了解更多装饰器的历史，可以阅读笔者的 走近MidwayJS：初识TS装饰器与IoC机制 中的介绍，或者贺师俊（Hax）老师在 是否应该在production里使用typescript的decorator？的回答。

// 一块神奇调色板
const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
};

interface Palette {
  red: number[];
  green: string;
  blue: number[];
}

palette.green.startsWith('#'); // √ boolean
palette.red.startsWith('#'); // × 类型“number[]”上不存在属性“startsWith”。

const palette = {
  red: [255, 0, 0],
  // typo
  grren: '#00ff00',
  blue: [0, 0, 255],
};

type Colors = 'red' | 'green' | 'blue';
type RGB = [number, number, number];

const palette: Record<Colors, string | RGB> = {
  red: [255, 0, 0],
  // × 不存在此属性
  grren: '#00ff00',
  blue: [0, 0, 255],
};

看起来我们通过工具类型 + 字面量联合类型 + 元组类型完成了非常精确的类型标注，但现在又出现了新的问题，我们的调用出现了类型错误：

palette.green.startsWith('#'); // × 类型“string | RGB”上不存在属性“startsWith”
palette.red.startsWith('#'); // × 类型“string | RGB”上不存在属性“startsWith”

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

// string
palette.green.startsWith('#'); // √
// [number, number, number]
palette.red.find(); // √
// [number, number, number];
palette.blue.entries(); // √

你可能会觉得 satisfies 这个名字不太好理解，其实当时还有另一个候选的名字 implements，但由于它实际上已经是一个  JavaScript（ECMAScript）关键字，同时也已经被使用在 TypeScript Class 对抽象类以及接口的实现声明中，为了避免造成不必要的困惑，最后还是 satisfies 成功胜出。

type A = Record<Colors, string | RGB>;

type B = {
  red: RGB;
  green: string;
  blue: RGB;
};

declare let a: A;
declare let b: B;

a = b; // √，说明子类型关系成立
b = a; // ×

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
} as Record<Colors, string | RGB>;

palette.blue.includes();

class Animal {
  eat() { }
}

class Dog extends Animal {
  bark() { }
}

const dog = new Dog();
dog.eat();

class Cat extends Animal {
  meow() { }
}

const wtfIsThisAnimal = new Animal()

if (wtfIsThisAnimal instanceof Dog) {
  wtfIsThisAnimal.bark();
}

if (wtfIsThisAnimal instanceof Cat) {
  wtfIsThisAnimal.meow();
}

Animal animal1 = new Animal();
Animal animal2 = new Dog();

Dog notADog = (Dog) animal1;
Dog actuallyADog = (Dog) animal2;

此特性并没有包含在 4.9 beta 中，而是被作为一个 4.9 整体的工作项，这里属于提前介绍。

import { writableStreamFromWriter } from "https://deno.land/std@0.156.0/streams/mod.ts";

此特性并没有包含在 4.9 beta 中，而是被作为一个 4.9 整体的工作项，这里属于提前介绍。

// @ts-strict 
// @ts-noUnusedLocals
// @ts-strictNullChecks
// @ts-noPropertyAccessFromIndexSignature false

你可以查看 #49886 来了解所有已被支持的单文件配置。类似于 @ts-check，这些指令必须被放在文件的顶部才能生效。

interface LoginUser {
  userId: string;
  invitor: string;
}

interface Visitor {
  visitorId: string;
  from: string;
}

function checkUser(user: LoginUser | Visitor): string {
  if ('userId' in user) {
    return user.invitor
  } else {
    return user.from;
  }
}

interface LoginUser {
  userId: string;
  invitor: string;
}

interface Visitor {
  visitorId: string;
  from: string;
}

function checkUser(info: { user: unknown }): string {
  const user = info.user;
  if (user && typeof user === "object") {
    // 类型 object 上不存在属性 userId
    if ('userId' in user && typeof user.userId === 'string') {
      // 类型 object 上不存在属性 invitor
      return user.invitor;
    }
  }
}

另外，4.9 版本现在也会约束 in 操作符的左侧必须是 string / number / symbol 类型，以及右侧必须是 object 类型。

在 JavaScript 中 NaN 是一个特殊的数值类型值，ECMA262 标准中明确规定了它是一个基于 IEEE 754-2019 规范（IEEE Standard for Floating-Point Arithmetic. Institute of Electrical and Electronic Engineers, New York (2019)）的“非正常数字”值。也就是说，它还是数值类型的值，但不是正常数字，或者说非数字。是不是有点混乱？在 ECMAScript 标准中规定了 Number 类型为上面提到的 IEEE 754 中 64 位浮点数实现，而 NaN 也就是遵循此标准的一个数字，并同样有重要的作用，如作为 0/0 这类运算的结果。

另外，null 类型是一个 Null 类型的值（也是唯一一个），虽然 typeof null 的结果是 object ，但这更多是历史包袱的原因。

而 NaN 实际上与任何类型的任何值都不等价（包括 NaN 本身），因此在判断一个值是不是 NaN 时，我们需要使用 Number.isNaN 而不是 value === NaN 。

TypeScript 4.9 版本新增了错误使用等价判断方式的提示：

// 此表达式将始终返回 false，你是否指 Number.isNaN(value) ?
if(value === NaN) {}

const obj = {};

// 此语句始终将返回 false，因为 JavaScript 中使用引用地址比较对象，而非实际值
if(obj === {}){}

▐  Promise.resolve 的类型更新

type Awaited<T> = T extends null | undefined
  ? T
  : T extends object & {
      then(onfulfilled: infer F): any;
    }
  ? F extends (value: infer V, ...args: any) => any
    ? Awaited<V>
    : never
  : T;

interface PromiseConstructor {
  resolve<T>(value: T | PromiseLike<T>): Promise<T>;
}

// 更新为
interface PromiseConstructor {
  resolve<T>(value: T): Promise<Awaited<T>>;
  resolve<T>(value: T | PromiseLike<T>): Promise<Awaited<T>>;
}

▐  完全保留 JavaScript 文件中的导入

import { someValue, SomeClass } from "some-module";

/** @type {SomeClass} */
let val = someValue;

这里 SomeClass 仅被作为 JSDoc 的类型标注使用，因此是可以直接从导入语句中被移除的。但这么做可能导致的问题是如果 JSDoc 类型标注不完全准确，就会导致这一擦除行为也表现异常。

因此，现在 JavaScript 文件中的导入语句将会被完全保留。

全文完，我们 5.0 beta 版本见:-)。

淘宝店铺作为电商基础链路，拥有亿级流量，同时也面临着无数机遇与挑战。店铺前端团队承载了服务于消费者的淘宝店铺页面、服务于商家的旺铺管理后台、服务于外部 ISV 开发商的模块体系以及其他相关业务，是消费者和商家之间最近的纽带。在过去、现在、未来，我们都将致力于提升商家的运营体验与消费者的购买体验。

前端 社群



下方加 Nealyang 好友回复「 加群」即可。


如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章

点赞和在看就是最大的支持