Typescript

二、typescript类型设置：

1. 基本数据类型：

   • String类型：let str: string = 'I am lerning typescript;'
   • Number类型：let num: number = 10;
   • Boolean类型：`let bool: boolean = false;

2. 数组【Array】：

   const arr: (string )[] = ["typescript", "JavaScript"];

3. 对象【Object】：

   // 限定obj的类型
   const obj: object = {};
   // 限定obj 和 属性 的类型
   const obj: { name: string; author: string; price: number } = {
     name: "typescript",
     author: "Microsoft",
     price: 111,
   };
   

4. 组合类型：

   let data: string | number | boolean;
   data = "typescript";
   data = 123;
   data = true;
   

   let arr:(string | number)[] = ["typescript", 123];
   

5. any类型：

   let data: string | number | object | boolean = 'typescript';
   

   我们看上面的 data 数据设置了许多不同类型，此时我们就可以使用 any 类型，此时它的值就可以是任意类型：

   let data: any = 'typescript';
   

6. unknown 与 any 区别以及 as 类型断言：

   unknown 不知道当前是什么类型，但是会进行类型检测；

   any 是任意类型，不会进行类型检测；

   any转其他类型（√）：

   let data: any = 'typescript';
   let a: string = data;   // 可以将any类型转为string、number..等其他类型
   

   unknow转其他类型（×）：

   let res: unknown = 'typescript';
   let b: string = res; // 这是不可以的，报错内容：ts01.ts:14:5 - error TS2322: Type 'unknown' is not assignable to type 'string'.
   

   这时候我们就可以使用类型断言来解决这个问题：

   let res: unknown = 'typescript';
   let b: string = res as string;
   ​
   // 其他操作：
   let data: string = '99';
   let c: number = data as any as number;
   

7. void、never区别：

   // void 不明确返回值类型，多用于函数
   function run(): void {}
   

   // never 没有返回值
   function run(): never {
       throw new Error("类型错误");
   }
   

8. null 和 undefined 类型：

   let data1: null = null;
   let data2: undefined = undefined;
   

   void 的返回值是 null、undefined

9. 函数：

   let func = function() { return 'typescript'; }
   // func = 'typescript'; // 不可取： ts01.ts:22:1 - error TS2322: Type 'string' is not assignable to type '() => string'.
   

   明确类型：

   let func: Function = function () {
     return "typescript";
   };
   

10. 函数参数及返回值:

    // 此时调用sum的a、b参数必须是 number 类型，
    // 返回值也是 number
    // ratio参数是可选的
    function sum(a: number, b: number, ratio?: number):number {
      return a + b;
    }
    ​
    // 箭头函数
    let sum = (a: number, b: number, ratio?: number): number => {
      return a + b;
    };
    ​
    sum(1, 2); // 3
    

11. 使用type对函数参数进行声明：

    let addUser = (user: { name: string; age: number }): void => {
      console.log("添加用户");
    };
    ​
    let updateUser = (user: { name: string; age: number }): void => {
      console.log("更新用户");
    };
    ​
    addUser({ name: "John", age: 19 });
    updateUser({ name: "Mary", age: 19 });
    

    我们看上面代码，addUser 和 updateUser 中的参数类型都是一致的（user: { name: string; age: number }）,这样复用性差，不利于维护，此时我们可以使用type解决这个问题：

    type userType = {
      name: string;
      age: number;
    };
    ​
    let addUser = (user: userType): void => {
      console.log("添加用户");
    };
    ​
    let updateUser = (user: userType): void => {
      console.log("更新用户");
    };
    ​
    addUser({ name: "John", age: 19 });
    updateUser({ name: "Mary", age: 19 });
    

12. 函数结构定义：

    let fun: (a: number, b: number) => number;
    fun = (x: number, y: number) => {
      return x + y;
    };
    fun(1, 4); // 5
    

    // 使用type对参数优化
    type userType = {
      name: string;
      age: number;
    };
    ​
    let updateUser: (user: userType) => boolean;
    updateUser = (u: userType) => {
      return true;
    };
    ​
    updateUser({ name: "Mary", age: 19 });
    

    // 使用type对函数优化
    type userType = {
      name: string;
      age: number;
    };
    ​
    type userAddFun = (user: userType) => boolean;
    ​
    let updateUser: userAddFun;
    updateUser = (u: userType) => {
      return true;
    };
    ​
    updateUser({ name: "Mary", age: 19 });
    

13. 元组（tuple）对数组每个位置的元素进行类型限制：

    let tuple: [string, number, boolean] = ["typescript", 123, true];
    // tuple[0] = true;  //不可取：Type 'boolean' is not assignable to type 'string'.