个人学习为主, 顺便方便他人.😉
由于个人能力有限, 所以本文只从"typescript 更新日志"中筛选类型/语法相关的知识点, 3.1 之前的版本都是一些基础知识, 所以只摘取了部分内容. 如有错误还请各位多多指点帮助.
注意: 类型推断的变化(放宽/收窄)和配置项以及 ECMA 的新增语法选录.
获取 Prmoise 的 resolve 的值的类型
// Promise<number> const p = Promise.resolve(123); // Awaited<Promise<number>> === number type B = Awaited<typeof p>; // 类型参数不是Promise类型, // 那么不处理, 直接返回 type S = Awaited<string>; // string之前版本就支持"import type {xx} from 'xxx'"的语法, 现在进步支持对单个导入项标记"type".
import { someFunc, type BaseType } from "./some-module.js";同步兼容 ecma 语法
class Person { #name: string; constructor(name: string) { this.#name = name; } equals(other: unknown) { return other && typeof other === "object" && #name in other && // <- 🔥新语法 this.#name === other.#name; } }同步兼容 ecma 语法, 对导入文件进行运行时判断, ts 不做任何判断.
import obj from "./something.json" assert { type: "json" };还有"import"函数的语法:
const obj = await import("./something.json", { assert: { type: "json" }, });tsconfig增加了一个配置项"preserveValueImports", 用来保留未使用的变量, 意义在于vue的setup模式下, js定义的变量, 只在模板中使用, ts识别不到"已使用", 有了这个选项就可以保留变量.
<!-- A .vue File --> <script setup> import { someFunc } from "./some-module.js"; </script> <button @click="someFunc">Click me!</button>常见的类型保护如下:
function nOrs() { return Math.random() > 0.5 ? 123 : "abc"; } let input = nOrs(); if (typeof input === "number") { input++; }如果typeof input === 'number'抽象到变量中,在 4.4 版本之前类型保护会失效,但是在 4.4 中 ts 可以正确的类型保护了.
function nOrs() { return Math.random() > 0.5 ? 123 : "abc"; } const input = nOrs(); const isNumber = typeof input === "number"; if (isNumber) { // 失效,无法知道input是number类型 input++; }注意: 要求被保护的必须是"const 的变量"或者"realdonly 的属性", 比如上面的 input 和下面的"n"属性.
interface A { readonly n: number | string; } const a: A = { n: Math.random() > 0.5 ? "123" : 321 }; const isNumber = typeof a.n === "number"; if (isNumber) { // r是number const r = a.n; }通过属性的判断可以缩小联合类型的范围.
type Shape = | { kind: "circle"; radius: number } | { kind: "square"; sideLength: number }; function area(shape: Shape): number { const isCircle = shape.kind === "circle"; if (isCircle) { // We know we have a circle here! return Math.PI * shape.radius ** 2; } else { // We know we're left with a square here! return shape.sideLength ** 2; } }之前只支持"string | number ", 造成对 Object 类型的键的描述不全面, 现在解决了.
interface Test1 { [k: string | number | symbol]: any; } type Test2 = { [k in string | number | symbol]: any; };同步支持 es 新语法
class Foo { static #count = 0; get count() { return Foo.#count; } static { try { const lastInstances = loadLastInstances(); Foo.#count += lastInstances.length; } catch {} } }"override"是给类提供的语法, 用来标记子类中的属性/方法是否覆盖父类的同名属性/方法.
class A {} class B extends A { // 提示不能用override, 因为基类中没有"a"字段. override a() {} }点击跳转到指定代码, 属于行内标签.
/** * To be called 70 to 80 days after {@link plantCarrot}. */ function harvestCarrot(carrot: Carrot) {} /** * Call early in spring for best results. Added in v2.1.0. * @param seed Make sure it's a carrot seed! */ function plantCarrot(seed: Seed) { // TODO: some gardening }let c: [string, string?] = ["hello"]; c = ["hello", "world"];但是要求尾部不能有可选元素(?)和"..."出现
let foo: [...string[], number]; foo = [123]; foo = ["hello", 123]; foo = ["hello!", "hello!", "hello!", 123]; let bar: [boolean, ...string[], boolean]; bar = [true, false]; bar = [true, "some text", false]; bar = [true, "some", "separated", "text", false];错误示例
let StealersWheel: [...Clown[], "me", ...Joker[]]; // A rest element cannot follow another rest element. let StringsAndMaybeBoolean: [...string[], boolean?]; // An optional element cannot follow a rest element.语法和 es6 中的"``"用法一样, 只不过这里用来包裹类型:
type World = "world"; // hello world type Greeting = `hello ${World}`; type Color = "red" | "blue"; type Quantity = "one" | "two"; // "one fish" | "two fish" | "red fish" | "blue fish" type SeussFish = `${Quantity | Color} fish`;ts 系统新增 Uppercase / Lowercase / Capitalize / Uncapitalize 类型
// ABC type S1 = Uppercase<"abc">; // abc type S2 = Lowercase<"ABC">; // Abc type S3 = Capitalize<"abc">; // aBC type S4 = Uncapitalize<"ABC">;获取 key 后用来获取值, 但是不用 key,只用值, 然后重新标注 key.
type PPP<T> = { [K in keyof T as "ww"]: T[K]; }; // type A = {ww:1|'2'} type A = PPP<{ a: 1; b: "2" }>;4.1 之前版本 resolve 可以不传参数, 现在不允许.
new Promise((resolve) => { // 报错,resolve参数不能为空 resolve(); });除非对 Promise 传入类型参数"void":
// 正确 new Promise<void>((resolve) => { resolve(); });以前获取元组除了第一个元素的类型:
function tail<T extends any[]>(arr: readonly [any, ...T]) { const [_ignored, ...rest] = arr; return rest; } const myTuple = [1, 2, 3, 4] as const; const myArray = ["hello", "world"]; const r1 = tail(myTuple); // const r1: [2, 3, 4] const r2 = tail([...myTuple, ...myArray] as const); // const r2: [2, 3, 4, ...string[]]这里要求"..."后面的元素必须是元组, 只有最后一个元素可以是"..."+"数组"
type Strings = [string, string]; type Numbers = [number, number]; type StrStrNumNumBool = [...Strings, ...Numbers, boolean]; type StrStrNumNumBool = [...[string], string, ...string[]];主要是为了兼容函数参数的定义, 因为函数的参数都是有参数名的.
type Range = [start: number, end: number];定义属性的时候, 可以省略类型标注.
class A { // 此时a直接被推导出是number类型 // 类型可以省略, a不能省略 a; constructor() { this.a = 1; } }使用之前需要进行判断或断言.
try { // ... } catch (e) { e; // unknown }标注弃用. 
用来屏蔽错误, 不同于"// @ts-ignore"的使用动机, "// @ts-expect-error"主要的使用场景是你故意产生错的, 比如测试用例.
function doStuff(abc: string, xyz: string) { assert(typeof abc === "string"); assert(typeof xyz === "string"); } // 你想测试传入数字参数, 但是ts会自动推断错误, 这不是你想要的, 所以加"// @ts-expect-error" expect(() => { // @ts-expect-error doStuff(123, 456); }).toThrow();为仅类型导入和导出添加了新语法。
import type { SomeThing } from "./some-module.js"; export type { SomeThing };同步 ecma 的私有属性语法, 不同于 private 修饰符, #后的私有属性即便在编译成 js 后依然不能在类的外部访问.
class Person { #name: string; constructor(name: string) { this.#name = name; } greet() { console.log(`Hello, my name is ${this.#name}!`); } }导出语法, 同步于 ecma2020 的语法
export * as utilities from "./utilities.js";同步于 ecma 的语法, 要求必须是模块内使用, 所以起码要有一个"空导出(export {})"
const response = await fetch("..."); const greeting = await response.text(); console.log(greeting); // Make sure we're a module export {};还有一个限制就是配置项: "target"为 es2017 以上且"module"为"esnext"
只读数组
function foo(arr: ReadonlyArray<string>) { arr.slice(); // okay arr.push("hello!"); // error! }和 readonlyArray 同效果.
function foo(arr: readonly string[]) { arr.slice(); // okay arr.push("hello!"); // error! }function foo(pair: readonly [string, string]) { console.log(pair[0]); // okay pair[1] = "hello!"; // error }使用 const 断言后, 推断出的类型都是"不可修改"的.
// Type '"hello"',不能修改x的值了 let x = "hello" as const; // Type 'readonly [10, 20]' let y = [10, 20] as const; // Type '{ readonly text: "hello" }' let z = { text: "hello" } as const;还可以写使用尖角号断言:
// Type '"hello"' let x = <const>"hello"; // Type 'readonly [10, 20]' let y = <const>[10, 20]; // Type '{ readonly text: "hello" }' let z = <const>{ text: "hello" };注意const 断言只能立即应用于简单的文字表达式。
// Error! A 'const' assertion can only be applied to a // to a string, number, boolean, array, or object literal. let a = (Math.random() < 0.5 ? 0 : 1) as const; let b = (60 * 60 * 1000) as const; // Works! let c = Math.random() < 0.5 ? (0 as const) : (1 as const); let d = 3_600_000 as const;bigint 是 ECMAScript 即将推出的提案的一部分.
let foo: bigint = BigInt(100); // the BigInt function let bar: bigint = 100n; // a BigInt literal一个项目支持多个声明文件, 比如下面版本大于 3.1 就去项目下的"ts3.1"文件夹下查找声明文件.
// tsconfig.js { "typesVersions": { ">=3.1": { "*": ["ts3.1/*"] } ">=3.2": { "*": ["ts3.2/*"] } } }同步 ecma 语法, 存储模块信息的对象. 具体参看MDN.
通过在 tsconfig 中开启 resolveJsonModule:true;
随着--declaration 一起启用--declarationMap，编译器在生成.d.ts 的同时还会生成.d.ts.map。 语言服务现在也能够理解这些 map 文件，将声明文件映射到源码。
换句话说，在启用了--declarationMap 后生成的.d.ts 文件里点击 go-to-definition，将会导航到源文件里的位置（.ts），而不是导航到.d.ts 文件里。
对 readonly/?修饰符进行增删控制.
type MutableRequired<T> = { -readonly [P in keyof T]-?: T[P] }; // 移除readonly和? type ReadonlyPartial<T> = { +readonly [P in keyof T]+?: T[P] }; // 添加readonly和?常量可以用来表示类型的属性.
export const Key = "123abc"; export interface Map { [Key]: string; }symbol 类型的子类型, 只能在有 const/readonly 的情况下才可以使用, 表示唯一不可变.
// 正确 const bar: unique symbol = Symbol(); // 正确 interface M { readonly a: unique symbol; } // 错误, 不能用let let bar: unique symbol = Symbol();初始化变量直接断言已赋值.
// 没有这!, 会提示"在赋值前不能进行操作" let x!: number[]; // 这个函数的赋值ts是检测不到的, 所以上一行用了"!" initialize(); x.push(4); function initialize() { x = [0, 1, 2, 3]; }tsc --locale zh-cn后面的命令行提示都会以中文形式显示.
@ts-ignore 注释隐藏下一行错误
if (false) { // @ts-ignore：无法被执行的代码的错误 console.log("hello"); }let input = "..."; try { JSON.parse(input); } catch { // ^ 注意我们的 `catch` 语句并没有声明一个变量 console.log("传入的 JSON 不合法\n\n" + input); }注意: 需要把 tsconfig 中的目标模块设置为"esnext".
async function getZipFile(name: string, files: File[]): Promise<File> { const zipUtil = await import("./utils/create-zip-file"); const zipContents = await zipUtil.getContentAsBlob(files); return new File(zipContents, name); }通过"// @ts-nocheck"注释来声明文件不检测类型.
// @ts-nocheck let a; // 本应该提示a未赋值. a.push(123);当你使用一个新模块时，如果不想要花费时间书写一个声明时，现在你可以使用快捷声明以便以快速开始。
// xxx.d.ts declare module "hot-new-module";所有导入都是any类型
// x,y 都是any import x, { y } from "hot-new-module"; x(y);这个 vue 初始化的项目中就有, 用来声明.vue 文件是个组件.
declare module "*.vue" { import { DefineComponent } from "vue"; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any>; export default component; }还有:
declare module "*!text" { const content: string; export default content; } // Some do it the other way around. declare module "json!*" { const value: any; export default value; }🤩 有些我也不知道是那个版本的语法, 但是在别人的代码中看到了, 所以收录下.
算是一种简写, 在vue3的computed部分的代码中看到.
class Www { constructor(private readonly a1: number) { this.a1 = 123; } } // 等价于 class Www { private readonly a1: number; constructor() { this.a1 = 123; } }