About TypeScript

Published by powerflyang on Jul 18, 2022

Useful TypeScript features:

  • infer
  • never
  • keyof + in

infer

The infer keyword allows you to deduce a type from another type within a conditional type.

Here’s an example:

typescript
1const User = {
2  id: 123,
3  username: 'John',
4  email: 'john@gmail.com',
5  addons: [
6    { name: 'WriteAddon', id: 1 },
7    { name: 'TodoAddon', id: 2 }
8  ]
9};
10
11
12type UnpackArray<T> = T extends (infer R)[] ? R: T;
13
14type AddonType = UnpackArray<typeof User.addons>; // { name: string, id: number }

never

The never type represents a value that is never observed.

In a return type, this means that the function throws an exception or terminates the execution of the program.

keyof + in

typescript
1type DeepReadonly<T> = {
2  readonly [P in keyof T]: DeepReadonly<T[P]>;
3};

Triple-Slash Directives

最近遇到的一个问题，pnpm install 之后 @types/node, @types/jest 等都没有提示了，找了挺久似乎都没有思路，最后偶然尝试在 d.ts 文件里加上 /// <reference types="..." /> 就好了

typescript
1/// <reference path="/node_modules/webpack/types.d.ts"/>

像这样使用三斜线指令之后，new webpack.DefinePlugin({}) 就有类型提示了。

/// <reference types="..." />

Similar to a /// <reference path="..." /> directive, which serves as a declaration of dependency, a /// <reference types="..." /> directive declares a dependency on a package.

The process of resolving these package names is similar to the process of resolving module names in an import statement. An easy way to think of triple-slash-reference-types directives are as an import for declaration packages.

For example, including /// <reference types="node" /> in a declaration file declares that this file uses names declared in @types/node/index.d.ts; and thus, this package needs to be included in the compilation along with the declaration file.

Use these directives only when you’re authoring a d.ts file by hand.

For declaration files generated during compilation, the compiler will automatically add /// <reference types="..." /> for you; A /// <reference types="..." /> in a generated declaration file is added if and only if the resulting file uses any declarations from the referenced package.

For declaring a dependency on an @types package in a .ts file, use types on the command line or in your tsconfig.json instead. See using @types, typeRoots and types in tsconfig.json files for more details.

Why are functions returning non-void assignable to function returning void?

https://github.com/microsoft/TypeScript/wiki/FAQ#why-are-functions-returning-non-void-assignable-to-function-returning-void

void function 可以 declare return any 不会报错
但是实际上使用返回值时 返回值的类型是 void 约等于 undefined 场景类似于
const arr : number[] = [];
const arr2 : Array<number> = [1,2,3];
arr2.forEach(item => arr.push(item));
void function 重要的是 返回值忽略 即不使用返回值