TS中的数据类型

一、number类型

let c: number;
c = 10;
c = "hello";  // 不能复制string类型

二、string类型

let d: string;
d = "hello";
d = 10;  // 不能复制number类型

三、boolean类型

let e: boolean = true;
e = false;
e = 10; // 不能赋值true和false以外的值

 四、字面量类型

字面量类型的主要作用是限制字面量类型的值

let f: 10;
f = 10;
f = 11;  // 报错:不能赋值10以外的值
f = "10"; // 报错:不能赋值10以外的值

上面这种方法你可以认为将变量f定义为了一个常量,其值只能为10。

更多的时候我们会搭配 | 或运算来使用:

let g: "apple" | "banana";
g = "apple";
g = "banana";
g = "wotermelon";  // 报错:不能赋值"apple"和"banana"以外的值

字面量除了值,还可以使用数据类型搭配 | 或运算使用:

let h: boolean | string;
h = true;
h = "hello";
h = 10;  // 报错:不能赋值boolean和string以外数据类型的值

五、any类型

any表示任意的数据类型,一个变量设置了any的数据类型,相当于对该变量关闭了变量数据类型检测。

let i: any;
i = 10;
i = "hello";
i = true;

但是我们不建议使用any数据类型。

如果我们声明变量时不指定其数据类型,TS解析器就会自动判断其为any数据类型;

TS中的数据类型_第1张图片 注意:any数据类型的变量可以赋值给其他数据类型的变量,这会导致变量污染

let s: string;
s = i;

 六、unknown类型

 unknown表示未知数据类型的值,也可以是任意数据类型

let j: unknown;
j = 10;
j = "hello";
j = true;

但是unknown数据类型和any数据类型最大的区别是unknown数据类型的值不能直接赋值给其他数据类型的变量:

let s: string;
s = j;  // 报错:不能将类型“unknown”分配给类型“string”

但是我们能通过一下两种方式完成unknown数据类型的对其他数据类型的变量的赋值:

(一)判断unknown数据类型变量的当前数据类型 

let s: string;
if (typeof j === "string") {
    s = j;
}

(二)类型断言

相当于是告诉TS编译器这个变量的实际数据类型

类型断言有两种写法:

变量 as 数据类型

s = j as string;

<数据类型> 变量

s = j;

 七、void类型

void表示空值,多用于函数的返回值类型中,当我们没有设置返回值时,TS编译器会自动判断其返回值为void。

TS中的数据类型_第2张图片

当然TS也能够自动判断其返回值的类型

TS中的数据类型_第3张图片 

当我们设置了函数的返回值类型为void后,能够返回空和undefined,返回其他数据类型会报错

function fn() : void{
    return;
}
function fn() : void{
    return undefined;
}
function fn() : void{
    return "";  // 报错:不能将类型“string”分配给类型“void”
}

 八、never类型

never在函数返回值类型中表示永远不会有返回结果

我们知道,在JavaScript中函数不设置返回值但是会默认返回undefined,所以即使在返回值为never数据类型的函数中什么都不写也会进行报错。

TS中的数据类型_第4张图片

因此返回值为never用于永远都不会有返回值的场景,也就是报错。

function fn1(): never{
    throw new Error("报错了!");
}

 九、object类型

object是对象类型,但是JS中万物皆对象,因此我们定义一个变量为对象数据类型的意义并不大。

let k: object;
k = {};  // k为一个空对象
k = function fn() { };  // k为一个函数对象

我们在TS中对对象的使用更偏向于以下用法

{ 属性名 :属性值 , 属性名 : 属性值 }

let l: { name: string };
l = { name: "孙悟空" };

(一)任意类型的属性

当赋值的对象中的属性与声明对象的属性匹配时就会报错 

 

可以选择加上就行

let l: { name: string; age: number };
l = { name: "孙悟空", age: 18 };

也可以使用任意类型的属性:

{ [ propName : string ] : any } 

let l: { name: string; [propName: string]: any };
l = { name: "孙悟空", age: 18, gender: "男" };

(二)可选属性 

当赋值的属性少了时也会进行报错

let l: { name: string, age: number };
l = { name: "孙悟空"};  // 报错:类型 "{ name: string; }" 中缺少属性 "age"

在age属性名后加上一个?表示该属性为可选项

{ 属性名? : 属性值 } 

let l: { name: string, age?: number };
l = { name: "孙悟空"};

(三)函数结构的对象声明

( 形参1 : 数据类型 , 形参2 : 数据类型 ... )=>返回值数据类型

let m: (a: number, b: number) => number;
m = function (n1, n2) {
  return n1 + n2;
};

注意:这里的形参个数和数据类型,以及函数的返回值类型都需要和声明时一致,默认为声明时的配置。

十、array类型

(一)第一种数组声明方式

数据类型[]

let n : string[];
n = ["a", "b", "c"];

 (二)第二种数组声明方式

Array<数据类型>

let n : Array;
n = ["a", "b", "c"];

 同样的,在指定数据类型的数组中加入其他数据类型的元素也会报错。

十一、tuple类型

tuple是元组数据类型,也就是长度固定的数组

[数据类型 , 数据类型 , 数据类型...]

let o: [string, string];
o = ["abc", "hello"];

其赋值的数组长度和类型都必须一一对应

let o: [string, string];
o = ["abc"];  // 报错:不能将类型“[string]”分配给类型“[string, string]”。

十二、enum类型

enum是枚举类型,适用于有限选择的情况

let p: { name: string, gender: string };
p = { name: "孙悟空", gender: "男" };
console.log(p.gender === "男");

我们在上面的代码中的gender使用“男”来表示,但是性别只有“男”和“女”这两种,用0和1来表示能够更方便,这时候就可以使用enum数据类型。

enum 变量名 { 属性名 = 0, 属性名 = 1, ...}

enum Gender{
  Male = 0,
  Female = 1
}
let p: { name: string, gender: Gender };
p = { name: "孙悟空", gender: Gender.Male };
console.log(p.gender === Gender.Male);

你可能感兴趣的:(TypeScript,前端,javascript,typescript)