TypeScript-基础类型

Posted 2021-09-15 Liane

一、原始数据类型
TypeScript支持与js几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。
1、布尔值-Boolean

let isDone:boolean = false;
isDone = true;
//如果给isDone赋值为非布尔的值，会提示错误

2、数字-Number
和js一样，除了支持十进制和十六进制字面量，还支持二进制和八进制字面量。

let n10 : number = 10 //十进制
let n2 : number = 0b1010 //二进制
let n8 : number = 0o12 //八进制
let n16 : number = 0xa //十六进制

3、字符串-String
与js一样，可使用""胡或者\'\'表示字符串。

let name : string = \'Liane\'

4、undefined和null
与js一样，并且可以将null和undefined赋值给其他类型的变量。

let u : undefined = undefined;
let n : null = null;
// u = 12  //error
let num : number = 0;
let str : string = \'Liane\';
str = null; //不会提示错误
num = undefined //不会提示错误

二、数组Array和元组Tuple
有两种定义方法：
第一种：

let list1: number[] = [1,2,3]

第二种：

let list2: Array<number> = [1,2,3]

两种定义方法都规定数组内的元素必须与定义时规定的数据类型保持一致，若需要保存不同数据类型的数组，则可使用元组-Tuple。
注意：元组类型在定义数组的时候，元素的类型和数组长度都会被限定。

let arr3: [string,number,boolean] = [\'Liane\', 18, true]
let arr4: [number,number,number,string] = [1,2,3,\'\']

三、枚举
枚举是对js标准类型的补充，在生产开发当中，如果有些数据常用，并且格式范围是固定的，可以使用枚举类型将取值限定在一定范围内。例如一周只能有七天，颜色限定为红绿蓝等。
语法--枚举使用enum关键字来定义：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

console.log(Days[\'Sun\'])  //0
console.log(Days[0])   //\'Sun\'

枚举成员会被赋值为从0开始递增的数字，同时也会对枚举值到枚举名进行反向映射。

enum Color {red, green, blue}

console.log(Color[0]) //\'red\'
console.log(Color[\'red\']) //0
console.log(Color[0] === \'red\') //true
console.log(Color) //{0: "red", 1: "green", 2: "blue", red: 0, green: 1, blue: 2}

let color1 : Color = Color.red;
//let color2 : Color = Color[0] //error，因Color[0]的值为\'red\'是string，因此会提示错误
console.log(color1) //0

若不希望枚举内的成员从0开始递增，可自定义成员的值，随后的值都会依次累加1。

enum Days {Sun = 1, Mon, Tue, Wed, Thu = 100, Fri, Sat}

console.log(Days.Mon) //2
console.log(Days.Tue) //3
console.log(Days.Fri) //101
console.log(Days)//{1: "Sun", 2: "Mon", 3: "Tue", 4: "Wed", 100: "Thu", 101: "Fri", 102: "Sat", Sun: 1, Mon: 2, Tue: 3, Wed: 4, Thu: 100, …}

四、any
当我们希望一个数据类型可以存储任何类型的数据时，或者说当我们不确定一个变量的类似时，可以使用any类型。例如该值可能来自用户输入，或第三方库等。

let arr: any[] = [100, \'归去，也无风雨也无晴\', true]
console.log(arr[1].slice(3)) //也无风云也无晴
console.log(arr[0].slice(3))  //无错误提示，编译可通过，但编译成js，在浏览器运行时报错了

优点：解决了不确定数据类型时，变量的声明定义。
缺点：使用any类型，在很多时候TypeScript静态检查的优点就体现不出来了

五、void
某种程度上来说，void类型像时与any类型相反，它表示没有任何类型。因此一个没有任何返回值的函数，可以定义它的类型是void。

//一般用来说明函数的返回值不能是undefined和null之外的值

function fun():void {
    cosnole.log(\'我是一个没有返回值的fun\')
}

fun()

六、Object
与js一致，表示一个Object类型的变量或者返回一个Object类型的返回值的函数

function fun(obj:object):object {
    console.log(obj);
    return {}
}

console.log(fun(1)) //error
consoel.log(fun({name: \'Liane\'}))

七、联合类型-Union Type
若一个变量的值可以为多种类型中的一种，可以使用联合类型。

function fun(a:number|string):string{
    return a.toString()
}

console.log(fun(123)) //\'123\'

八、类型断言
可以用来手动指定一个值为某种数据类型。
语法：

1、<数据类型> 变量
2、变量 as 数据类型

例如：我们需要一个得到数字或字符串长度的方法

function getLength(a:number|string):number{
    if((<string>a).length){//第一种方式
        return (a as string).length//第二种方式
    }else {
        return a.toString().length
    }
}

console.log(getLength(12345))//5
console.log(getLength(\'01234\')) //5

九、类型推断
TS会在没有明确指定类型的时候推测出一个类型。
1、定义变量时赋值，则会推断变量为值对应的类型。
2、定义变量时未赋值，则推断该变量为any类型。

let a = 1;  //a为number类型
//a = \'abc\'; //error
//a = false; //error

let x;  //x为any类型
x = 1;
x = \'abc\';
x = true;