TypeScript

一. TypeScript

---

1.1. TypeScript 简介

---

1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS（tsc hello.ts），然后再交由JS解析器执行。
4. TS完全兼容JS，任何的JS代码都可以直接当成TS使用。
5. 相较于JS而言
   • TS拥有了静态类型，更加严格的语法，更强大的功能；
   • TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
   • TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
   • 后期代码的维护中TS却远远胜于JS。

1.2. 基本类型

---

• 类型声明

  • 通过类型声明可以指定TS中变量（参数、形参）的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 语法：

    let 变量: 类型;
    
    let 变量: 类型 = 值;
    
    // 函数返回值类型
    function fn(参数: 类型, 参数: 类型): 类型{
           
        ...
    }
    

• 自动类型判断

  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

• 类型：

  类型	例子	描述
  number	1, -3, 2.5	任意数字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true、false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object	{name:‘孙悟空’}	任意的JS对象
  array	[1,2,3,4]	任意JS数组
  tuple	[4,5]	元组，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS中新增类型

• number

  • let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;
    

• boolean

  • let isDone: boolean = false;
    

• string

  • let color: string = "blue";
    color = 'red';
    
    let name: string = `Bob Bobbington`;
    let age: number = 37;
    let sen: string = `Hello, my name is ${
             name}.
    
    I'll be ${
             age + 1} years old next month.`;
    

• 字面量

  • /* 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
     字面量指定变量类型，变量值不能修改 */
    
    let a: 10;
    a = 11; // error
    
    let color: 'red' | 'blue' | 'black';
    let c: boolean | string
    let num: 1 | 2 | 3 | 4 | 5;
    

• any

  • /* 声明变量如果不指定类型，则TS解析器会自动判断为any（隐式的any）
     any变量可以赋值给任意变量，并改变他们的类型 */
    
    // 相当于关闭了TS的类型检测
    let d: any = 4;
    d = 'hello';
    d = true;
    

• unknown

  • // 安全的any ,给其它变量赋值会报错
    
    let e: unknown = 4;
    e = 'hello';
    let s: string = 'hi';
    
    // 不报错误的方法
    
    if(typeof e === "string"){
           
        s = e;
    }
    
    // 类型断言，告诉解析器的实际类型
    s = e as string
    s = <string>e
    

• void

  • // 可以定义函数返回值
    
    let unusable: void = undefined;
    
    function sum(a: number ,b: number): void{
           
        
    }
    let d: (a: number ,b: number)=>number;
    
    

• never

  • function error(message: string): never {
           
      throw new Error(message);
    }
    

• object

  • /* {} 用来指定对象可以包含哪些属性
    语法：{属性名：属性值，属性名：属性值}
    在属性名后加 ? 表示属性是可选的 */
    
    let obj: object = {
           };
    
    let o: object = {
           name: string, age?: number};
    
    // [propName: string]: any 表示任意类型的属性
    let o: object = {
           name: string, [propName: string]: any};
    
    // & 表示同时
    let j: {
           name: string} & {
           age: number};
    

• array

  • // 数组 1.类型[] 2.Array<类型>
    
    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    
    

• tuple

  • // 元组 ，就是固定长度的数组  语法：[类型, 类型, 类型]
    
    let h: [number,string];
    h = [12, 'hello']
    

• enum

  • enum Color {
           
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Grenn;
    console.log(typeof c) // number
    console.log(c) // 1  未赋值 输出下标
    
    enum Color {
           
      Red = 1,
      Green,
      Blue,<