1️⃣ 类型约束与编译结果的对比

2️⃣ 类型约束

仅仅需要在变量,函数的参数,函数的返回值位置上加上 **:类型** 即可
image.png
ts 在很多场景中可以完成类型推导,如果 ts 无法完成类型推到且开发者没有约束类型,ts 则默认为 any,any 表示任意类型,对该类型,ts 不进行类型检查。
add 函数中即使没有为函数的返回值做类型约束,但是 ts 依旧会类型推导为 number 因为, add 的参数都已经约束为 number,return 又是 a + b 所有 ts 就可以推导到 add 的返回值为 number 类型
image.png
如果 ts 无法推导出类型会显示三个点
image.png

2️⃣ 编译结果对比

编译结果中没有任何类型的约束
image.png

1️⃣ 基本类型约束

  1. // number
  2. let a: number = 10;
  3. // string
  4. let b: string = '10';
  5. // boolean
  6. let c: boolean = true;
  7. // 数组
  8. let arr: number[] // 约束为数字类型的数组
  9. let arr1: Array<number>
  10. let arr2: object[] // 约束为字符串类型的数组
  11. let arr3: Array<object>
  12. // 对象
  13. let f: object = {};
  14. // null 和 undefined
  15. // null 和 undefined 可以赋值给其他类型
  16. let g: number = null;
  17. let h: string = undefined;
  18. // 通过添加 "strictNullChecks": true 可以获得更严格的空类型检查,让 null 和 undefined 只能赋值给自身

1️⃣ 其他类型约束

  1. // 联合类型:多种类型任选其一
  2. let a: number | string;
  3. if (typeof a === 'number') {
  4. // 联合类型可以配合类型保护来使用
  5. // 类型保护:当对某个变量进行类型判断之后,在判断的语句中便可以确定它的确切类型
  6. // typeof 可以触发类型保护,但是只能触发简单的类型保护,复杂类型判断不了
  7. }
  8. // void 类型:通常用于约束函数的返回值,表示该函数没有任何返回。
  9. function b(): void {
  10. console.log(0);
  11. }
  12. // never 类型:通常用于约束函数的返回值,表示该函数永远不会结束。
  13. function c(msg: string): never {
  14. throw new Error(msg)
  15. }
  16. // 字面量类型
  17. let d: "A" | 1; // 强力约束 d 只能赋值为字符串 "A" 或 数字 1,不能赋值为其它值。
  18. let e: { // 对象字面量约束,表示 e 被约束为一个对象,且对象 e 里必须有一个 name 属性,值为字符串,必须有一个 age 属性,值为数字
  19. name: string
  20. age: number
  21. }
  22. e = {
  23. name: "A",
  24. age: 1
  25. }
  26. // 元祖类型( Tuple ):表示一个固定长度的数组,数组的每一项都有类型约束。
  27. let f: [string, number, boolean]; // 约束 f 为一个数组,数组只能有三项且必须为 string, number, boolean 类型
  28. f = ['A', 1, true]
  29. // any 类型:any 类型可以绕过类型检测,可以赋值为任意类型
  30. let g: any;
  31. (g as []).push() // 使用类型断言为某种指定的类型
  32. g = 1
  33. console.log(g); // 1
  34. // unknown 类型:未知类型,和 any 都是 TS 的 “顶部类型”
  35. // unknown 类型是 any 的类型安全版本。每当你想使用 any 时,应该先试着用 unknown。
  36. // 在 any 允许我们做任何事的地方,unknown 的限制则大得多。
  37. // 在对 unknown 类型的值执行任何操作之前,必须先通过以下方法限定其类型:1.类型断言 2.相等 3.类型防护
  38. let u: unknown;
  39. (u as string).split // 使用类型断言为某种指定的类型
  40. u = 1
  41. console.log(u); // 1
  42. https://www.html.cn/web/javascript/19308.html

2️⃣ any 和 unknown

image.png

1️⃣ 类型别名

  1. // 类型别名 - 对已知的一些类型定义名称
  2. // type 类型名 = 类型约束
  3. type Job = "前端" | "开发"
  4. type User = {
  5. name: strin
  6. age: number
  7. job: Job
  8. }
  9. let i: User = {
  10. name: 'chen',
  11. age: 18,
  12. job: '前端'
  13. }
  14. // 类型别名直接约束函数
  15. type funRestrain = {
  16. (a: number, b: number): boolean
  17. }
  18. function fun(a: number, b: number): boolean {
  19. return true;
  20. }
  21. let func: funRestrain;
  22. func = fun;
  23. // 约束回调函数
  24. type Condition = (a: number) => boolean
  25. function fun(callback: Condition) { }
  26. // 约束函数
  27. let fun1: Condition
  28. fun1 = (b: number) => { return true }
  29. // 类型别名交叉使用 - 使用 & 符号
  30. type A = {
  31. a: number
  32. }
  33. type B = {
  34. b: number
  35. }
  36. type C = {
  37. // a: string 类型别名的成员可以交叉,这里结果为 a: number & string
  38. c: number
  39. } & A & B
  40. let d: C = {
  41. a: 1,
  42. b: 2,
  43. c: 3,
  44. }

1️⃣ 类型断言

类型断言:用来告诉解析器变量的实际类型。
有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。
类型断言有两种形式。 其一是“尖括号”语法:

  1. let someValue: any = "this is a string";
  2. let strLength: number = (<string>someValue).length;

另一个为 as 语法:

  1. let someValue: any = "this is a string";
  2. let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有as语法断言是被允许的。

1️⃣ 函数的相关约束

2️⃣ 函数重载

在函数实现之前,对函数的多种情况进行声明。

  1. // 函数重载
  2. function fun(a: number, b: number): number; // 重载条件
  3. function fun(a: string, b: string): string; // 重载条件
  4. function fun(a: number | string, b: number | string): number | string {
  5. if (typeof a === 'number' && typeof b === 'number') {
  6. return a * b;
  7. }
  8. else if (typeof a === 'string' && typeof b === 'string') {
  9. return a + b;
  10. }
  11. throw new Error('类型不符合标准')
  12. }
  13. fun(1, 2) // 符合第一条重载
  14. fun('1', '2') // 符合第一条重载
  15. fun(1, '2') // 没有与之相匹配的重载 - 报错

2️⃣ 可选参数

可以在某些参数后加上问号,表示该参数可以不用传递。

  1. // 可选参数
  2. function fun(a: number, b: number, c?: number) {
  3. if (c) {
  4. return a + b + c;
  5. } else {
  6. return a + b;
  7. }
  8. }
  9. fun(1, 2, 3)
  10. fun(1, 2)

2️⃣ 参数默认值

约束类型后直接赋值或者使用 js 的参数默认值方式

  1. // 参数的默认值
  2. function fun(a: number, b: number, c: number = 0) {
  3. return a + b + c;
  4. }
  5. fun(1, 2, 3)
  6. fun(1, 2)