TypeScript - 笔记 - 数据类型

 

 在 TypeScript 中为了使编写的代码更规范，更利于维护，增加了类型校验，在 TypeScript 中提供了一些数据类型：

　　布尔（boolean）、数字（number）、字符串（string）、数组（array）、

　　元祖（tuple）、枚举（enum）、任意（any）、null和undefined 、void、never

指定一个变量的类型  var 变量名:类型 = 变量值

如果值的类型不是指定的类型就会报错 Type '"xxx"' is not assignable to type 'xxx'.

 

布尔（boolean）：

    var flag:boolean = true; 
　　// flag = "abc"; // Type '"abc"' is not assignable to type 'boolean'.
　　flag = false; // 只能赋值为同类型的值

 

数字（number）：

• 除了支持十进制和十六进制字面量，还支持ECMAScript 2015中引入的二进制和八进制字面量

    var num:number = 123;
    num = NaN;          // 非数值
    num = Infinity;     // 无穷大
    num = 123.456;      // 浮点
    num = 0b1010;       // 二进制
    num = 0o744;        // 八进制
    num = 0x3C3;        //十六进制
// num = "abc"; // Type '"abc"' is not assignable to type 'number'.

 

字符串（string）

    var strf:string = "哈哈哈"; // ES5
    let strs:string = `abc${strf}`; // ES6
    // strf = 123; // Type '123' is not assignable to type 'string'.

 

数组（array）

方法一：在指定类型的后边加上中括号[] , 变量名:类型[] = [变量值]

　　var arrn:number[] = [ 1, 2, 3, 4, 5 ]; // number
　　var arrs:string[] = [ 'a', "s", "d", "f" ]; // string
　　var arr:string[] = [ 'a', 'b', 'c', 1, 2, 3 ]; //  error TS2322: Type 'number' is not assignable to type 'string'.
// 定义多种数据类型
　　var arr:(number|string)[] = [ 111, 'asd', 666 ];

方法二：泛型 ，变量名:Array<类型> = [变量值]

　　var arrn:Array<number> = [ 1, 2, 3, 4, 5 ]; // number
　　var arrs:Array<string> = [ 'a', "s", "d", "f" ]; // string
// 定义多种数据类型　　
　　var arr:Array<number|string> = [ 111, 'asd', 666 ];

 

元祖（tuple）

• 属于数组的一种，可以给数组中的数据定义多种数据类型， 变量名:[类型1，类型2，类型3, ...] = [ 变量值1， 变量值2， 变量值3, ... ]

// 在元祖类型中，变量值的数据类型，必须和指定的数据类型位置一一对应。
// 当直接对元组类型的变量进行初始化的时候，需要提供所有元组类型中指定的项
　　var arr_tuple:[string, number, boolean] = [ 'abc', 123, true ];

 # 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：

　　arr_tuples = ['哈哈哈哈', 25];
　　arr_tuples.push('male'); 
// arr_tuples.push(true); // error TS2345: Argument of type 'true' is not assignable to parameter of type 'string | number'.
// typescript 自动检测添加进去的数据类型，只能是上面定义的 string 或 number，否则报错

= = 元组类型可以理解为是一个有 固定项 固定长度 的数组 

 

枚举类型（enum）

• enum 枚举名 { 标识符 = 整形常数, 标识符 = 整形常数, ....... } 

# 枚举类型只能定义为数字和字符串类型

　　enum pay {
　　　　not_pay = -1,
　　　　pay = 3,
　　　　success = 2,
　　　　msg = "abcd", 
　　　　// flag = false // 报错 error TS2553: Computed values are not permitted in an enum with string valued members.
　　}

 # 正向映射 、反向映射

// 正向映射： 定义一个变量，它的类型是这个枚举类型，它的值是这个枚举中的其中一个值
　　var pay_success:pay = pay.success;
　　console.log(pay_success); // 2
// 反向映射：通过枚举值找到枚举名
　　var s = pay[pay_success];
　　console.log(s); // success

 # 当不给枚举成员赋值的话，它默认会是当前枚举名的索引

　　enum Color {
　　　　red,　　 // 1
　　　　blue,　　// 2
　　　　green   // 3
　　}

 # 只要中一个成员一旦赋值，后面的成员就会是上一个成员的值加1，只限于数值类型枚举

    enum Color {
        red,        // 0
        blue,       // 1
        green = 6,  // 6
        yellow,     // 7
        orange,     // 8
    }

 # 如果未手动赋的成员与手动赋值的成员重复了，typescript 不会察觉到这一点

    enum Days {
        Sun = 3,
        Mon = 1,
        Tue,
        Wed
    }
    console.log( Days["Sun"] === 3 ); // true
    console.log( Days['Wed'] === 3 ); // true
    console.log( Days[3] === "Sun" ); // false
    console.log( Days[3] === "Wed" ); // true

# Wed 递增到3的时候，与前面手动赋值的 Sun 重复了，导致 Days[3] 的值先是 Sun，然后又被 Wed 覆盖。所以这种情况要避免出现

 

 # 枚举项也可以是小数或负数，后续未手动赋值的项递增长仍为 1

    enum Num {
        One = 1,
        Two = 2.5,
        Three,　　　　// 3.5
        Four = -4.2,
        five,　　　　// -3.2
    }

# 如果是字符串枚举，只要中间其中一位成员有值，那么后面的成员就必须要有值，否则报错

    enum Color {
        yellow = "yellow",
        green, // 报错 error TS1061: Enum member must have initializer.
    }

# 常数项 与 计算所得项

# 如果枚举其中有成员是计算所得项，那么紧跟着后面的成员也必须要有值，否则报错

    var arr = [1,2,3];
    enum count {
        arr_len = arr.length, // arr.length 就是一个计算所得项
        num, // error TS10　　61: Enum member must have initializer.
    }

# 常数项与计算所得项定义：(官方解释)

    1. 不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值+1。

        但第一个枚举袁术是例外。如果它没有初始化方法，那么它的初始值为0。

    2. 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 typescript 表达式的子集，它可以在编译阶段求值。

        当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：

            · 数字字面量

            引用之前定义的常数枚举成员（可以使在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，

            可以使用非限定名来引用

            · 带括号的常数枚举表达式

            + - ~ 一元运算符应用于常数枚举表达式

            + - * / % << >> >>> & | ^ 二元运算符，常数枚举表达式做为其一操作对象。

                若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错

# 所有其他情况的枚举成员被当作是需要计算得出的值。

 

# 常数枚举 （const 枚举）

• 为了避免在额外生成的代码上开销和额外的非直接的对枚举成员的访问，可以使用 const枚举。
• 然而常量枚举不同于常规枚举，它会在编译阶段就会被删除。常量枚举成员在使用的地方会被内联起来，
• 因为常量枚举不允许包含计算成员。

　　const enum cenum {
　　　　a = 1,
　　　　b = 2 + 3,
　　}
　　let con_enum:cenum = cenum.b;
　　let arr_con_enum = [cenum.a, cenum.b];// 编译后生成：
　　var con_enum = 5 /* b */;
　　var arr_con_enum = [1 /* a */, 5 /* b */];

# 外部枚举 （declare enum ）

declare 定义的类型只会用于编译时的检查，编译结果中会被删除

　　declare enum Directions {
 　　   Up,
 　　   Down,
　　    Left,
　　    Right
　　}
　　// declare 定义的类型只会用于变异时的检查，编译结果中会被删除
　　let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
　　// 编译后 
　　var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

# 也能同时使用 declare 和 const

    declare const enum Directionss {
        Up,
        Down,
        Left,
        Right
    }

# 外部枚举 和 非外部枚举一个重要区别

• 在正常的枚举里，没有初始化方法的成员被当成常数成员
• 对于非常数的外部枚举而言，没有初始化方法时被当作需要经过计算的

 

任意类型（any）

•  任意类型可以让变量指定任何类型

　　var str:any = "abcd";
　　str = 12345;
　　str = true;
// 变量在声明的时候没有指定数据类型，那么就会被识别为任意类型
　　var any;
　　any = 123;
　　any = "abc";
// 给 dom 添加样式 
　　var box:any = document.getElementById("box");
　　box.style.color = "red";     
// 一个数组中包含了多个数据类型，就可以使用 any任意类型
　　var arr:any = [ 123, "abcd", false, {"Q1":666} ];

 

 null 和 undefined 

// 所以当需要定义一个变量，而又还没有给它赋值的时候就可以使用 undefined 
　　var num_un:number | undefined; // | 代表 或
　　console.log(num_un);
/*
　　null 为 空
　　null 是属于 Object类型的一种
　　所以 null 类型只能定义 为 null 
*/ 
　　var num_null:null;
　　num_null = null;

 

void

• void类型表示没有任何返回值

// 声明一个void类型变量只能为其赋值 null 或 undefined
　　var v:void = undefined;    

//  函数没有任何的类型数据返回需要加上 void
　　function fun1():void{
　　　　console.log("fun1");
　　}
　　fun1();

 

 never

•  never代表从不会出现的值

 # never 类型是那些 总会抛出异常 或 不会有返回值的函数表达式 或 箭头函数表达式 的返回值类型

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

　　function Infinite():never{
　　　　while(true){  
　　　　}    
　　}

# 就是当函数抛出错误 或 永不为真