frontend -- Typescript

类 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

Typescript和Javascript的区别？

Typescript面试题 - 知乎 (zhihu.com)

 1、TS变量类型：(97条消息) TS01 ： TS变量类型详解TS函数_七月是我的生日的博客-CSDN博客_ts变量类型

2、TS 中那些有用的符号

细数 TS 中那些奇怪的符号_奇舞周刊的博客-CSDN博客

（1）! 非空断言操作符

  忽略 undefined 和 null 类型

function myFunc(maybeString: string | undefined | null) {
  // Type 'string | null | undefined' is not assignable to type 'string'.
  // Type 'undefined' is not assignable to type 'string'. 
  const onlyString: string = maybeString; // Error
  const ignoreUndefinedAndNull: string = maybeString!; // Ok
}

  调用函数时忽略 undefined 类型

type NumGenerator = () => number;
 
function myFunc(numGenerator: NumGenerator | undefined) {
  // Object is possibly 'undefined'.(2532)
  // Cannot invoke an object which is possibly 'undefined'.(2722)
  const num1 = numGenerator(); // Error
  const num2 = numGenerator!(); //OK
}

因为 ! 非空断言操作符会从编译生成的 JavaScript 代码中移除，所以在实际使用的过程中，要特别注意。比如下面这个例子：

const a: number | undefined = undefined;

const b: number = a!;

console.log(b); 

以上 TS 代码会编译生成以下 ES5 代码：

"use strict";

const a = undefined;

const b = a;

console.log(b);

虽然在 TS 代码中，我们使用了非空断言，使得 const b: number = a!; 语句可以通过 TypeScript 类型检查器的检查。但在生成的 ES5 代码中，! 非空断言操作符被移除了，所以在浏览器中执行以上代码，在控制台会输出 undefined

（2）?. 可选链操作符 

可选的属性访问：const val = a?.b;

可选元素访问：function tryGetArrayElement<T>(arr?: T[], index: number = 0) {
  return arr?.[index];
}

可选链与函数调用：let result = obj.customMethod?.();

（3）?? 空值合并运算符（可返回 falsy 值（''、NaN 或 0））

??和 | | 的区别：

使用 ?? 时，只有当值1为null或undefined时才返回值2；
使用 || 时，值1会转换为布尔值判断，为true返回值1，false 返回值2

const foo = null ?? 'default string';
console.log(foo); // 输出："default string"
 
const baz = 0 ?? 42;
console.log(baz); // 输出：0

不能与 && 或 || 操作符共用：这种情况下会抛出 SyntaxError。

（4）?: 可选属性

interface Person {
  name: string;
  age?: number;
}
 
let lolo: Person  = {
  name: "lolo"  
}

（5）& 运算符：交叉类型

通过 & 运算符可以将现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
 
let point: Point = {
  x: 1,
  y: 1
}

3、类型别名

（1）TypeScript 提供了为类型注解设置别名的便捷语法

type Pet = 'cat' | 'dog';
let pet: Pet;

pet = 'cat'; // Ok
pet = 'dog'; // Ok
pet = 'zebra'; // Compiler error

interface Person {
name: string;
age: number;
}
const sem: Person = { name: 'semlinker', age: 30 };
type Sem= typeof sem; // -> Person

（2）Partial<T> & Required<T>

 TypeScript 内置的工具类型 Partial<T> 可以快速把某个接口类型中定义的属性变成可选的：

interface PullDownRefreshConfig {
  threshold: number;
  stop: number;
}
 
/**
 * type PullDownRefreshOptions = {
 *   threshold?: number | undefined;
 *   stop?: number | undefined;
 * }
 */ 
type PullDownRefreshOptions = Partial<PullDownRefreshConfig>

Required<T>可以把某个接口中定义的属性全部声明为必选的：

interface Props {
a?: number;
b?: string;
}

const obj: Props = { a: 5 }; // OK
const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing

（3）Readonly

Readonly<T> 的作用是将某个类型所有属性变为只读属性，也就意味着这些属性不能被重新赋值。

interface Todo {
title: string;
}

const todo: Readonly<Todo> = {
title: "Delete inactive users"
};

todo.title = "Hello"; // Error: cannot reassign a readonly property

（4）keyof 操作符：提取interface、type、class的key

//基础使用
interface Person {
  name: string;
  age: number;
  location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"

// 读取对象的属性，并且限制了只能读取对象中存在的属性
function prop<T extends object, K extends keyof T>(obj: T, key: K) {
   return obj[key];
} 

在以上代码中，我们使用了 TypeScript 的泛型和泛型约束。首先定义了 T 类型并使用 extends 关键字约束该类型必须是 object 类型的子类型，然后使用 keyof 操作符获取 T 类型的所有键，其返回类型是联合类型，最后利用 extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型。

（5）typeof 和 keyof 操作符

在 TypeScript 中，typeof 操作符可以用来获取一个变量或对象的类型。而 keyof 操作符可以用于获取某种类型的所有键，其返回类型是联合类型。了解完 typeof 和 keyof 操作符的作用，我们来举个例子，介绍一下它们如何结合在一起使用：

const COLORS = {
  red: 'red',
  blue: 'blue'
}

// 首先通过typeof操作符获取Colors变量的类型，然后通过keyof操作符获取该类型的所有键，
// 即字符串字面量联合类型 'red' | 'blue'
type Colors = keyof typeof COLORS
let color: Colors;
color = 'red'// Ok
color = 'blue'// Ok

// Type '"yellow"' is not assignable to type '"red" | "blue"'.
color = 'yellow'// Error

（6） Exclude（用于联合类型）

Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。

如果 T 能赋值给 U 类型的话，那么就会返回 never 类型，否则返回 T 类型。最终实现的效果就是将 T 中某些属于 U 的类型移除掉。

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number

（7） Extract（用于联合类型）

Extract<T, U> 的作用是从 T 中提取出 U。

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () =>void

4、类型提取

type Person = {
  name: string;
  age: number;
}

type PersonName = Person["name"]; // string
type StrNumTuple = [string, number];
type StrNumTuple0 = StrNumTuple[0]; // string

5、Pick（用于接口interface和类型别名type）

从对象中类型T选取一些keys的属性来构造新类型： pick<T，keys>

interface Props{
    id:string
    title:string
    children:number[]
}
type PickProps= Pick<Props,'id'|'title'>

得到：

interface Props{
    id:string
    title:string
}

6、 Omit（用于接口interface和类型别名type）

从对象类型T中删除一些，留下剩下的属性来构造新类型： omit<T，keys>：

interface User {
  name: string;
  age: number;
  like: string;
}
type User1 = Omit<User, "name" | "age">;

相当于

interface User1 {
  like: string;
}

5、interface和type 

typeScript interface和type区别 - 简书 (jianshu.com)

TS系列篇｜接口(interface) 和 类型别名(type) - 掘金 (juejin.cn)

6、 高级类型Record

(164条消息) typescript中高级类型Record_问白的博客-CSDN博客_record ts

7、装饰器及应用场景浅析

JELLY | Typescript 装饰器及应用场景浅析 (jd.com)