Yuan的博客
EN 中

React 中的 TypeScript

类型

  • TypeScript 是 JavaScript 的超集，添加了类型。
  • 类型推断：TypeScript 中，当我们声明一个带有初始值的变量时，该变量永远不能被重新赋值为不同数据类型的值。
  • tsc；运行 xx.ts
  • 类型形状：TypeScript 的 tsc 命令会让你知道代码是否试图访问不存在的属性和方法：
  • 变量类型注解：let mustBeAString : string; mustBeAString = 'Catdog';

函数

  • 参数类型注解
  • 在参数名称后添加 ?。这告诉 TypeScript 该参数允许为 undefined，不一定总是需要提供。
  • 默认参数：TypeScript 推断初始化变量的类型与其初始值的类型相同
  • 推断返回类型：
  • 显式返回类型；
  • Void 返回类型：

复杂类型

  • 数组：跟踪数组的类型意味着跟踪每个元素的类型。
  • 数组类型注解：let names: string [] = ['Danny', 'Samantha'];
  • 多维数组：string [][]：字符串的二维数组。bestMealPlan 的每个元素本身都是一个字符串数组。
  • number [][][]：数字的三维数组。每个元素都是一个数字的二维数组（number [][]）。
  • 元组：let tup: [string, string] = ['hi', 'bye'];
    • 元组有预定义的元素数量。
    • 每个元组实例必须始终具有其类型中定义的确切元素数量。
  • 数组类型推断：
  • 剩余参数：我不知道会得到多少参数，但将它们全部收集到一个数组中。"<...numbers 剩余参数将所有参数收集到名为 numbers 的数组中>
  • 展开语法：
  • string [][][] （字符串的三维数组）：这是一个数组，其中每个元素都是一个二维数组
  • string [][]（字符串的二维数组）：每个元素本身都是一个字符串数组

自定义类型

  • 枚举：TypeScript 中的枚举最适合在需要用有意义的名称表示一组固定的相关常量时使用，并且希望强制类型安全
enum Day {
    Monday = 1,
    Tuesday,
    Wednesday
}

console.log (Day.Monday); // Output: 1
console.log (Day [1]);     // Output: 'Monday'
  • 字符串枚举 vs. 数字枚举：数字枚举，TypeScript 生成反向映射。你可以使用其数值获取成员名称。
  • 字符串枚举不支持反向映射。你不能使用其值检索成员名称。
  • 对象类型：
  • 类型别名：type <alias name> = <type>
  • 函数类型：函数可以分配给变量。type StringsToNumberFunction = (arg0: string, arg1: string) => number;
  • 泛型类型：type typeName<T> 在类型注解中使用 T 作为类型占位符
    type Family<T> = {
parents: [T, T], mate: T, children: T []
};
  • 泛型函数：
function getFilledArray<T>(value: T, n: number): T [] {
  return Array (n).fill (value);
}
  • 使用冒号注解属性类型，将每个属性与用花括号括起来的数据类型分开

联合类型

  • 当我们组合类型时，称为联合
  • 定义联合：let ID: string | number; string | number 是一个联合，允许 ID 为字符串或数字
  • 类型窄化：编译器根据某些条件或检查在特定代码块内细化变量类型的过程。
  • 推断的联合返回类型：TypeScript 会查看函数的内容并推断函数可以返回哪些类型。如果有多个可能的返回类型，TypeScript 会将返回类型推断为联合。
  • 联合与数组：const timesList: (string | number)[] = [dateNumber, dateString];
  • 公共键值对：联合成员不共享的任何属性或方法都不被允许，会产生 TypeScript 错误。
  • 带字面量类型的联合：

类型窄化

  • 类型守卫：
  • 使用 in 进行类型守卫：typeof 运算符用于检查变量的原始类型。它适用于基本类型，如 string、number、boolean、symbol、undefined 和 bigint / in 运算符用于检查对象中是否存在属性。它专门用于对象或对象类型
  • 在 JavaScript 和 TypeScript 中，对象是键值对的集合。每个键（或属性）与一个值相关联，该值可以是任何类型（例如字符串、数字、数组、函数，甚至另一个对象）。
  • Void 作为返回类型：用于表示函数不返回任何内容。/
  • type AliasName = SomeType;
  • 使用 else 窄化：
  • 什么是类型窄化？： 类型窄化是指 TypeScript 可以根据变量周围的代码推断更具体的类型。
  • 何时需要引号，何时不需要
    • 需要引号：
    • 不需要引号：
  • 接口和类型：interface 只能用于类型化对象，而 type 可以用于类型化对象、原始类型等
  • 接口和类：使用 implements 关键字将类型应用于对象/类
  • 类和对象之间的区别
    • 对象：对象是具有某些属性（properties）和行为（methods）的现实世界实体。
    • 类：作为创建对象的蓝图。当你从类创建对象时，你称该对象为类的实例。
  • 深层类型：
  • 组合类型：
  • 扩展接口：
  • 索引签名：动态键
  • 可选类型成员：我们可以在属性名称后和冒号（:）前使用 ? 运算符将任何类型成员标记为可选