数据类型

  • 基本数据类型
    • Boolean
    • Number
    • String
    • Symbol
    • undefined
    • null
  • 引用类型
    • Array
    • Function
    • Object
  • TS的数据类型
    • void
    • any
    • never
    • 元组 tuple
    • 枚举
    • 高级类型

      类型注解

      TS可以通过类型注解对变量类型进行约束 TS和JS最主要的区别:变量的数据类型不可改变 语法: 变量/函数 : type

  1. // 类型注解
  2. const hello : string = "Hello TypeScript";
  3. document.querySelectorAll("app")[0].innerHTML = hello;

原始类型

使用类型注解对变量进行类型约束后,再进行不恰当的赋值就会报错

  1. // 原始类型
  2. let bool: boolean = true;
  3. let num: number | undefined | null = 123;
  4. let str: string = "abc";
  5. // str = 123

数组类型

类型名称+[] Array关键字+<数据类型>

  1. // 数组
  2. let arr1: number[] = [1, 2, 3];
  3. let arr2: Array<number> = [1, 2, 3];
  4. let arr3: Array<number> = [1, 2, 3, "4"];
  5. // 如果希望为数组/成员定义不同的数据类型,可使用联合类型,此时
  6. // 数组元素既可以是number类型,也可以是String类型
  7. let arr4: Array<number | string> = [1, 2, 3, "4"];

image.png

元组类型

是一种限制数组的元素类型和个数的数组

image.png
image.png

元组越界问题

虽然元组限制了数组元素的类型和数量,过多的元素声明会报错 但TS允许向元组中使用数组的push方法插入新元素(但不允许访问)

image.png

  1. // 元组
  2. let tuple: [number, string] = [0, "1"];
  3. let tuple1: [number, string] = [0, 1];
  4. let tuple2: [number, string] = [0, '1', '2']
  5. tuple.push(2);
  6. console.log(tuple); // [0, "1", 2]
  7. tuple[2];

函数

  1. // 函数声明
  2. let add = (x, y) => x + y;
  3. // error
  4. // Parameter 'x' implicitly has an 'any' type.
  5. // Parameter 'y' implicitly has an 'any' type.
  7. // 需要为参数添加类型注解
  8. let add1 = (x: number, y: number) => x + y;
  10. // 可对函数的返回值类型进行约束,函数的返回值类型通常是可省略的,TS的类型推断功能够正确推断出返回值类型
  11. let add2 = (x: number, y: number): number => x + y;
  13. // 声明函数类型
  14. let compute: (x: number, y: number) => number;
  15. // 函数实现:参数名可以和定义时不一样,也不必再次指定参数类型
  16. compute = (a, b) => a + b;

image.png

对象

在JS中,可以任意修改对象属性,TS中不允许

  1. // 对象
  2. // let obj: object = { x: 1, y: 2 };
  3. // obj.x = 3;
  5. // 这是因为,仅声明了对象obj的类型注解是object,
  6. // 并没有为对象内部的具体属性(属性名)和类型做限制
  7. let obj: { x: number; y: number } = { x: 1, y: 2 };
  8. obj.x = 3;

image.png

Symbol

  1. // Symbol
  2. // 显示声明
  3. let s1: symbol = Symbol();
  4. // 直接创建
  5. let s2 = Symbol();
  6. // 验证:是否是同一个对象
  7. console.log(s1 === s2); // false

undefined 和 null

  1. // undefined, null
  2. let un: undefined = undefined;
  3. let nu: null = null;
  5. // 一旦声明了undefined,就不能再被赋值为任何其他的数据类型了
  6. let undf: undefined = 1;
  8. // 默认情况下,undefined和null也不能被赋值给任何其他类型:
  9. let num1: number = undefined;
  10. let num2: number = null;
  12. // 允许undefined和null被赋值其他类型:
  13. // 在TS中,undefined和null是任何类型的子类型,所以可以被赋值给其他类型
  14. // 设置 => tsconfig.js => "strictNullChecks": false
  16. // 在不修改此配置的情况下,实现对undefined和null的赋值,可使用联合类型
  17. let num3: number | undefined | null = 111;

image.png
image.png
image.png

void

void类型表示没有返回值,没有返回值的函数,他的类型就是void类型

  1. // void
  2. let voidFunc = () => {};

any

any:如果不指定TS的变量类型，默认为any类型，可以赋值为任何类型，不建议使用any类型,将失去使用ts的意义

  1. // any
  2. let x;
  3. x = 1; // 整型
  4. x = []; // 数组
  5. x = () => {}; // 函数

never

never：永远不会有返回值的类型

  1. // never
  2. // 函数抛出异常,永远不会有返回值,类型为never
  3. let error = () => {
  4.     throw new Error("error");
  5. };
  7. // 死循环函数永远没有返回值,类型为never
  8. let endless = () => {
  9.     while (true) {}
  10. };

学习笔记出自于梁宵老师课程