diff --git a/.github/workflows/wangdoc.yml b/.github/workflows/wangdoc.yml index 29b9a5b..8b652ac 100644 --- a/.github/workflows/wangdoc.yml +++ b/.github/workflows/wangdoc.yml @@ -10,11 +10,11 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: persist-credentials: false - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: 'latest' - name: Install dependencies diff --git a/chapters.yml b/chapters.yml index 14a2ffe..b1c1825 100644 --- a/chapters.yml +++ b/chapters.yml @@ -18,7 +18,7 @@ - decorator-legacy.md: 装饰器(旧语法) - declare.md: declare 关键字 - d.ts.md: d.ts 类型声明文件 -- operator.md: 运算符 +- operator.md: 类型运算符 - mapping.md: 类型映射 - utility.md: 类型工具 - comment.md: 注释指令 diff --git a/docs/any.md b/docs/any.md index ce62426..067e6e1 100644 --- a/docs/any.md +++ b/docs/any.md @@ -85,7 +85,7 @@ x = { foo: 'hello' }; 由于这个原因,建议使用`let`和`var`声明变量时,如果不赋值,就一定要显式声明类型,否则可能存在安全隐患。 -`const`命令没有这个问题,因为 TypeScript 要求`const`声明变量时,必须同时进行初始化(赋值)。 +`const`命令没有这个问题,因为 JavaScript 语言规定`const`声明变量时,必须同时进行初始化(赋值)。 ```typescript const x; // 报错 @@ -237,10 +237,10 @@ function f():never { let v1:number = f(); // 不报错 let v2:string = f(); // 不报错 -let v3:string = f(); // 不报错 +let v3:boolean = f(); // 不报错 ``` -上面示例中,函数`f()`会抛错,所以返回值类型可以写成`never`,即不可能返回任何值。各种其他类型的变量都可以赋值为`f()`的运行结果(`never`类型)。 +上面示例中,函数`f()`会抛出错误,所以返回值类型可以写成`never`,即不可能返回任何值。各种其他类型的变量都可以赋值为`f()`的运行结果(`never`类型)。 为什么`never`类型可以赋值给任意其他类型呢?这也跟集合论有关,空集是任何集合的子集。TypeScript 就相应规定,任何类型都包含了`never`类型。因此,`never`类型是任何其他类型所共有的,TypeScript 把这种情况称为“底层类型”(bottom type)。 diff --git a/docs/array.md b/docs/array.md index e3c34d6..0f0944e 100644 --- a/docs/array.md +++ b/docs/array.md @@ -24,7 +24,7 @@ let arr:(number|string)[]; 上面示例中,数组`arr`的成员类型是`number|string`。 -这个例子里面的圆括号是必须的,否则因为竖杠(`|`)的优先级低于`[]`,TypeScript 会把`number|string[]`理解成`number`和`string[]`的联合类型。 +这个例子里面的圆括号是必须的,否则因为竖杠`|`的优先级低于`[]`,TypeScript 会把`number|string[]`理解成`number`和`string[]`的联合类型。 如果数组成员可以是任意类型,写成`any[]`。当然,这种写法是应该避免的。 diff --git a/docs/assert.md b/docs/assert.md index 48e6f1e..f816bab 100644 --- a/docs/assert.md +++ b/docs/assert.md @@ -114,15 +114,6 @@ const s2:string = value as string; // 正确 上面示例中,unknown 类型的变量`value`不能直接赋值给其他类型的变量,但是可以将它断言为其他类型,这样就可以赋值给别的变量了。 -另外,类型断言也适合指定联合类型的值的具体类型。 - -```typescript -const s1:number|string = 'hello'; -const s2:number = s1 as number; -``` - -上面示例中,变量`s1`是联合类型,可以断言其为联合类型里面的一种具体类型,再将其赋值给变量`s2`。 - ## 类型断言的条件 类型断言并不意味着,可以把某个值断言为任意类型。 @@ -228,8 +219,7 @@ let s = 'JavaScript'; setLang(s as const); // 报错 ``` -上面示例中,`as -const`断言用于变量`s`,就报错了。下面的写法可以更清晰地看出这一点。 +上面示例中,`as const`断言用于变量`s`,就报错了。下面的写法可以更清晰地看出这一点。 ```typescript let s1 = 'JavaScript'; @@ -414,33 +404,26 @@ class Point { 断言函数是一种特殊函数,用于保证函数参数符合某种类型。如果函数参数达不到要求,就会抛出错误,中断程序执行;如果达到要求,就不进行任何操作,让代码按照正常流程运行。 ```typescript -function isString(value) { +function isString(value:unknown):void { if (typeof value !== 'string') throw new Error('Not a string'); } ``` -上面示例中,函数`isString()`就是一个断言函数,用来保证参数`value`是一个字符串。 +上面示例中,函数`isString()`就是一个断言函数,用来保证参数`value`是一个字符串,否则就会抛出错误,中断程序的执行。 下面是它的用法。 ```typescript -const aValue:string|number = 'Hello'; -isString(aValue); -``` - -上面示例中,变量`aValue`可能是字符串,也可能是数组。但是,通过调用`isString()`,后面的代码就可以确定,变量`aValue`一定是字符串。 - -断言函数的类型可以写成下面这样。 - -```typescript -function isString(value:unknown):void { - if (typeof value !== 'string') - throw new Error('Not a string'); +function toUpper(x: string|number) { + isString(x); + return x.toUpperCase(); } ``` -上面代码中,函数参数`value`的类型是`unknown`,返回值类型是`void`,即没有返回值。可以看到,单单从这样的类型声明,很难看出`isString()`是一个断言函数。 +上面示例中,函数`toUpper()`的参数`x`,可能是字符串,也可能是数值。但是,函数体的最后一行调用`toUpperCase()`方法,必须保证`x`是字符串,否则报错。所以,这一行前面调用断言函数`isString()`,调用以后 TypeScript 就能确定,变量`x`一定是字符串,不是数值,也就不报错了。 + +传统的断言函数`isString()`的写法有一个缺点,它的参数类型是`unknown`,返回值类型是`void`(即没有返回值)。单单从这样的类型声明,很难看出`isString()`是一个断言函数。 为了更清晰地表达断言函数,TypeScript 3.7 引入了新的类型写法。 @@ -507,18 +490,9 @@ function assertIsDefined<T>( 上面示例中,工具类型`NonNullable<T>`对应类型`T`去除空类型后的剩余类型。 -如果要将断言函数用于函数表达式,可以采用下面的写法。 +如果要将断言函数用于函数表达式,可以采用下面的写法。根据 TypeScript 的[要求](https://github.com/microsoft/TypeScript/pull/33622#issuecomment-575301357),这时函数表达式所赋予的变量,必须有明确的类型声明。 ```typescript -// 写法一 -const assertIsNumber = ( - value:unknown -):asserts value is number => { - if (typeof value !== 'number') - throw Error('Not a number'); -}; - -// 写法二 type AssertIsNumber = (value:unknown) => asserts value is number; diff --git a/docs/basic.md b/docs/basic.md index d86437f..4b943aa 100644 --- a/docs/basic.md +++ b/docs/basic.md @@ -69,7 +69,7 @@ function toString(num:number) { 上面示例中,函数`toString()`没有声明返回值的类型,但是 TypeScript 推断返回的是字符串。正是因为 TypeScript 的类型推断,所以函数返回值的类型通常是省略不写的。 -从这里可以看到,TypeScript 的设计思想是,类型声明是可选的,你可以加,也可以不加。即使不加类型声明,依然是有效的 TypeScript 代码,只是这时不能保证 TypeScript 会正确推断出类型。由于这个原因。所有 JavaScript 代码都是合法的 TypeScript 代码。 +从这里可以看到,TypeScript 的设计思想是,类型声明是可选的,你可以加,也可以不加。即使不加类型声明,依然是有效的 TypeScript 代码,只是这时不能保证 TypeScript 会正确推断出类型。由于这个原因,所有 JavaScript 代码都是合法的 TypeScript 代码。 这样设计还有一个好处,将以前的 JavaScript 项目改为 TypeScript 项目时,你可以逐步地为老代码添加类型,即使有些代码没有添加,也不会无法运行。 diff --git a/docs/class.md b/docs/class.md index c6ab412..0ac8567 100644 --- a/docs/class.md +++ b/docs/class.md @@ -41,14 +41,22 @@ class Point { 上面示例中,属性`x`和`y`的类型都会被推断为 number。 -TypeScript 有一个配置项`strictPropertyInitialization`,只要打开,就会检查属性是否设置了初值,如果没有就报错。 +TypeScript 有一个配置项`strictPropertyInitialization`,只要打开(默认是打开的),就会检查属性是否设置了初值,如果没有就报错。 -如果你打开了这个设置,但是某些情况下,不是在声明时赋值或在构造方法里面赋值,为了防止这个设置报错,可以使用非空断言。 +```typescript +// 打开 strictPropertyInitialization +class Point { + x: number; // 报错 + y: number; // 报错 +} +``` + +上面示例中,如果类的顶层属性不赋值,就会报错。如果不希望出现报错,可以使用非空断言。 ```typescript class Point { - x!:number; - y!:number; + x!: number; + y!: number; } ``` @@ -205,21 +213,22 @@ c.name = 'bar'; // 报错 上面示例中,`name`属性没有`set`方法,对该属性赋值就会报错。 -(2)`set`方法的参数类型,必须兼容`get`方法的返回值类型,否则报错。 +(2)TypeScript 5.1 版之前,`set`方法的参数类型,必须兼容`get`方法的返回值类型,否则报错。 ```typescript +// TypeScript 5.1 版之前 class C { _name = ''; - get name():string { + get name():string { // 报错 return this._name; } set name(value:number) { - this._name = value; // 报错 + this._name = String(value); } } ``` -上面示例中,`get`方法的返回值类型是字符串,与`set`方法参数类型不兼容,导致报错。 +上面示例中,`get`方法的返回值类型是字符串,与`set`方法的参数类型`number`不兼容,导致报错。改成下面这样,就不会报错。 ```typescript class C { @@ -228,14 +237,14 @@ class C { return this._name; } set name(value:number|string) { - this._name = String(value); // 正确 + this._name = String(value); } } ``` -上面示例中,`set`方法的参数类型(`number|return`)兼容`get`方法的返回值类型(`string`),这是允许的。但是,最终赋值的时候,还是必须保证与`get`方法的返回值类型一致。 +上面示例中,`set`方法的参数类型(`number|string`)兼容`get`方法的返回值类型(`string`),这是允许的。 -另外,如果`set`方法的参数没有指定类型,那么会推断为与`get`方法返回值类型一致。 +TypeScript 5.1 版做出了[改变](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-1.html#unrelated-types-for-getters-and-setters),现在两者可以不兼容。 (3)`get`方法与`set`方法的可访问性必须一致,要么都为公开方法,要么都为私有方法。 @@ -278,19 +287,19 @@ class MyClass { } ``` -属性存取器等同于方法,也必须包括在属性索性里面。 +属性存取器视同属性。 ```typescript class MyClass { [s:string]: boolean; - get(s:string) { // 报错 - return this[s] as boolean; + get isInstance() { + return true; } } ``` -上面示例中,属性索引没有给出方法的类型,导致`get()`方法报错。正确的写法就是本节一开始的那个例子。 +上面示例中,属性`inInstance`的读取器虽然是一个函数方法,但是视同属性,所以属性索引虽然没有涉及方法类型,但是不会报错。 ## 类的 interface 接口 @@ -462,7 +471,7 @@ interface Swimmable { // ... } -interface SuperCar extends MotoVehicle,Flyable, Swimmable { +interface SuperCar extends MotorVehicle,Flyable, Swimmable { // ... } @@ -471,7 +480,7 @@ class SecretCar implements SuperCar { } ``` -上面示例中,接口`SuperCar`通过`SuperCar`接口,就间接实现了多个接口。 +上面示例中,类`SecretCar`通过`SuperCar`接口,就间接实现了多个接口。 注意,发生多重实现时(即一个接口同时实现多个接口),不同接口不能有互相冲突的属性。 @@ -509,6 +518,23 @@ a.y // 10 上面示例中,类`A`与接口`A`同名,后者会被合并进前者的类型定义。 +注意,合并进类的非空属性(上例的`y`),如果在赋值之前读取,会返回`undefined`。 + +```typescript +class A { + x:number = 1; +} + +interface A { + y:number; +} + +let a = new A(); +a.y // undefined +``` + +上面示例中,根据类型定义,`y`应该是一个非空属性。但是合并后,`y`有可能是`undefined`。 + ## Class 类型 ### 实例类型 @@ -539,12 +565,12 @@ class Car implements MotorVehicle { } // 写法一 -const c:Car = new Car(); +const c1:Car = new Car(); // 写法二 -const c:MotorVehicle = new Car(); +const c2:MotorVehicle = new Car(); ``` -上面示例中,变量`c`的类型可以写成类`Car`,也可以写成接口`MotorVehicle`。它们的区别是,如果类`Car`有接口`MotoVehicle`没有的属性和方法,那么只有变量`c1`可以调用这些属性和方法。 +上面示例中,变量的类型可以写成类`Car`,也可以写成接口`MotorVehicle`。它们的区别是,如果类`Car`有接口`MotorVehicle`没有的属性和方法,那么只有变量`c1`可以调用这些属性和方法。 作为类型使用时,类名只能表示实例的类型,不能表示类的自身类型。 @@ -928,64 +954,47 @@ class Test extends getGreeterBase() { 上面示例中,例一和例二的`extends`关键字后面都是构造函数,例三的`extends`关键字后面是一个表达式,执行后得到的也是一个构造函数。 -对于那些只设置了类型、没有初值的顶层属性,有一个细节需要注意。 +## override 关键字 -```typescript -interface Animal { - animalStuff: any; -} +子类继承父类时,可以覆盖父类的同名方法。 -interface Dog extends Animal { - dogStuff: any; -} - -class AnimalHouse { - resident: Animal; - - constructor(animal:Animal) { - this.resident = animal; +```typescript +class A { + show() { + // ... + } + hide() { + // ... } } - -class DogHouse extends AnimalHouse { - resident: Dog; - - constructor(dog:Dog) { - super(dog); +class B extends A { + show() { + // ... + } + hide() { + // ... } } ``` -上面示例中,类`DogHouse`的顶层成员`resident`只设置了类型(`Dog`),没有设置初值。这段代码在不同的编译设置下,编译结果不一样。 +上面示例中,B 类定义了自己的`show()`方法和`hide()`方法,覆盖了 A 类的同名方法。 -如果编译设置的`target`设成大于等于`ES2022`,或者`useDefineForClassFields`设成`true`,那么下面代码的执行结果是不一样的。 +但是有些时候,我们继承他人的类,可能会在不知不觉中,就覆盖了他人的方法。为了防止这种情况,TypeScript 4.3 引入了 [override 关键字](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#override-and-the---noimplicitoverride-flag)。 ```typescript -const dog = { - animalStuff: 'animal', - dogStuff: 'dog' -}; - -const dogHouse = new DogHouse(dog); - -console.log(dogHouse.resident) // undefined -``` - -上面示例中,`DogHouse`实例的属性`resident`输出的是`undefined`,而不是预料的`dog`。原因在于 ES2022 标准的 Class Fields 部分,与早期的 TypeScript 实现不一致,导致子类的那些只设置类型、没有设置初值的顶层成员在基类中被赋值后,会在子类被重置为`undefined`,详细的解释参见《tsconfig.json》一章,以及官方 3.7 版本的[发布说明](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier)。 - -解决方法就是使用`declare`命令,去声明顶层成员的类型,告诉 TypeScript 这些成员的赋值由基类实现。 - -```typescript -class DogHouse extends AnimalHouse { - declare resident: Dog; - - constructor(dog:Dog) { - super(dog); +class B extends A { + override show() { + // ... + } + override hide() { + // ... } } ``` -上面示例中,`resident`属性的类型声明前面用了`declare`命令,这样就能确保在编译目标大于等于`ES2022`时(或者打开`useDefineForClassFields`时),代码行为正确。 +上面示例中,B 类的`show()`方法和`hide()`方法前面加了 override 关键字,明确表明作者的意图,就是要覆盖 A 类里面的这两个同名方法。这时,如果 A 类没有定义自己的`show()`方法和`hide()`方法,就会报错。 + +但是,这依然没有解决,子类无意中覆盖父类同名方法的问题。因此,TypeScript 又提供了一个编译参数`noImplicitOverride`。一旦打开这个参数,子类覆盖父类的同名方法就会报错,除非使用了 override 关键字。 ## 可访问性修饰符 @@ -1083,7 +1092,7 @@ if ('x' in a) { // 正确 上面示例中,`A`类的属性`x`是私有属性,但是实例使用方括号,就可以读取这个属性,或者使用`in`运算符检查这个属性是否存在,都可以正确执行。 -由于`private`存在这些问题,加上它是 ES6 标准发布前出台的,而 ES6 引入了自己的私有成员写法`#propName`。因此建议不使用`private`,改用 ES6 的写法,获得真正意义的私有成员。 +由于`private`存在这些问题,加上它是 ES2022 标准发布前出台的,而 ES2022 引入了自己的私有成员写法`#propName`。因此建议不使用`private`,改用 ES2022 的写法,获得真正意义的私有成员。 ```typescript class A { @@ -1094,7 +1103,7 @@ const a = new A(); a['x'] // 报错 ``` -上面示例中,采用了 ES6 的私有成员写法(属性名前加`#`),TypeScript 就正确识别了实例对象没有属性`x`,从而报错。 +上面示例中,采用了 ES2022 的私有成员写法(属性名前加`#`),TypeScript 就正确识别了实例对象没有属性`x`,从而报错。 构造方法也可以是私有的,这就直接防止了使用`new`命令生成实例对象,只能在类的内部创建实例对象。 @@ -1252,6 +1261,140 @@ class A { } ``` +## 顶层属性的处理方法 + +对于类的顶层属性,TypeScript 早期的处理方法,与后来的 ES2022 标准不一致。这会导致某些代码的运行结果不一样。 + +类的顶层属性在 TypeScript 里面,有两种写法。 + +```typescript +class User { + // 写法一 + age = 25; + + // 写法二 + constructor(private currentYear: number) {} +} +``` + +上面示例中,写法一是直接声明一个实例属性`age`,并初始化;写法二是顶层属性的简写形式,直接将构造方法的参数`currentYear`声明为实例属性。 + +TypeScript 早期的处理方法是,先在顶层声明属性,但不进行初始化,等到运行构造方法时,再完成所有初始化。 + +```typescript +class User { + age = 25; +} + +// TypeScript 的早期处理方法 +class User { + age: number; + + constructor() { + this.age = 25; + } +} +``` + +上面示例中,TypeScript 早期会先声明顶层属性`age`,然后等到运行构造函数时,再将其初始化为`25`。 + +ES2022 标准里面的处理方法是,先进行顶层属性的初始化,再运行构造方法。这在某些情况下,会使得同一段代码在 TypeScript 和 JavaScript 下运行结果不一致。 + +这种不一致一般发生在两种情况。第一种情况是,顶层属性的初始化依赖于其他实例属性。 + +```typescript +class User { + age = this.currentYear - 1998; + + constructor(private currentYear: number) { + // 输出结果将不一致 + console.log('Current age:', this.age); + } +} + +const user = new User(2023); +``` + +上面示例中,顶层属性`age`的初始化值依赖于实例属性`this.currentYear`。按照 TypeScript 的处理方法,初始化是在构造方法里面完成的,会输出结果为`25`。但是,按照 ES2022 标准的处理方法,初始化在声明顶层属性时就会完成,这时`this.currentYear`还等于`undefined`,所以`age`的初始化结果为`NaN`,因此最后输出的也是`NaN`。 + +第二种情况与类的继承有关,子类声明的顶层属性在父类完成初始化。 + +```typescript +interface Animal { + animalStuff: any; +} + +interface Dog extends Animal { + dogStuff: any; +} + +class AnimalHouse { + resident: Animal; + + constructor(animal:Animal) { + this.resident = animal; + } +} + +class DogHouse extends AnimalHouse { + resident: Dog; + + constructor(dog:Dog) { + super(dog); + } +} +``` + +上面示例中,类`DogHouse`继承自`AnimalHouse`。它声明了顶层属性`resident`,但是该属性的初始化是在父类`AnimalHouse`完成的。不同的设置运行下面的代码,结果将不一致。 + +```typescript +const dog = { + animalStuff: 'animal', + dogStuff: 'dog' +}; + +const dogHouse = new DogHouse(dog); + +console.log(dogHouse.resident) // 输出结果将不一致 +``` + +上面示例中,TypeScript 的处理方法,会使得`resident`属性能够初始化,所以输出参数对象的值。但是,ES2022 标准的处理方法是,顶层属性的初始化先于构造方法的运行。这使得`resident`属性不会得到赋值,因此输出为`undefined`。 + +为了解决这个问题,同时保证以前代码的行为一致,TypeScript 从3.7版开始,引入了编译设置`useDefineForClassFields`。这个设置设为`true`,则采用 ES2022 标准的处理方法,否则采用 TypeScript 早期的处理方法。 + +它的默认值与`target`属性有关,如果输出目标设为`ES2022`或者更高,那么`useDefineForClassFields`的默认值为`true`,否则为`false`。关于这个设置的详细说明,参见官方 3.7 版本的[发布说明](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier)。 + +如果希望避免这种不一致,让代码在不同设置下的行为都一样,那么可以将所有顶层属性的初始化,都放到构造方法里面。 + +```typescript +class User { + age: number; + + constructor(private currentYear: number) { + this.age = this.currentYear - 1998; + console.log('Current age:', this.age); + } +} + +const user = new User(2023); +``` + +上面示例中,顶层属性`age`的初始化就放在构造方法里面,那么任何情况下,代码行为都是一致的。 + +对于类的继承,还有另一种解决方法,就是使用`declare`命令,去声明子类顶层属性的类型,告诉 TypeScript 这些属性的初始化由父类实现。 + +```typescript +class DogHouse extends AnimalHouse { + declare resident: Dog; + + constructor(dog:Dog) { + super(dog); + } +} +``` + +上面示例中,`resident`属性的类型声明前面用了`declare`命令。这种情况下,这一行代码在编译成 JavaScript 后就不存在,那么也就不会有行为不一致,无论是否设置`useDefineForClassFields`,输出结果都是一样的。 + ## 静态成员 类的内部可以使用`static`关键字,定义静态成员。 @@ -1342,7 +1485,7 @@ class Box<Type> { ## 抽象类,抽象成员 -TypeScript 允许在类的定义前面,加上关键字`abstract`,表示该类不能被实例化,只能当作其他类的模板。这种类就叫做“抽象类”(abastract class)。 +TypeScript 允许在类的定义前面,加上关键字`abstract`,表示该类不能被实例化,只能当作其他类的模板。这种类就叫做“抽象类”(abstract class)。 ```typescript abstract class A { @@ -1400,9 +1543,7 @@ class B extends A { 上面示例中,抽象类`A`定义了抽象属性`foo`,子类`B`必须实现这个属性,否则会报错。 -下面是抽象方法的例子。 - -如果抽象类的属性前面加上`abstract`,就表明子类必须给出该方法的实现。 +下面是抽象方法的例子。如果抽象类的方法前面加上`abstract`,就表明子类必须给出该方法的实现。 ```typescript abstract class A { @@ -1571,4 +1712,5 @@ class FileSystemObject { ## 参考链接 - [TypeScript Constructor in Interface](http://fritzthecat-blog.blogspot.com/2018/06/typescript-constructor-in-interface.html) +- [TypeScript: useDefineForClassFields – How to avoid future Breaking Changes](https://angular.schule/blog/2022-11-use-define-for-class-fields) diff --git a/docs/comment.md b/docs/comment.md index 2955f77..126cbe7 100644 --- a/docs/comment.md +++ b/docs/comment.md @@ -31,18 +31,47 @@ console.log(isChceked); // 报错 ## `// @ts-ignore` -`// @ts-ignore`或`// @ts-expect-error`,告诉编译器不对下一行代码进行类型检查,可以用于 TypeScript 脚本,也可以用于 JavaScript 脚本。 +`// @ts-ignore`告诉编译器不对下一行代码进行类型检查,可以用于 TypeScript 脚本,也可以用于 JavaScript 脚本。 ```typescript let x:number; x = 0; -// @ts-expect-error +// @ts-ignore x = false; // 不报错 ``` -上面示例中,最后一行是类型错误,变量`x`的类型是`number`,不能等于布尔值。但是因为前面加上了`// @ts-expect-error`,编译器会跳过这一行的类型检查,所以不会报错。 +上面示例中,最后一行是类型错误,变量`x`的类型是`number`,不能等于布尔值。但是因为前面加上了`// @ts-ignore`,编译器会跳过这一行的类型检查,所以不会报错。 + +## `// @ts-expect-error` + +`// @ts-expect-error`主要用在测试用例,当下一行有类型错误时,它会压制 TypeScript 的报错信息(即不显示报错信息),把错误留给代码自己处理。 + +```typescript +function doStuff(abc: string, xyz: string) { + assert(typeof abc === "string"); + assert(typeof xyz === "string"); + // do some stuff +} + +expect(() => { + // @ts-expect-error + doStuff(123, 456); +}).toThrow(); +``` + +上面示例是一个测试用例,倒数第二行的`doStuff(123, 456)`的参数类型与定义不一致,TypeScript 引擎会报错。但是,测试用例本身测试的就是这个错误,已经有专门的处理代码,所以这里可以使用`// @ts-expect-error`,不显示引擎的报错信息。 + +如果下一行没有类型错误,`// @ts-expect-error`则会显示一行提示。 + +```typescript +// @ts-expect-error +console.log(1 + 1); +// 输出 Unused '@ts-expect-error' directive. +``` + +上面示例中,第二行是正确代码,这时系统会给出一个提示,表示`@ts-expect-error`没有用到。 ## JSDoc diff --git a/docs/declare.md b/docs/declare.md index 192f3e1..a9b4bd0 100644 --- a/docs/declare.md +++ b/docs/declare.md @@ -82,7 +82,7 @@ declare function sayHello( sayHello('张三'); ``` -上面示例中,declare 命令给出了`sayHello()`的类型描述,因此可以直接使用它。 +上面示例中,declare 命令给出了`sayHello()`的类型描述,表示这个函数是由外部文件定义的,因此这里可以直接使用该函数。 注意,这种单独的函数类型声明语句,只能用于`declare`命令后面。一方面,TypeScript 不支持单独的函数类型声明语句;另一方面,declare 关键字后面也不能带有函数的具体实现。 @@ -91,7 +91,10 @@ sayHello('张三'); function sayHello( name:string ):void; -function sayHello(name) { + +let foo = 'bar'; + +function sayHello(name:string) { return '你好,' + name; } ``` @@ -100,7 +103,7 @@ function sayHello(name) { ## declare class -declare 给出 class 的描述描述写法如下。 +declare 给出 class 类型描述的写法如下。 ```typescript declare class Animal { @@ -176,7 +179,7 @@ declare namespace Foo { } declare module 'io' { - export function readFile(filename:string):string; + export function readFile(filename:string):string; } ``` @@ -187,6 +190,7 @@ declare module 'io' { ```typescript let result = myLib.makeGreeting('你好'); console.log('欢迎词:' + result); + let count = myLib.numberOfGreetings; ``` @@ -194,8 +198,8 @@ let count = myLib.numberOfGreetings; ```typescript declare namespace myLib { - function makeGreeting(s:string):string; - let numberOfGreetings:number; + function makeGreeting(s:string): string; + let numberOfGreetings: number; } ``` @@ -205,17 +209,17 @@ declare 关键字的另一个用途,是为外部模块添加属性和方法时 import { Foo as Bar } from 'moduleA'; declare module 'moduleA' { - interface Bar extends Foo { + interface Foo { custom: { - prop1:string; + prop1: string; } } } ``` -上面示例中,从模块`moduleA`导入了`Foo`接口,将其重命名为`Bar`,并用 declare 关键字为`Bar`增加一个属性`custom`。 +上面示例中,从模块`moduleA`导入了类型`Foo`,它是一个接口(interface),并将其重命名为`Bar`,然后用 declare 关键字为`Foo`增加一个属性`custom`。这里需要注意的是,虽然接口`Foo`改名为`Bar`,但是扩充类型时,还是扩充原始的接口`Foo`,因为同名 interface 会自动合并类型声明。 -下面是另一个例子。一个项目有多个模块,可以在一个模型中,对另一个模块的接口进行类型扩展。 +下面是另一个例子。一个项目有多个模块,可以在一个模块中,对另一个模块的接口进行类型扩展。 ```typescript // a.ts @@ -248,13 +252,14 @@ const a:A = { x: 0, y: 0 }; 某些第三方模块,原始作者没有提供接口类型,这时可以在自己的脚本顶部加上下面一行命令。 ```typescript +// 语法 declare module "模块名"; // 例子 declare module "hot-new-module"; ``` -加上上面的命令以后,外部模块即使没有类型,也可以通过编译。但是,从该模块输入的所有接口都将为`any`类型。 +加上上面的命令以后,外部模块即使没有类型声明,也可以通过编译。但是,从该模块输入的所有接口都将为`any`类型。 declare module 描述的模块名可以使用通配符。 @@ -295,13 +300,13 @@ String.prototype.toSmallString = ():string => { 这个示例第一行的空导出语句`export {}`,作用是强制编译器将这个脚本当作模块处理。这是因为`declare global`必须用在模块里面。 -下面的示例是为 window 对象添加一个属性`myAppConfig`。 +下面的示例是为 window 对象(类型接口为`Window`)添加一个属性`myAppConfig`。 ```typescript export {}; declare global { - interface window { + interface Window { myAppConfig:object; } } @@ -367,6 +372,17 @@ declare module "path" { 上面示例中,`url`和`path`都是单独的模块脚本,但是它们的类型都定义在`node.d.ts`这个文件里面。 +另一种情况是,使用`declare module`命令,为模块名指定加载路径。 + +```typescript +declare module "lodash" { + export * from "../../dependencies/lodash"; + export default from "../../dependencies/lodash"; +} +``` + +上面示例中,`declare module "lodash"`为模块`lodash`,指定具体的加载路径。 + 使用时,自己的脚本使用三斜杠命令,加载这个类型声明文件。 ```typescript diff --git a/docs/decorator-legacy.md b/docs/decorator-legacy.md index dad1137..b1cc1d3 100644 --- a/docs/decorator-legacy.md +++ b/docs/decorator-legacy.md @@ -588,7 +588,7 @@ class C { @log x:number, @log y:number ) { - console.log(`member Paremeters: ${x} ${y}`); + console.log(`member Parameters: ${x} ${y}`); } } @@ -596,7 +596,7 @@ const c = new C(); c.member(5, 5); // member NO.1 Parameter // member NO.0 Parameter -// member Paremeters: 5 5 +// member Parameters: 5 5 ``` 上面示例中,参数装饰器会输出参数的位置序号。注意,后面的参数会先输出。 diff --git a/docs/decorator.md b/docs/decorator.md index 52d8217..8696b0e 100644 --- a/docs/decorator.md +++ b/docs/decorator.md @@ -41,15 +41,15 @@ class A {} // "hi" ```typescript function simpleDecorator( - target:any, + value:any, context:any ) { - console.log('hi, this is ' + target); - return target; + console.log(`hi, this is ${context.kind} ${context.name}`); + return value; } @simpleDecorator -class A {} // "hi, this is class A {}" +class A {} // "hi, this is class A" ``` 上面的代码就可以顺利通过编译了,代码含义这里先不解释。大家只要理解,类`A`在执行前会先执行装饰器`simpleDecorator()`,并且会向装饰器自动传入参数就可以了。 @@ -251,10 +251,10 @@ inst1.count // 1 ```typescript function functionCallable( - value as any, {kind} as any -) { + value:any, {kind}:any +):any { if (kind === 'class') { - return function (...args) { + return function (...args:any) { if (new.target !== undefined) { throw new TypeError('This function can’t be new-invoked'); } @@ -265,10 +265,13 @@ function functionCallable( @functionCallable class Person { - constructor(name) { + name:string; + constructor(name:string) { this.name = name; } } + +// @ts-ignore const robin = Person('Robin'); robin.name // 'Robin' ``` @@ -688,7 +691,7 @@ class C { } ``` -上面示例中,`accessor`修饰符等同于为属性`x`自动生成取值器和存值器,它们作用于私有属性`x`。也就是说,上面的代码等同于下面的代码。 +上面示例中,`accessor`修饰符等同于为公开属性`x`自动生成取值器和存值器,它们作用于私有属性`x`。(注意,公开的`x`与私有的`x`不是同一个属性。)也就是说,上面的代码等同于下面的代码。 ```typescript class C { @@ -719,7 +722,7 @@ accessor 装饰器的类型如下。 type ClassAutoAccessorDecorator = ( value: { get: () => unknown; - set(value: unknown) => void; + set: (value: unknown) => void; }, context: { kind: "accessor"; @@ -818,6 +821,9 @@ class T { @d('实例属性') instanceField = log('实例属性值'); + + @d('静态方法装饰器') + static fn(){} } ``` @@ -826,16 +832,18 @@ class T { 它的运行结果如下。 ```typescript -// "评估 @d(): 类装饰器" -// "评估 @d(): 静态属性装饰器" -// "评估 @d(): 原型方法" -// "计算方法名" -// "评估 @d(): 实例属性" -// "应用 @d(): 原型方法" -// "应用 @d(): 静态属性装饰器" -// "应用 @d(): 实例属性" -// "应用 @d(): 类装饰器" -// "静态属性值" +评估 @d(): 类装饰器 +评估 @d(): 静态属性装饰器 +评估 @d(): 原型方法 +计算方法名 +评估 @d(): 实例属性 +评估 @d(): 静态方法装饰器 +应用 @d(): 静态方法装饰器 +应用 @d(): 原型方法 +应用 @d(): 静态属性装饰器 +应用 @d(): 实例属性 +应用 @d(): 类装饰器 +静态属性值 ``` 可以看到,类载入的时候,代码按照以下顺序执行。 @@ -846,7 +854,7 @@ class T { (2)装饰器应用:实际执行装饰器函数,将它们与对应的方法和属性进行结合。 -原型方法的装饰器首先应用,然后是静态属性和静态方法装饰器,接下来是实例属性装饰器,最后是类装饰器。 +静态方法装饰器首先应用,然后是原型方法的装饰器和静态属性装饰器,接下来是实例属性装饰器,最后是类装饰器。 注意,“实例属性值”在类初始化的阶段并不执行,直到类实例化时才会执行。 diff --git a/docs/enum.md b/docs/enum.md index f4cff92..9b4127d 100644 --- a/docs/enum.md +++ b/docs/enum.md @@ -32,7 +32,7 @@ enum Color { } ``` -上面示例声明了一个 Enum 结构`Color`,里面包含三个成员`Red`、`Green`和`Blue`。第一个成员的值默认为整数`0`,第二个为`1`,第二个为`2`,以此类推。 +上面示例声明了一个 Enum 结构`Color`,里面包含三个成员`Red`、`Green`和`Blue`。第一个成员的值默认为整数`0`,第二个为`1`,第三个为`2`,以此类推。 使用时,调用 Enum 的某个成员,与调用对象属性的写法一样,可以使用点运算符,也可以使用方括号运算符。 @@ -107,7 +107,7 @@ compute(Operator.ADD, 1, 3) // 4 上面示例中,Enum 结构`Operator`的四个成员表示四则运算“加减乘除”。代码根本不需要用到这四个成员的值,只用成员名就够了。 -Enum 作为类型有一个缺点,就是输入任何数值都不报错。 +[TypeScript 5.0](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#enum-overhaul) 之前,Enum 有一个 Bug,就是 Enum 类型的变量可以赋值为任何数值。 ```typescript enum Bool { @@ -119,10 +119,10 @@ function foo(noYes:Bool) { // ... } -foo(33); // 不报错 +foo(33); // TypeScript 5.0 之前不报错 ``` -上面代码中,函数`foo`的参数`noYes`只有两个可用的值,但是输入任意数值,编译都不会报错。 +上面示例中,函数`foo`的参数`noYes`是 Enum 类型,只有两个可用的值。但是,TypeScript 5.0 之前,任何数值作为函数`foo`的参数,编译都不会报错,TypeScript 5.0 纠正了这个问题。 另外,由于 Enum 结构编译后是一个对象,所以不能有与它同名的变量(包括对象、函数、类等)。 @@ -153,7 +153,7 @@ const Bar = { C: 2, } as const; -if (x === Foo.A){} +if (x === Foo.A) {} // 等同于 if (x === Bar.A) {} ``` @@ -312,7 +312,7 @@ enum Foo { // 等同于 enum Foo { A, - B = 1, + B = 1, C = 2 } ``` @@ -372,7 +372,7 @@ const enum E { enum E { A, } -const enum E2 { +const enum E { B = 1, } ``` @@ -404,7 +404,7 @@ enum Foo { } ``` -上面示例中,`A`之前没有其他成员,所以可以不设置初始值,默认等于`0`;`C`之前有一个字符串成员,必须`C`必须有初始值,不赋值就报错了。 +上面示例中,`A`之前没有其他成员,所以可以不设置初始值,默认等于`0`;`C`之前有一个字符串成员,所以`C`必须有初始值,不赋值就报错了。 Enum 成员可以是字符串和数值混合赋值。 @@ -452,7 +452,7 @@ f('One') // 报错 所以,字符串 Enum 作为一种类型,有限定函数参数的作用。 -前面说过,数值 Enum 的成员值往往不重要。但是有些场合,开发者可能希望 Enum 成员值可以保存一些有用的信息,所以 TypeScript 才设计了字符串 Enum. +前面说过,数值 Enum 的成员值往往不重要。但是有些场合,开发者可能希望 Enum 成员值可以保存一些有用的信息,所以 TypeScript 才设计了字符串 Enum。 ```typescript const enum MediaTypes { @@ -512,15 +512,14 @@ type Foo = keyof typeof MyEnum; 上面示例中,`keyof typeof MyEnum`可以取出`MyEnum`的所有成员名,所以类型`Foo`等同于联合类型`'A'|'B'`。 -注意,这里的`typeof`是必需的,否则`keyof MyEnum`相当于`keyof number`。 +注意,这里的`typeof`是必需的,否则`keyof MyEnum`相当于`keyof string`。 ```typescript type Foo = keyof MyEnum; -// "toString" | "toFixed" | "toExponential" | -// "toPrecision" | "valueOf" | "toLocaleString" +// number | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | ... ``` -上面示例中,类型`Foo`等于类型`number`的所有原生属性名组成的联合类型。 +上面示例中,类型`Foo`等于类型`string`的所有原生属性名组成的联合类型。这是`MyEnum`为字符串 Enum 的结果,如果`MyEnum`是数值 Enum,那么`keyof MyEnum`相当于`keyof number`。 这是因为 Enum 作为类型,本质上属于`number`或`string`的一种变体,而`typeof MyEnum`会将`MyEnum`当作一个值处理,从而先其转为对象类型,就可以再用`keyof`运算符返回该对象的所有属性名。 @@ -532,7 +531,7 @@ enum MyEnum { B = 'b' } -// { a:any, b: any } +// { a: any, b: any } type Foo = { [key in MyEnum]: any }; ``` diff --git a/docs/es6.md b/docs/es6.md index 1229e84..c9acdf8 100644 --- a/docs/es6.md +++ b/docs/es6.md @@ -44,7 +44,7 @@ async function fn(): Promise<number> { } ``` -## `Iterable<>` +## `Iterable<T>` 对象只要部署了 Iterator 接口,就可以用`for...of`循环遍历。Generator 函数(生成器)返回的就是一个具有 Iterator 接口的对象。 diff --git a/docs/function.md b/docs/function.md index 5789eed..6795e59 100644 --- a/docs/function.md +++ b/docs/function.md @@ -266,7 +266,7 @@ f(); // OK f(10); // OK ``` -上面示例中,虽然参数`x`后面有问号,表示该参数可以省略。 +上面示例中,参数`x`后面有问号,表示该参数可以省略。 参数名带有问号,表示该参数的类型实际上是`原始类型|undefined`,它有可能为`undefined`。比如,上例的`x`虽然类型声明为`number`,但是实际上是`number|undefined`。 @@ -374,7 +374,7 @@ function f(x = 456) { return x; } -f2(undefined) // 456 +f(undefined) // 456 ``` 具有默认值的参数如果不位于参数列表的末尾,调用时不能省略,如果要触发默认值,必须显式传入`undefined`。 @@ -413,7 +413,7 @@ function sum( } ``` -参数结构可以结合类型别名(type 命令)一起使用,代码会看起来简洁一些。 +参数解构可以结合类型别名(type 命令)一起使用,代码会看起来简洁一些。 ```typescript type ABC = { a:number; b:number; c:number }; @@ -498,6 +498,8 @@ function arraySum( 上面示例中,参数`arr`的类型是`readonly number[]`,表示为只读参数。如果函数体内部修改这个数组,就会报错。 +注意,`readonly`关键字目前只允许用在数组和元组类型的参数前面,如果用在其他类型的参数前面,就会报错。 + ## void 类型 void 类型表示函数没有返回值。 @@ -546,7 +548,7 @@ function f():void { } ``` -需要特别注意的是,如果变量、对象方法、函数参数的类型是 void 类型的函数,那么并不代表不能赋值为有返回值的函数。恰恰相反,该变量、对象方法和函数参数可以接受返回任意值的函数,这时并不会报错。 +需要特别注意的是,如果变量、对象方法、函数参数是一个返回值为 void 类型的函数,那么并不代表不能赋值为有返回值的函数。恰恰相反,该变量、对象方法和函数参数可以接受返回任意值的函数,这时并不会报错。 ```typescript type voidFunc = () => void; @@ -556,7 +558,7 @@ const f:voidFunc = () => { }; ``` -上面示例中,变量`f`的类型是`voidFunc`,是一个没有返回值的函数类型。但是实际上,`f`的值是一个有返回值的函数(返回`123`),编译时不会报错。 +上面示例中,变量`f`的类型是`voidFunc`,是一个没有返回值的函数。但是实际上,`f`的值可以是一个有返回值的函数(返回`123`),编译时不会报错。 这是因为,这时 TypeScript 认为,这里的 void 类型只是表示该函数的返回值没有利用价值,或者说不应该使用该函数的返回值。只要不用到这里的返回值,就不会报错。 @@ -571,7 +573,7 @@ const ret = []; src.forEach(el => ret.push(el)); ``` -上面示例中,`push()`有返回值,表示新插入的元素在数组里面的位置。但是,对于`forEach()`方法来说,这个返回值是没有作用的,根本用不到,所以 TypeScript 不会报错。 +上面示例中,`push()`有返回值,表示插入新元素后数组的长度。但是,对于`forEach()`方法来说,这个返回值是没有作用的,根本用不到,所以 TypeScript 不会报错。 如果后面使用了这个函数的返回值,就违反了约定,则会报错。 @@ -601,6 +603,16 @@ const f3 = function ():void { 上面示例中,函数字面量声明了返回`void`类型,这时只要有返回值(除了`undefined`和`null`)就会报错。 +函数的运行结果如果是抛出错误,也允许将返回值写成`void`。 + +```typescript +function throwErr():void { + throw new Error('something wrong'); +} +``` + +上面示例中,函数`throwErr()`会抛出错误,返回值类型写成`void`是允许的。 + 除了函数,其他变量声明为`void`类型没有多大意义,因为这时只能赋值为`undefined`或者`null`(假定没有打开`strictNullChecks`) 。 ```typescript @@ -624,7 +636,7 @@ function fail(msg:string):never { } ``` -上面示例中,函数`fail()`会抛错,不会正常退出,所以返回值类型是`never`。 +上面示例中,函数`fail()`会抛出错误,不会正常退出,所以返回值类型是`never`。 注意,只有抛出错误,才是 never 类型。如果显式用`return`语句返回一个 Error 对象,返回值就不是 never 类型。 @@ -636,6 +648,8 @@ function fail():Error { 上面示例中,函数`fail()`返回一个 Error 对象,所以返回值类型是 Error。 +另外,由于抛出错误的情况属于`never`类型或`void`类型,所以无法从返回值类型中获知,抛出的是哪一种错误。 + (2)无限执行的函数。 ```typescript @@ -684,6 +698,24 @@ function f( 上面示例中,函数`f()`的参数`x`的类型为`string|undefined`。但是,`x`类型为`undefined`时,调用了`neverReturns()`。这个函数不会返回,因此 TypeScript 可以推断出,判断语句后面的那个`x`,类型一定是`string`。 +一个函数如果某些条件下有正常返回值,另一些条件下抛出错误,这时它的返回值类型可以省略`never`。 + +```typescript +function sometimesThrow():number { + if (Math.random() > 0.5) { + return 100; + } + + throw new Error('Something went wrong'); +} + +const result = sometimesThrow(); +``` + +上面示例中,函数`sometimesThrow()`的返回值其实是`number|never`,但是一般都写成`number`,包括最后一行的变量`result`的类型,也是被推断为`number`。 + +原因是前面章节提到过,`never`是 TypeScript 的唯一一个底层类型,所有其他类型都包括了`never`。从集合论的角度看,`number|never`等同于`number`。这也提示我们,函数的返回值无论是什么类型,都可能包含了抛出错误的情况。 + ## 局部类型 函数内部允许声明其他类型,该类型只在函数内部有效,称为局部类型。 @@ -774,7 +806,7 @@ function add( 上面示例中,函数`add()`内部使用`if`代码块,分别处理参数的两种情况。 -注意,重载的个别类型描述与函数的具体实现之间,不能有其他代码,否则报错。 +注意,重载的各个类型描述与函数的具体实现之间,不能有其他代码,否则报错。 另外,虽然函数的具体实现里面,有完整的类型声明。但是,函数实际调用的类型,以前面的类型声明为准。比如,上例的函数实现,参数类型和返回值类型都是`number|any[]`,但不意味着参数类型为`number`时返回值类型为`any[]`。 @@ -859,7 +891,7 @@ type CreateElement = { } ``` -由于重载是一种比较复杂的类型声明方法,为了降低复杂性,一般来说,如果可以的话,应该优先使用联合类型替代函数重载。 +由于重载是一种比较复杂的类型声明方法,为了降低复杂性,一般来说,如果可以的话,应该优先使用联合类型替代函数重载,除非多个参数之间、或者某个参数与返回值之间,存在对应关系。 ```typescript // 写法一 @@ -887,7 +919,7 @@ JavaScript 语言使用构造函数,生成对象的实例。 const d = new Date(); ``` -上面示例中,`date()`就是一个构造函数,使用`new`命令调用,返回 Date 对象的实例。 +上面示例中,`Date()`就是一个构造函数,使用`new`命令调用,返回 Date 对象的实例。 构造函数的类型写法,就是在参数列表前面加上`new`命令。 diff --git a/docs/generics.md b/docs/generics.md index 4c8ad87..06723a9 100644 --- a/docs/generics.md +++ b/docs/generics.md @@ -221,7 +221,7 @@ foo.add = function (x, y) { }; ``` -上面示例中,先新建类`C`的实例`foo`,然后再定义示例的`value`属性和`add()`方法。类的定义中,属性和方法后面的感叹号是非空断言,告诉 TypeScript 它们都是非空的,后面会赋值。 +上面示例中,先新建类`C`的实例`foo`,然后再定义实例的`value`属性和`add()`方法。类的定义中,属性和方法后面的感叹号是非空断言,告诉 TypeScript 它们都是非空的,后面会赋值。 JavaScript 的类本质上是一个构造函数,因此也可以把泛型类写成构造函数。 diff --git a/docs/interface.md b/docs/interface.md index dc8730f..e0169f8 100644 --- a/docs/interface.md +++ b/docs/interface.md @@ -113,7 +113,7 @@ const obj:A = ['a', 'b', 'c']; 同样的,一个接口中最多只能定义一个数值索引。数值索引会约束所有名称为数值的属性。 -如果一个 interface 同时定义了字符串索引和数值索引,那么数值索性必须服从于字符串索引。因为在 JavaScript 中,数值属性名最终是自动转换成字符串属性名。 +如果一个 interface 同时定义了字符串索引和数值索引,那么数值索引必须服从于字符串索引。因为在 JavaScript 中,数值属性名最终是自动转换成字符串属性名。 ```typescript interface A { @@ -322,7 +322,7 @@ interface CountryWithPop extends Country { ### interface 继承 class -inteface 还可以继承 class,即继承该类的所有成员。关于 class 的详细解释,参见下一章。 +interface 还可以继承 class,即继承该类的所有成员。关于 class 的详细解释,参见下一章。 ```typescript class A { @@ -394,7 +394,7 @@ interface Box { 这样的设计主要是为了兼容 JavaScript 的行为。JavaScript 开发者常常对全局对象或者外部库,添加自己的属性和方法。那么,只要使用 interface 给出这些自定义属性和方法的类型,就能自动跟原始的 interface 合并,使得扩展外部类型非常方便。 -举例来说,Web 网页开发经常会对`windows`对象和`document`对象添加自定义属性,但是 TypeScript 会报错,因为原始定义没有这些属性。解决方法就是把自定义属性写成 interface,合并进原始定义。 +举例来说,Web 网页开发经常会对`window`对象和`document`对象添加自定义属性,但是 TypeScript 会报错,因为原始定义没有这些属性。解决方法就是把自定义属性写成 interface,合并进原始定义。 ```typescript interface Document { @@ -465,7 +465,7 @@ interface A { } ``` -上面示例中,`f()`方法有一个类型声明是,参数`x`是字面量类型,这个类型声明的优先级最高,会排在函数重载的最前面。 +上面示例中,`f()`方法有一个类型声明的参数`x`是字面量类型,这个类型声明的优先级最高,会排在函数重载的最前面。 一个实际的例子是 Document 对象的`createElement()`方法,它会根据参数的不同,而生成不同的 HTML 节点对象。 @@ -516,7 +516,7 @@ s.area; // bigint | number `interface`命令与`type`命令作用类似,都可以表示对象类型。 -很多对象类型即可以用 interface 表示,也可以用 type 表示。而且,两者往往可以换用,几乎所有的 interface 命令都可以改写为 type 命令。 +很多对象类型既可以用 interface 表示,也可以用 type 表示。而且,两者往往可以换用,几乎所有的 interface 命令都可以改写为 type 命令。 它们的相似之处,首先表现在都能为对象类型起名。 @@ -526,7 +526,7 @@ type Country = { capital: string; } -interface Coutry { +interface Country { name: string; capital: string; } @@ -613,7 +613,7 @@ const obj:A = { 上面示例中,`interface`把类型`A`的两个定义合并在一起。 -这表明,inteface 是开放的,可以添加属性,type 是封闭的,不能添加属性,只能定义新的 type。 +这表明,interface 是开放的,可以添加属性,type 是封闭的,不能添加属性,只能定义新的 type。 (4)`interface`不能包含属性映射(mapping),`type`可以,详见《映射》一章。 @@ -655,7 +655,7 @@ type Foo = { ```typescript class Calculator implements Foo { result = 0; - add(num:number) { + add(num:number) { this.result += num; return this; } diff --git a/docs/intro.md b/docs/intro.md index bb965c6..75000e0 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -169,13 +169,13 @@ TypeScript 依赖 JavaScript 生态,需要用到很多外部模块。但是, 下面简要介绍 TypeScript 的发展历史。 -2012年,微软公司宣布推出 TypeScript 语言,设计者是著名的编程语言设计大师 Anders Hejlsberg,他也是 C# 和 .Net 的设计师。 +2012年,微软公司宣布推出 TypeScript 语言,设计者是著名的编程语言设计大师 Anders Hejlsberg,他也是 C# 和 .NET 的设计师。 微软推出这门语言的主要目的,是让 JavaScript 程序员可以参与 Windows 8 应用程序的开发。 当时,Windows 8 即将发布,它的应用程序开发除了使用 C# 和 Visual Basic,还可以使用 HTML + JavaScript。微软希望,TypeScript 既能让 JavaScript 程序员快速上手,也能让 .Net 程序员感到熟悉。 -这就是说,TypeScript 的最初动机是减少 .Net 程序员的转移和学习成本。所以,它的很多语法概念跟 .Net 很类似。 +这就是说,TypeScript 的最初动机是减少 .NET 程序员的转移和学习成本。所以,它的很多语法概念跟 .NET 很类似。 另外,TypeScript 是一个开源项目,接受社区的参与,核心的编译器采用 Apache 2.0 许可证。微软希望通过这种做法,迅速提高这门语言在社区的接受度。 diff --git a/docs/mapping.md b/docs/mapping.md index 8cf9bb2..ae1c0d7 100644 --- a/docs/mapping.md +++ b/docs/mapping.md @@ -39,7 +39,7 @@ type B = { - `prop`:属性名变量,名字可以随便起。 - `in`:运算符,用来取出右侧的联合类型的每一个成员。 -- `Keyof A`:返回类型`A`的每一个属性名,组成一个联合类型。 +- `keyof A`:返回类型`A`的每一个属性名,组成一个联合类型。 下面是复制原始类型的例子。 @@ -113,7 +113,7 @@ type MyObj = { 上面示例中,`[p in string]`就是属性名索引形式`[p: string]`的映射写法。 -通过映射,可以某个对象的所有属性改成可选属性。 +通过映射,可以把某个对象的所有属性改成可选属性。 ```typescript type A = { @@ -237,7 +237,7 @@ type A<T> = { }; // 等同于 -type B<T> = { +type A<T> = { readonly [P in keyof T]?: T[P]; }; ``` @@ -262,7 +262,7 @@ type B = { type B = { fooID: number; barID: number; -}; +}; ``` 上面示例中,类型`B`是类型`A`的映射,但在映射时把属性名改掉了,在原始属性名后面加上了字符串`ID`。 @@ -342,7 +342,7 @@ type MyEvents<Events extends { kind: string }> = { [E in Events as E['kind']]: (event: E) => void; } -type Config = MyEvent<S|C>; +type Config = MyEvents<S|C>; // 等同于 type Config = { square: (event:S) => void; diff --git a/docs/module.md b/docs/module.md index 329c6e4..f481bc3 100644 --- a/docs/module.md +++ b/docs/module.md @@ -54,15 +54,7 @@ $ tsc a.ts b.ts $ tsc b.ts ``` -上面命令发现`b.ts`依赖`a.js`,就会自动寻找`a.ts`,也将其同时编译,因此编译产物还是`a.js`和`b.js`两个文件。 - -如果想将`a.ts`和`b.ts`编译成一个文件,可以使用`--outFile`参数。 - -```typescript -$ tsc --outFile result.js b.ts -``` - -上面示例将`a.ts`和`b.ts`合并编译为`result.js`。 +上面命令发现`b.ts`依赖`a.ts`,就会自动寻找`a.ts`,也将其同时编译,因此编译产物还是`a.js`和`b.js`两个文件。 ## import type 语句 @@ -92,17 +84,19 @@ import { type A, a } from './a'; 上面示例中,import 语句输入的类型`A`前面有`type`关键字,表示这是一个类型。 -第二个方法是使用 import type 语句,这个语句只能输入类型,不能输入正常接口。 +第二个方法是使用 import type 语句,这个语句只用来输入类型,不用来输入正常接口。 ```typescript // 正确 import type { A } from './a'; +let b:A = 'hello'; // 报错 import type { a } from './a'; +let b = a; ``` -上面示例中,import type 输入类型`A`是正确的,但是输入正常接口`a`就会报错。 +上面示例中,import type 输入类型`A`是正确的,可以把`A`当作类型使用。但是,输入正常接口`a`,并把`a`当作一个值使用,就会报错。这就是说,看到`import type`,你就知道它输入的肯定是类型。 import type 语句也可以输入默认类型。 @@ -221,7 +215,7 @@ let obj = { foo: 123 }; export = obj; ``` -`export = `语句输出的对象,只能使用`import =`语句加载。 +`export =`语句输出的对象,只能使用`import =`语句加载。 ```typescript import obj = require('./a'); @@ -231,17 +225,21 @@ console.log(obj.foo); // 123 ## 模块定位 -模块定位(module resolution)指的是确定 import 语句和 export 语句里面的模块文件位置。 +模块定位(module resolution)指的是一种算法,用来确定 import 语句和 export 语句里面的模块文件位置。 ```typescript +// 相对模块 import { TypeA } from './a'; + +// 非相对模块 +import * as $ from "jquery"; ``` -上面示例中,TypeScript 怎么确定`./a`到底是指哪一个模块,这就叫做“模块定位”。 +上面示例中,TypeScript 怎么确定`./a`或`jquery`到底是指哪一个模块,具体位置在哪里,用到的算法就叫做“模块定位”。 -模块定位有两种方法,一种称为 Classic 方法,另一种称为 Node 方法。可以使用编译参数`moduleResolution`,指定使用哪一种方法。 +编译参数`moduleResolution`,用来指定具体使用哪一种定位算法。常用的算法有两种:`Classic`和`Node`。 -没有指定定位方法时,就看原始脚本采用什么模块格式。如果模块格式是 CommonJS(即编译时指定`--module commonjs`),那么模块定位采用 Node 方法,否则采用 Classic 方法(模块格式为 es2015、 esnext、amd, system, umd 等等)。 +如果没有指定`moduleResolution`,它的默认值与编译参数`module`有关。`module`设为`commonjs`时(项目脚本采用 CommonJS 模块格式),`moduleResolution`的默认值为`Node`,即采用 Node.js 的模块定位算法。其他情况下(`module`设为 es2015、 esnext、amd, system, umd 等等),就采用`Classic`定位算法。 ### 相对模块,非相对模块 @@ -253,26 +251,30 @@ import { TypeA } from './a'; - `import { DefaultHeaders } from "../constants/http";` - `import "/mod";` +相对模块的定位,是根据当前脚本的位置进行计算的,一般用于保存在当前项目目录结构中的模块脚本。 + 非相对模块指的是不带有路径信息的模块。下面 import 语句加载的模块,都是非相对模块。 - `import * as $ from "jquery";` - `import { Component } from "@angular/core";` +非相对模块的定位,是由`baseUrl`属性或模块映射而确定的,通常用于加载外部模块。 + ### Classic 方法 Classic 方法以当前脚本的路径作为“基准路径”,计算相对模块的位置。比如,脚本`a.ts`里面有一行代码`import { b } from "./b"`,那么 TypeScript 就会在`a.ts`所在的目录,查找`b.ts`和`b.d.ts`。 -至于非相对模块,也是以当前脚本的路径作为起点,一层层查找上级目录。比如,脚本`a.ts`里面有一行代码`import { b } from "b"`,那么就会查找`b.ts`和`b.d.ts`。 +至于非相对模块,也是以当前脚本的路径作为起点,一层层查找上级目录。比如,脚本`a.ts`里面有一行代码`import { b } from "b"`,那么就会依次在每一级上层目录里面,查找`b.ts`和`b.d.ts`。 ### Node 方法 -Node 方法就是模拟 Node.js 的模块加载方法。 +Node 方法就是模拟 Node.js 的模块加载方法,也就是`require()`的实现方法。 相对模块依然是以当前脚本的路径作为“基准路径”。比如,脚本文件`a.ts`里面有一行代码`let x = require("./b");`,TypeScript 按照以下顺序查找。 -1. 当前目录是否包含`b.ts`、`b.tsx`、`b.d.ts`。 -1. 当前目录是否有子目录`b`,该子目录是否存在文件`package.json`,该文件的`types`字段是否指定了入口文件,如果是的就加载该文件。 -1. 当前目录的子目录`b`是否包含`index.ts`、`index.tsx`、`index.d.ts`。 +1. 当前目录是否包含`b.ts`、`b.tsx`、`b.d.ts`。如果不存在就执行下一步。 +1. 当前目录是否存在子目录`b`,该子目录里面的`package.json`文件是否有`types`字段指定了模块入口文件。如果不存在就执行下一步。 +1. 当前目录的子目录`b`是否包含`index.ts`、`index.tsx`、`index.d.ts`。如果不存在就报错。 非相对模块则是以当前脚本的路径作为起点,逐级向上层目录查找是否存在子目录`node_modules`。比如,脚本文件`a.js`有一行`let x = require("b");`,TypeScript 按照以下顺序进行查找。 diff --git a/docs/namespace.md b/docs/namespace.md index 3179095..c5dce93 100644 --- a/docs/namespace.md +++ b/docs/namespace.md @@ -266,7 +266,7 @@ C.bar // 2 上面示例中,名称空间`C`为类`C`添加了一个静态属性`bar`。 -命名空间还能于同名 Enum 合并。 +命名空间还能与同名 Enum 合并。 ```typescript enum E { diff --git a/docs/object.md b/docs/object.md index 518c137..3141870 100644 --- a/docs/object.md +++ b/docs/object.md @@ -167,13 +167,22 @@ type User = { // 等同于 type User = { firstName: string; - lastName: string|undefined; + lastName?: string|undefined; }; ``` -上面示例中,类型`User`的属性`lastName`可以是字符串,也可以是`undefined`,就表示该属性可以省略不写。 +上面示例中,类型`User`的可选属性`lastName`可以是字符串,也可以是`undefined`,即可选属性可以赋值为`undefined`。 -同理,读取一个可选属性时,有可能返回`undefined`。 +```typescript +const obj: { + x: number; + y?: number; +} = { x: 1, y: undefined }; +``` + +上面示例中,可选属性`y`赋值为`undefined`,不会报错。 + +同样地,读取一个没有赋值的可选属性时,返回`undefined`。 ```typescript type MyObj = { @@ -185,7 +194,7 @@ const obj:MyObj = { x: 'hello' }; obj.y.toLowerCase() // 报错 ``` -上面示例中,最后一行会报错,因为`obj.y`有可能是`undefined`,无法对其调用`toLowerCase()`。 +上面示例中,最后一行会报错,因为`obj.y`返回`undefined`,无法对其调用`toLowerCase()`。 所以,读取可选属性之前,必须检查一下是否为`undefined`。 @@ -216,6 +225,30 @@ let lastName = user.lastName ?? 'Bar'; 上面示例中,写法一使用三元运算符`?:`,判断是否为`undefined`,并设置默认值。写法二使用 Null 判断运算符`??`,与写法一的作用完全相同。 +TypeScript 提供编译设置`ExactOptionalPropertyTypes`,只要同时打开这个设置和`strictNullChecks`,可选属性就不能设为`undefined`。 + +```typescript +// 打开 ExactOptionsPropertyTypes 和 strictNullChecks +const obj: { + x: number; + y?: number; +} = { x: 1, y: undefined }; // 报错 +``` + +上面示例中,打开了这两个设置以后,可选属性就不能设为`undefined`了。 + +注意,可选属性与允许设为`undefined`的必选属性是不等价的。 + +```typescript +type A = { x:number, y?:number }; +type B = { x:number, y:number|undefined }; + +const ObjA:A = { x: 1 }; // 正确 +const ObjB:B = { x: 1 }; // 报错 +``` + +上面示例中,属性`y`如果是一个可选属性,那就可以省略不写;如果是允许设为`undefined`的必选属性,一旦省略就会报错,必须显式写成`{ x: 1, y: undefined }`。 + ## 只读属性 属性名前面加上`readonly`关键字,表示这个属性是只读属性,不能修改。 @@ -303,7 +336,7 @@ w.age += 1; r.age // 43 ``` -上面示例中,变量`w`和`r`指向同一个对象,其中`w`是可写的,`r`的只读的。那么,对`w`的属性修改,会影响到`r`。 +上面示例中,变量`w`和`r`指向同一个对象,其中`w`是可写的,`r`是只读的。那么,对`w`的属性修改,会影响到`r`。 如果希望属性值是只读的,除了声明时加上`readonly`关键字,还有一种方法,就是在赋值时,在对象后面加上只读断言`as const`。 @@ -390,7 +423,7 @@ type MyType = { 上面示例中,类型`MyType`同时有两种属性名索引,但是数值索引与字符串索引冲突了,所以报错了。由于字符属性名的值类型是`string`,数值属性名的值类型只有同样为`string`,才不会报错。 -同样地,可以既声明属性名索引,也声明具体的单个属性名。如果单个属性名符合属性名索引的范围,两者不能有冲突,否则报错。 +同样地,可以既声明属性名索引,也声明具体的单个属性名。如果单个属性名不符合属性名索引的范围,两者发生冲突,就会报错。 ```typescript type MyType = { @@ -456,8 +489,7 @@ let { x: foo, y: bar } ```typescript function draw({ shape: Shape, - xPos: number = 100, - yPos: number = 100 + xPos: number = 100 }) { let myShape = shape; // 报错 let x = xPos; // 报错 @@ -468,14 +500,14 @@ function draw({ ## 结构类型原则 -只要对象 B 满足 对象 A 的结构特征,TypeScript 就认为对象 B 兼容对象 A 的类型,这称为“结构类型”原则(structual typing)。 +只要对象 B 满足 对象 A 的结构特征,TypeScript 就认为对象 B 兼容对象 A 的类型,这称为“结构类型”原则(structural typing)。 ```typescript -const A = { +type A = { x: number; }; -const B = { +type B = { x: number; y: number; }; @@ -577,7 +609,7 @@ type Options = { darkMode?:boolean; }; -const Obj:Options = { +const obj:Options = { title: '我的网页', darkmode: true, // 报错 }; @@ -593,7 +625,7 @@ let myOptions = { darkmode: true, }; -const Obj:Options = myOptions; +const obj:Options = myOptions; ``` 上面示例中,创建了一个中间变量`myOptions`,就不会触发严格字面量规则,因为这时变量`obj`的赋值,不属于直接字面量赋值。 @@ -601,7 +633,7 @@ const Obj:Options = myOptions; 如果你确认字面量没有错误,也可以使用类型断言规避严格字面量检查。 ```typescript -const Obj:Options = { +const obj:Options = { title: '我的网页', darkmode: true, } as Options; @@ -650,7 +682,7 @@ computeDistance({x: 1, y: 2}); // 正确 ## 最小可选属性规则 -如果一个对象的所有属性都是可选的,会触发最小可选属性规则。 +根据“结构类型”原则,如果一个对象的所有属性都是可选的,那么其他对象跟它都是结构类似的。 ```typescript type Options = { @@ -658,25 +690,29 @@ type Options = { b?:number; c?:number; }; - -const obj:Options = { - d: 123 // 报错 -}; ``` -上面示例中,类型`Options`是一个对象,它的所有属性都是可选的,这导致任何对象实际都符合`Options`类型。 +上面示例中,类型`Options`的所有属性都是可选的,所以它可以是一个空对象,也就意味着任意对象都满足`Options`的结构。 -为了避免这种情况,TypeScript 添加了最小可选属性规则,规定这时属于`Options`类型的对象,必须至少存在一个可选属性,不能所有可选属性都不存在。这就是为什么上例的`myObj`对象会报错的原因。 - -这条规则无法通过中间变量规避。 +为了避免这种情况,TypeScript 2.4 引入了一个“最小可选属性规则”,也称为[“弱类型检测”](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html#weak-type-detection)(weak type detection)。 ```typescript -const myOptions = { d: 123 }; +type Options = { + a?:number; + b?:number; + c?:number; +}; + +const opts = { d: 123 }; -const obj:Options = myOptions; // 报错 +const obj:Options = opts; // 报错 ``` -上面示例中,即使使用了中间变量`myOptions`,由于存在最小可选属性规则,依然会报错。 +上面示例中,对象`opts`与类型`Options`没有共同属性,赋值给该类型的变量就会报错。 + +报错原因是,如果某个类型的所有属性都是可选的,那么该类型的对象必须至少存在一个可选属性,不能所有可选属性都不存在。这就叫做“最小可选属性规则”。 + +如果想规避这条规则,要么在类型里面增加一条索引属性(`[propName: string]: someType`),要么使用类型断言(`opts as Options`)。 ## 空对象 diff --git a/docs/operator.md b/docs/operator.md index 6d09145..b19ec56 100644 --- a/docs/operator.md +++ b/docs/operator.md @@ -148,7 +148,8 @@ function prop(obj, key) { ```javascript function prop( - obj:object, key:string + obj: { [p:string]: any }, + key: string ):any { return obj[key]; } @@ -285,7 +286,7 @@ type Person = { type T = Person['age'|'name']; // number|string|boolean -type A = Person[keyof Obj]; +type A = Person[keyof Person]; ``` 上面示例中,方括号里面是属性名的联合类型,所以返回的也是对应的属性值的联合类型。 @@ -312,7 +313,7 @@ type T = Obj[string]; 这个语法对于数组也适用,可以使用`number`作为方括号的参数。 ```typescript -// MyArray 的类型是 { [key:number]:string } +// MyArray 的类型是 { [key:number]: string } const MyArray = ['a','b','c']; // 等同于 (typeof MyArray)[number] @@ -375,20 +376,19 @@ type T2 = RegExp extends Animal ? number : string; 上面示例中,`Dog`是`Animal`的子类型,所以`T1`的类型是`number`。`RegExp`不是`Animal`的子类型,所以`T2`的类型是`string`。 -一般来说,调换`extends`两侧类型,会返回相反的结果。举例来说,有两个类`Dog`和`Animal`,前者是后者的子类型,那么`Cat extends Animal`就为真,而`Animal extends Cat`就为伪。 +一般来说,调换`extends`两侧类型,会返回相反的结果。举例来说,有两个类`Cat`和`Animal`,前者是后者的子类型,那么`Cat extends Animal`就为真,而`Animal extends Cat`就为伪。 -如果需要判断的类型是一个联合类型,那么条件运算符会展开这个联合类型。 +如果对泛型使用 extends 条件运算,有一个地方需要注意。当泛型的类型参数是一个联合类型时,那么条件运算符会展开这个类型参数,即`T<A|B> = T<A> | T<B>`,所以 extends 对类型参数的每个部分是分别计算的。 ```typescript -(A|B) extends U ? X : Y +type Cond<T> = T extends U ? X : Y; -// 等同于 - -(A extends U ? X : Y) | -(B extends U ? X : Y) +type MyType = Cond<A|B>; +// 等同于 Cond<A> | Cond<B> +// 等同于 (A extends U ? X : Y) | (B extends U ? X : Y) ``` -上面示例中,`A|B`是一个联合类型,进行条件运算时,相当于`A`和`B`分别进行运算符,返回结果组成一个联合类型。 +上面示例中,泛型`Cond`的类型参数`A|B`是一个联合类型,进行条件运算时,相当于`A`和`B`分别进行条件运算,返回结果组成一个联合类型。也就是说,如果类型参数是联合类型,条件运算的返回结果依然是一个联合类型。 如果不希望联合类型被条件运算符展开,可以把`extends`两侧的操作数都放在方括号里面。 @@ -397,18 +397,18 @@ type T2 = RegExp extends Animal ? number : string; type ToArray<Type> = Type extends any ? Type[] : never; -// string[]|number[] +// 返回结果 string[]|number[] type T = ToArray<string|number>; // 示例二 type ToArray<Type> = [Type] extends [any] ? Type[] : never; -// (string | number)[] +// 返回结果 (string | number)[] type T = ToArray<string|number>; ``` -上面的示例一,传入`ToArray<Type>`的类型参数是一个联合类型,所以会被展开,返回的也是联合类型。示例二是`extends`两侧的运算数都放在方括号里面,所以传入的联合类型不会展开,返回的是一个数组。 +上面的示例一,泛型`ToArray<Type>`的类型参数`string|number`是一个联合类型,所以会被展开,返回的也是联合类型`string[]|number[]`。示例二是`extends`两侧的运算数都放在方括号里面,左侧是`[Type]`,右侧是`[any]`,这时传入的联合类型不会展开,返回的是一个数组`(string|number)[]`。 条件运算符还可以嵌套使用。 @@ -444,11 +444,9 @@ type Flatten<Type> = Type extends Array<infer Item> ? Item : Type; ``` -上面示例中,`Type`是外部传入的类型参数,如果它是数组`Array<T>`的子类型,那么就将类型变量`Item`推断为`T`,即`Item`代表数组的成员类型,写成`infer Item`,表示`Item`这个类型参数是从当前信息中推断出来的。 - -一旦定义了`Item`,后面的代码就可以使用这个类型参数了。 +上面示例中,`infer Item`表示`Item`这个参数是 TypeScript 自己推断出来的,不用显式传入,而`Flatten<Type>`则表示`Type`这个类型参数是外部传入的。`Type extends Array<infer Item>`则表示,如果参数`Type`是一个数组,那么就将该数组的成员类型推断为`Item`,即`Item`是从`Type`推断出来的。 -下面是上例的泛型`Flatten<Type>`的用法。 +一旦使用`Infer Item`定义了`Item`,后面的代码就可以直接调用`Item`了。下面是上例的泛型`Flatten<Type>`的用法。 ```typescript // string @@ -458,7 +456,7 @@ type Str = Flatten<string[]>; type Num = Flatten<number>; ``` -上面示例中,第一个例子`Flatten<string[]>`传入的类型参数是`string[]`,可以推断出`Item`的类型是`string`,所以返回的是`string`。第二个例子`Flatten<number>`传入的类型参数是`number`,它不是数组的子类型,所以直接返回自身。 +上面示例中,第一个例子`Flatten<string[]>`传入的类型参数是`string[]`,可以推断出`Item`的类型是`string`,所以返回的是`string`。第二个例子`Flatten<number>`传入的类型参数是`number`,它不是数组,所以直接返回自身。 如果不用`infer`定义类型参数,那么就要传入两个类型参数。 @@ -467,7 +465,7 @@ type Flatten<Type, Item> = Type extends Array<Item> ? Item : Type; ``` -上面是不用`infer`的写法,每次使用`Fleatten`的时候,都要传入两个参数,就比较麻烦。 +上面是不使用`infer`的写法,每次调用`Flatten`的时候,都要传入两个参数,就比较麻烦。 下面的例子使用`infer`,推断函数的参数类型和返回值类型。 @@ -589,7 +587,7 @@ type Greeting = `hello ${World}`; 上面示例中,类型`Greeting`是一个模板字符串,里面引用了另一个字符串类型`world`,因此`Greeting`实际上是字符串`hello world`。 -注意,模板字符串可以引用的类型一共6种,分别是 string、number、bigint、boolean、null、undefined。引用这6种以外的类型会报错。 +注意,模板字符串可以引用的类型一共7种,分别是 string、number、bigint、boolean、null、undefined、Enum。引用这7种以外的类型会报错。 ```typescript type Num = 123; @@ -625,3 +623,73 @@ type V = `${T}${U}`; 上面示例中,`T`和`U`都是联合类型,各自有两个成员,模板字符串里面引用了这两个类型,最后得到的就是一个4个成员的联合类型。 +## satisfies 运算符 + +`satisfies`运算符用来检测某个值是否符合指定类型。有时候,不方便将某个值指定为某种类型,但是希望这个值符合类型条件,这时候就可以用`satisfies`运算符对其进行检测。[TypeScript 4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator)添加了这个运算符。 + +举例来说,有一个对象的属性名拼写错误。 + +```typescript +const palette = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] // 属性名拼写错误 +}; +``` + +上面示例中,对象`palette`的属性名拼写错了,将`blue`拼成了`bleu`,我们希望通过指定类型,发现这个错误。 + +```typescript +type Colors = "red" | "green" | "blue"; +type RGB = [number, number, number]; + +const palette: Record<Colors, string|RGB> = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] // 报错 +}; +``` + +上面示例中,变量`palette`的类型被指定为`Record<Colors, string|RGB>`,这是一个类型工具,用来返回一个对象,详细介绍见《类型工具》一章。简单说,它的第一个类型参数指定对象的属性名,第二个类型参数指定对象的属性值。 + +本例的`Record<Colors, string|RGB>`,就表示变量`palette`的属性名应该符合类型`Colors`,属性值应该符合类型`string|RGB`,要么是字符串,要么是元组`RGB`。属性名`bleu`不符合类型`Colors`,所以就报错了。 + +这样的写法,虽然可以发现属性名的拼写错误,但是带来了新的问题。 + +```typescript +const greenComponent = palette.green.substring(1, 6); // 报错 +``` + +上面示例中,`palette.green`属性调用`substring()`方法会报错,原因是这个方法只有字符串才有,而`palette.green`的类型是`string|RGB`,除了字符串,还可能是元组`RGB`,而元组并不存在`substring()`方法,所以报错了。 + +如果要避免报错,要么精确给出变量`palette`每个属性的类型,要么对`palette.green`的值进行类型缩小。两种做法都比较麻烦,也不是很有必要。 + +这时就可以使用`satisfies`运算符,对`palette`进行类型检测,但是不改变 TypeScript 对`palette`的类型推断。 + +```typescript +type Colors = "red" | "green" | "blue"; +type RGB = [number, number, number]; + +const palette = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] // 报错 +} satisfies Record<Colors, string|RGB>; + +const greenComponent = palette.green.substring(1); // 不报错 +``` + +上面示例中,变量`palette`的值后面增加了`satisfies Record<Colors, string|RGB>`,表示该值必须满足`Record<Colors, string|RGB>`这个条件,所以能够检测出属性名`bleu`的拼写错误。同时,它不会改变`palette`的类型推断,所以,TypeScript 知道`palette.green`是一个字符串,对其调用`substring()`方法就不会报错。 + +`satisfies`也可以检测属性值。 + +```typescript +const palette = { + red: [255, 0, 0], + green: "#00ff00", + blue: [0, 0] // 报错 +} satisfies Record<Colors, string|RGB>; +``` + +上面示例中,属性`blue`的值只有两个成员,不符合元组`RGB`必须有三个成员的条件,从而报错了。 + diff --git a/docs/tsc.md b/docs/tsc.md index f2beddf..16bb89d 100644 --- a/docs/tsc.md +++ b/docs/tsc.md @@ -172,7 +172,7 @@ tsc 的命令行参数,大部分与 tsconfig.json 的属性一一对应。 `--suppressExcessPropertyErrors`:关闭对象字面量的多余参数的报错。 -`--target`:指定编译出来的 JS 代码的版本,TypeScirpt 还会在编译时自动加入对应的库类型声明文件。 +`--target`:指定编译出来的 JS 代码的版本,TypeScript 还会在编译时自动加入对应的库类型声明文件。 `--traceResolution`:编译时在终端输出模块解析(moduleResolution)的具体步骤。 diff --git a/docs/tsconfig.json.md b/docs/tsconfig.json.md index e0896bd..e94a7c2 100644 --- a/docs/tsconfig.json.md +++ b/docs/tsconfig.json.md @@ -156,7 +156,7 @@ $ yarn add --dev @tsconfig/deno } ``` -## compileOptions +## compilerOptions `compilerOptions`属性用来定制编译行为。这个属性可以省略,这时编译器将使用默认设置。 @@ -347,11 +347,13 @@ obj.foo = undefined; // 报错 ### jsx -`jsx`设置如何处理`.tsx`文件。它一般以下三个值。 +`jsx`设置如何处理`.tsx`文件。它可以取以下五个值。 -- `preserve`:保持 jsx 语法不变,输出的文件名为 jsx。 +- `preserve`:保持 jsx 语法不变,输出的文件名为`.jsx`。 - `react`:将`<div />`编译成`React.createElement("div")`,输出的文件名为`.js`。 - `react-native`:保持 jsx 语法不变,输出的文件后缀名为`.js`。 +- `react-jsx`:将`<div />`编译成`_jsx("div")`,输出的文件名为`.js`。 +- `react-jsxdev`:跟`react-jsx`类似,但是为`_jsx()`加上更多的开发调试项,输出的文件名为`.js`。 ```javascript { @@ -386,7 +388,7 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 - ES2020 - ES2021 - ES2022 -- ESNex +- ESNext - DOM - WebWorker - ScriptHost @@ -447,8 +449,9 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 `moduleResolution`确定模块路径的算法,即如何查找模块。它可以取以下四种值。 - `node`:采用 Node.js 的 CommonJS 模块算法。 -- `node16`或`nodenext`:采用 Node.js 的 ECMAScript 模块算法,从 TypeScript 4.7 开始支持。 +- `node16`或`nodenext`:采用 Node.js 的 ECMAScript 模块算法,从 TypeScript 4.7 开始支持。 - `classic`:TypeScript 1.6 之前的算法,新项目不建议使用。 +- `bundler`:TypeScript 5.0 新增的选项,表示当前代码会被其他打包器(比如 Webpack、Vite、esbuild、Parcel、rollup、swc)处理,从而放宽加载规则,它要求`module`设为`es2015`或更高版本,详见加入该功能的 [PR 说明](https://github.com/microsoft/TypeScript/pull/51669)。 它的默认值与`module`属性有关,如果`module`为`AMD`、`UMD`、`System`或`ES6/ES2015`,默认值为`classic`;如果`module`为`node16`或`nodenext`,默认值为这两个值;其他情况下,默认值为`Node`。 @@ -533,7 +536,9 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 } ``` -它还可以使用通配符“*”。 +上面示例中,paths 设置的是执行`require('b')`时,即加载的是`./bar/b`。 + +它还可以使用通配符“*”,表明模块名与模块位置的对应关系。 ```typescript { @@ -576,7 +581,7 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 ### rootDirs -`rootDirs`把多个不同目录,合并成一个目虚拟目录,便于模块定位。 +`rootDirs`把多个不同目录,合并成一个虚拟目录,便于模块定位。 ```typescript { @@ -626,7 +631,7 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 - strictPropertyInitialization - noImplicitAny - noImplicitThis -- useUnknownInCatchVaria +- useUnknownInCatchVariables 打开`strict`的时候,允许单独关闭其中一项。 @@ -643,7 +648,7 @@ TypeScript 内置的类型描述文件,主要有以下一些,完整的清单 `strictBindCallApply`设置是否对函数的`call()`、`bind()`、`apply()`这三个方法进行类型检查。 -如果不打开`strictBindCallApply`编译选项,编译器不会对以三个方法进行类型检查,参数类型都是`any`,传入任何参数都不会产生编译错误。 +如果不打开`strictBindCallApply`编译选项,编译器不会对以上三个方法进行类型检查,参数类型都是`any`,传入任何参数都不会产生编译错误。 ```typescript function fn(x: string) { @@ -674,28 +679,42 @@ let func:StringOrNumberFunc = fn; ### strictNullChecks -`strictNullChecks`设置对`null`和`undefined`进行严格类型检查。如果打开`strict`属性,这一项就会自动设为`true`,否则为`false`。 +不打开`strictNullChecks`的情况下,一个变量不管类型是什么,都可以赋值为`undefined`或`null`。 -```bash -let value:string; +```typescript +// 不打开 strictNullChecks 的情况 +let x:number; -// strictNullChecks:false -// 下面语句不报错 -value = null; +x = undefined; // 不报错 +x = null; // 不报错 ``` -它可以理解成只要打开,就需要显式检查`null`或`undefined`。 +上面示例中,不打开`strictNullChecks`时,变量`x`的类型是`number`,但是赋值为`undefined`或`null`都不会报错。这是为了继承 JavaScript 的设定:当变量没有赋值时,它的值就为`undefined`。 + +一旦打开`strictNullChecks`,就使用严格类型,禁止变量赋值为`undefined`和`null`,除非变量原本就是这两种类型。它相当于从变量的值里面,排除了`undefined`和`null`。 ```typescript -function doSomething(x:string|null) { - if (x === null) { - // do nothing - } else { - console.log("Hello, " + x.toUpperCase()); - } -} +// 打开 strictNullChecks 的情况 +let x:number; + +x = undefined; // 报错 +x = null; // 报错 +``` + +上面示例中,打开`strictNullChecks`时,变量`x`作为`number`类型,就不能赋值为`undefined`和`null`。 + +下面是一个例子。 + +```typescript +// 打开 strickNullChecks 时,类型 A 为 number +// 不打开时,类型 A 为 string +type A = unknown extends {} ? string : number; ``` +上面示例中,`{}`代表了 Object 类型,不打开`strictNullChecks`时,它包括了`undefined`和`null`,就相当于包括了所有类型的值,所以这时`unknown`类型可以赋值给`{}`类型,类型`A`就为`string`。打开`strictNullChecks`时,`{}`就排除掉了`undefined`和`null`,这时`unknown`类型就不能赋值给`{}`类型后,类型`A`就为`number`。 + +最后,`strict`属性包含了`strictNullChecks`,如果打开`strict`属性,就相当于打开了`strictNullChecks`。 + ### strictPropertyInitialization `strictPropertyInitialization`设置类的实例属性都必须初始化,包括以下几种情况。 @@ -788,7 +807,9 @@ class User { ### typeRoots -`typeRoots`设置类型模块所在的目录,默认是`node_modules/@types`。 +`typeRoots`设置类型模块所在的目录,默认是`node_modules/@types`,该目录里面的模块会自动加入编译。一旦指定了该属性,就不会再用默认值`node_modules/@types`里面的类型模块。 + +该属性的值是一个数组,数组的每个成员就是一个目录,它们的路径是相对于`tsconfig.json`位置。 ```typescript { @@ -800,7 +821,7 @@ class User { ### types -`types`设置`typeRoots`目录下需要包括在编译之中的类型模块。默认情况下,该目录下的所有类型模块,都会自动包括在编译之中。 +默认情况下,`typeRoots`目录下所有模块都会自动加入编译,如果指定了`types`属性,那么只有其中列出的模块才会自动加入编译。 ```typescript { @@ -810,6 +831,16 @@ class User { } ``` +上面的设置表示,默认情况下,只有`./node_modules/@types/node`、`./node_modules/@types/jest`和`./node_modules/@types/express`会自动加入编译,其他`node_modules/@types/`目录下的模块不会加入编译。 + +如果`"types": []`,就表示不会自动将所有`@types`模块加入编译。 + +### useDefineForClassFields + +`useDefineForClassFields`这个设置针对的是,在类(class)的顶部声明的属性。TypeScript 早先对这一类属性的处理方法,与写入 ES2022 标准的处理方法不一致。这个设置设为`true`,就用来开启 ES2022 的处理方法,设为`false`就是 TypeScript 原有的处理方法。 + +它的默认值跟`target`属性有关,如果编译目标是`ES2022`或更高,那么`useDefineForClassFields`默认值为`true`,否则为`false`。 + ### useUnknownInCatchVariables `useUnknownInCatchVariables`设置`catch`语句捕获的`try`抛出的返回值类型,从`any`变成`unknown`。 diff --git a/docs/tuple.md b/docs/tuple.md index 8bff1d8..2f33475 100644 --- a/docs/tuple.md +++ b/docs/tuple.md @@ -4,7 +4,7 @@ 元组(tuple)是 TypeScript 特有的数据类型,JavaScript 没有单独区分这种类型。它表示成员类型可以自由设置的数组,即数组的各个成员的类型可以不同。 -元组必须明确声明每个成员的类型。 +由于成员的类型可以不一样,所以元组必须明确声明每个成员的类型。 ```typescript const s:[string, string, boolean] @@ -13,24 +13,26 @@ const s:[string, string, boolean] 上面示例中,元组`s`的前两个成员的类型是`string`,最后一个成员的类型是`boolean`。 -元组类型的写法,与上一章的数组有一个重大差异。数组的成员类型写在方括号外面(`number[]`),元组的成员类型是写在方括号里面(`[number]`)。 - -TypeScript 的区分方法是,成员类型写在方括号里面的就是元组,写在外面的就是数组。 +元组类型的写法,与上一章的数组有一个重大差异。数组的成员类型写在方括号外面(`number[]`),元组的成员类型是写在方括号里面(`[number]`)。TypeScript 的区分方法就是,成员类型写在方括号里面的就是元组,写在外面的就是数组。 ```typescript -let a:[number] = [1]; +// 数组 +let a:number[] = [1]; + +// 元组 +let t:[number] = [1]; ``` -上面示例中,变量`a`是一个元组,只有一个成员,类型是`number`。 +上面示例中,变量`a`和`t`的值都是`[1]`,但是它们的类型是不一样的。`a`是一个数组,成员类型`number`写在方括号外面;`t`是一个元组,成员类型`number`写在方括号里面。 使用元组时,必须明确给出类型声明(上例的`[number]`),不能省略,否则 TypeScript 会把一个值自动推断为数组。 ```typescript -// a 的类型为 (number | boolean)[] +// a 的类型被推断为 (number | boolean)[] let a = [1, true]; ``` -上面示例中,变量`a`的值其实是一个元组,但是 TypeScript 会将其推断为一个联合类型的数组,即`a`的类型为`(number | boolean)[]`。 +上面示例中,变量`a`的值其实是一个元组,但是 TypeScript 会将其推断为一个联合类型的数组,即`a`的类型为`(number | boolean)[]`。所以,元组必须显式给出类型声明。 元组成员的类型可以添加问号后缀(`?`),表示该成员是可选的。 @@ -77,7 +79,7 @@ const b:NamedNums = ['B', 1, 2, 3]; 上面示例中,元组类型`NamedNums`的第一个成员是字符串,后面的成员使用扩展运算符来展开一个数组,从而实现了不定数量的成员。 -扩展运算符用在元组的任意位置都可以,但是它后面只能是数组或元组。 +扩展运算符(`...`)用在元组的任意位置都可以,它的后面只能是一个数组或元组。 ```typescript type t1 = [string, number, ...boolean[]]; @@ -85,7 +87,7 @@ type t2 = [string, ...boolean[], number]; type t3 = [...boolean[], string, number]; ``` -上面示例中,扩展运算符分别在元组的尾部、中部和头部。 +上面示例中,扩展运算符分别在元组的尾部、中部和头部,`...`的后面是一个数组`boolean[]`。 如果不确定元组成员的类型和数量,可以写成下面这样。 @@ -95,6 +97,20 @@ type Tuple = [...any[]]; 上面示例中,元组`Tuple`可以放置任意数量和类型的成员。但是这样写,也就失去了使用元组和 TypeScript 的意义。 +元组的成员可以添加成员名,这个成员名是说明性的,可以任意取名,没有实际作用。 + +```typescript +type Color = [ + red: number, + green: number, + blue: number +]; + +const c:Color = [255, 255, 255]; +``` + +上面示例中,类型`Color`是一个元组,它有三个成员。每个成员都有一个名字,写在具体类型的前面,使用冒号分隔。这几个名字可以随便取,没有实际作用,只是用来说明每个成员的含义。 + 元组可以通过方括号,读取成员类型。 ```typescript diff --git a/docs/types.md b/docs/types.md index 10977a8..c05c8d1 100644 --- a/docs/types.md +++ b/docs/types.md @@ -129,9 +129,11 @@ const x:null = null; 上面示例中,变量`x`就属于 null 类型。 -注意,如果没有声明类型的变量,被赋值为`undefined`或`null`,它们的类型会被推断为`any`。 +注意,如果没有声明类型的变量,被赋值为`undefined`或`null`,在关闭编译设置`noImplicitAny`和`strictNullChecks`时,它们的类型会被推断为`any`。 ```typescript +// 关闭 noImplicitAny 和 strictNullChecks + let a = undefined; // any const b = undefined; // any @@ -143,6 +145,7 @@ const d = null; // any ```typescript // 打开编译设置 strictNullChecks + let a = undefined; // undefined const b = undefined; // undefined @@ -235,7 +238,16 @@ Math.abs(n2) // 报错 上面示例中,`Math.abs()`方法的参数类型被定义成小写的`number`,传入大写的`Number`类型就会报错。 -上一小节说过,`Symbol()`和`BigInt()`这两个函数不能当作构造函数使用,所以没有办法直接获得 symbol 类型和 bigint 类型的包装对象,因此`Symbol`和`BigInt`这两个类型虽然存在,但是完全没有使用的理由。 +上一小节说过,`Symbol()`和`BigInt()`这两个函数不能当作构造函数使用,所以没有办法直接获得 symbol 类型和 bigint 类型的包装对象,除非使用下面的写法。但是,它们没有使用场景,因此`Symbol`和`BigInt`这两个类型虽然存在,但是完全没有使用的理由。 + +```typescript +let a = Object(Symbol()); +let b = Object(BigInt()); +``` + +上面示例中,得到的就是 Symbol 和 BigInt 的包装对象,但是没有使用的意义。 + +注意,目前在 TypeScript 里面,`symbol`和`Symbol`两种写法没有差异,`bigint`和`BigInt`也是如此,不知道是否属于官方的疏忽。建议始终使用小写的`symbol`和`bigint`,不使用大写的`Symbol`和`BigInt`。 ## Object 类型与 object 类型 @@ -383,7 +395,7 @@ let x:undefined = null; // 报错 let y:null = undefined; // 报错 ``` -上面示例中,`undefined`类型的变量赋值为`null`,或者`null`类型的变量赋值为`undefind`,都会报错。 +上面示例中,`undefined`类型的变量赋值为`null`,或者`null`类型的变量赋值为`undefined`,都会报错。 总之,打开`strictNullChecks`以后,`undefined`和`null`只能赋值给自身,或者`any`类型和`unknown`类型的变量。 @@ -446,7 +458,7 @@ x = y; // 报错 y = x; // 正确 ``` -上面示例中,变量`x`属于子类型,变量`y`属于父类型。`y`不能赋值为子类型`x`,但是反过来是可以的。 +上面示例中,变量`x`属于子类型,变量`y`属于父类型。子类型`x`不能赋值为父类型`y`,但是反过来是可以的。 如果一定要让子类型可以赋值为父类型的值,就要用到类型断言(详见《类型断言》一章)。 diff --git a/docs/utility.md b/docs/utility.md index 62bdd64..02a03f9 100644 --- a/docs/utility.md +++ b/docs/utility.md @@ -2,7 +2,7 @@ TypeScript 提供了一些内置的类型工具,用来方便地处理各种类型,以及生成新的类型。 -TypeScript 内置了17个类型工具,可以直接使用。 +这些类型工具都是语言本身提供的,可以直接使用。 ## `Awaited<Type>` @@ -44,7 +44,7 @@ type Awaited<T> = } ? F extends ( value: infer V, ...args: infer _ - ) => any ? Awaited<...> : never: + ) => any ? Awaited<V> : never: T; ``` @@ -467,7 +467,7 @@ type Mutable<T> = { 上面代码中,`-readonly`表示去除属性的只读标志。 -相应地,`+readonly`就表示增加只读标志,等同于`readonly`。因此,`ReadOnly<Type>`的实现也可以写成下面这样。 +相应地,`+readonly`就表示增加只读标志,等同于`readonly`。因此,`Readonly<Type>`的实现也可以写成下面这样。 ```typescript type Readonly<T> = { @@ -644,7 +644,7 @@ type ReturnType< `ThisParameterType<Type>`提取函数类型中`this`参数的类型。 ```typescript -function toHex(this: Number) { +function toHex(this:number) { return this.toString(16); } @@ -660,7 +660,7 @@ type ThisParameterType<T> = T extends ( this: infer U, ...args: never - ) => any ? U : unknown; + ) => any ? U : unknown; ``` ## `ThisType<Type>` diff --git a/package.json b/package.json index 9848fbb..f7f09b8 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "author": "Ruan Yifeng", "license": "CC-BY-SA-4.0", "dependencies": { - "gh-pages": "^5.0.0", + "gh-pages": "6.x", "loppo": "^0.6.25", - "loppo-theme-wangdoc": "^0.6.6" + "loppo-theme-wangdoc": "^0.7.3" } }