TypeScript数据类型（一）

心已赠人 2023-05-29 03:21 22阅读 0赞

> TypeScript是强类型语言，这就意味着声明变量时，必须指定类型。这是与Javascript不同的地方。指定类型，既可以增强代码的健壮性（执行编译、语法检查）又可以提升代码的可读性（类型是最好的注释）。

###### TypeScript数据类型： ######

>  *  number：数值类型
>  *  string：字符串类型
>  *  boolean：布尔类型
>  *  数组类型（Array）
>     
>      *  number\[\]：数值数组
>      *  Array：泛型数组
>  *  \[string, number\]：元组类型（Tuple）
>  *  enum Color \{Red, Green, Blue\}：枚举类型
>  *  any：任意类型
>  *  void：空类型
>  *  undefined
>  *  null
>  *  never：永不存在值的类型

###### TypeScript数据类型基本使用 ######

// 1. 基本类型
    // 数字，二、八、十六进制都支持
    let decLiteral: number = 6;
    let hexLiteral: number = 0xf00d;
    
    // 字符串，单双引都行
    let fullName: string = "bob";
    let sentence: string = `Hello, my name is ${ fullName }.`;
    
    // 数组，第二种方式是使用数组泛型，Array<元素类型>：
    let list: number[] = [1, 2, 3];
    let lists: Array<number> = [1, 2, 3];
    
    let u: undefined = undefined;
    let n: null = null;
    
    // 2. 特殊类型
    // 元组 Tuple - 有组织的数组
    const messyArray = ["something", 2, true, undefined, null];
    const tuple: [number, string, string] = [24, "Tom" , "James"];
    
    // 枚举 enum - 可以为一组数值赋名
    // 默认情况从0开始为元素编号，也可手动为1开始
    enum Color { Red = 1, Green = 2, Blue = 4}
    let c: Color = Color.Green;
    
    let colorName: string = Color[2];
    console.log(colorName);  // 输出"Green"因为上面代码里它的值是2
    
    // void - 无返回值
    function sayMyName(name: string): string { 
      return name;
    }
    function consoleMyName(name: string): void { 
      console.log(name);
    }
    
    // any - 任意类型
    let person: any = "前端劝退师";
    person = 25;
    person = true;
    
    // Never - 永远得不到
    
    // 3. 断言类型 - 可以用来手动指定一个值的类型，有两种写法，尖括号和 as
    let someValue: any = "this is a string";
    
    let strLength1: number = (<string>someValue).length;
    let strLength2: number = (someValue as string).length;
    
    function getLength(something: string | number): number { 
      if ((<string>something).length) { 
        return (<string>something).length;
      } else { 
        return something.toString().length;
      }
    }
    
    // ? - 安全导航操作符: 为了解决导航时变量值为null时，页面运行时出错的问题。
    // ! - 非空断言操作符: 能确定变量值一定不为空时使用，不会防止出现 null 或 undefined。
    
    // 4. 泛型 - Generics
    // 泛型声明
    function gen_func1<T>(arg: T): T { 
      return arg;
    }
    // 或者
    let gen_func2: <T>(arg: T) => T = function (arg) { 
      return arg;
    };
    
    // 泛型调用
    gen_func1<string>("Hello world");
    gen_func2("Hello world");
    // 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。
    
    // 泛型接口
    interface Generics_interface<T> { 
      (arg: T): T;
    }
    
    function func_demo<T>(arg: T): T { 
      return arg;
    }
    
    let func1: Generics_interface<number> = func_demo;
    func1(123);     // 正确类型的实际参数
    // func1("123"); // 错误类型的实际参数
    
    // 5. 自定义类型
    interface User1 { 
      name: string;
      age: number;
    }
    
    type User2 = { 
      name: string,
      age: number,
    };
    
    interface SetUser1 { 
      (name: string, age: number): void;
    }
    type SetUser2 = (name: string, age: number) => void;
    
    // 相同点: 接口和自定义类型可以相互继承 - 参考链接 https://cloud.tencent.com/developer/article/1475206
    // 不同点:
    // 1. type 可以声明基本类型别名，联合类型，元组等类型
    // 2. type 语句中还可以使用 typeof获取实例的 类型进行赋值
    // 3. interface 能够声明合并
    // 4. interface 有可选属性和只读属性 ? - 可选属性标识符 readonly - 只读属性标识符
    interface Person { 
      name: string;
      age?: number;
      gender?: number;
      readonly note: string;
    }