1.常见类：number类、string类、boolean类
声明一个变量a,同时指定它的类型为number
let a: number;
声明一个变量同时指定类型，并且直接赋值
let a: number = 22;
number关键字首字母不区分大小写，但不建议使用驼峰的Number，因为驼峰的Number关键字一般划给实例创建使用，new Number()
let a: Number;
let a: number;
a的类型设置为了number,在以后的使用过程中a的值只能是数字
let a: number;
a = 100;
a = 133;
如果为该变量a赋值为其他类型的值则都会报错
下面是错误示范
let a: number;
a = '100'; // 字符串
a = 'hello'; // 字符串
a = [1,2,3] // 数组
报错信息在VSC编辑器中则以红色波浪线作出警告，将鼠标悬置在红色波浪线可查看报错相关信息
当TS代码中有语法有错误时，编译时会给出代码报错信息，但并不会影响编译的整体执行，编译是照常进行的
错误代码演示
执行编译
编译没有被中断,TS代码正常编译转变为JS代码
如果变量没有声明类型，但给变量赋了值，TS可以自动对变量进行类型检查
let a = false;
a = true // 不报错
a = 123; // 报错
2.字面量类型
直接使用字面量进行类型声明，赋值后不能再去修改（字面量类型就是其本身，限制变量的值就是该字面量的值）
let a: 10
a = 10;
a = 11; // 报错
3.函数类
在JS中函数中是不考虑参数类型和个数的
function sum(a,b) {
return a + b
}
console.log(sum(123,456)) // 输出 579
console.log(sum(123,'456')) // 输出 '123456' 产生了字符串拼接效果
函数参数类型声明
function sum(a,b) {
return a + b
}
console.log(sum(123,456)) // 输出 579
console.log(sum(123,'456')) // 输出 '123456' 产生了字符串拼接效果
function sum1(a: number, b: number) {
return a + b
}
sum1(a: 123, b: 123)
function sum2(a: number, b: number) {
return a + b
}
sum2(a: 123, b: '123') // 报错
函数返回值类型声明
function sum1(a: number, b: number) {
return a + b
}
sum1(a: 123, b: 123)
function sum2(a: number, b: number): number {
return a + b
}
let result = sum2(a: 123, b: '123')
4.联合类型
可以使用 | 来连接多个类型（术语叫联合类型）
// demo1:字面量类型声明场景，用的不多
let b: "male" | "female";
b = "male";
b = "female"
// demo2
let c: boolean | string; // | 竖线在这里代表或的意思，变量c可以是布尔类型或者是字符串类型
c = true;
c = 'hello';
5. any 类
any 表示的是任意类型，一个变量设置类型为 any 后，相当于对该变量关闭了TS类型检测，因为设置为any其实就是原生了JS类型了
let d: any; // 显式any
d = 10;
d = 'hell0';
d = true
所以使用TS时，不建议设置变量为any类型，因为变量设置为any类型后没有任何意义，该变量就没有了约束，回归到了JS原生上来。
隐式 any ：声明变量时，如果不指定类型，则TS解析器会自动判断变量为any类型
let d;
d = 10;
d = 'hell0';
d = true
不建议使用any类型
any类型可以赋值给任意变量
let d;
d = 10;
d = 'hell0';
d = true;
let s: string;
s = d; // d的类型是any,它可以复制给任意变量
6. unknown类,类型安全的any
unknown：表示未知类型的值，效果类似 any 类,
let e: unknown;
e = 10;
e = 'hello';
e = true;
unknown实际上是一个类型安全的any,unknown类型的变量不能直接赋值给其他变量
let e: unknown;
e = 10;
e = 'hello';
e = true;
let s: string;
e = 'hello';
s = e;
7. 类型断言
类型短语，可以用来告诉解析器变量的实际类型
2种语法：
变量 as 类型
<类型> 变量
let e: unknown;
e = 10;
e = 'hello';
e = true;
let s: string;
s = e as string;
s = <string>e;
8.void类型
指定函数返回值类型
function fn():string | number {
return '123'
}
void 用来表示空，以函数为例，表示没有返回值的函数
function fn():void {
return;
}
function fn1():void {
return undefined;
}
function fn2():void {
return null;
}
// fn4 会报错
function fn4():void {
return '123';
}
void类型指定了函数返回值类型必须为空
9. never类
将函数返回值类型设置为never类，表示永远不会返回结果，一般用于抛出程序错误
function fn(): never {
throw new Error("报错了");
}
10. object 对象类
限制一个对象
let obj: object;
限制对象当中的属性
let b: {name: string, age: number};
b = {name: 'qfb', age: 22};
对象缺少属性值
let b: {name: string, age: number};
b = {name: 'qfb'};
未定指定属性类型
let b: {name: string};
b = {name: 'qfb', age: 22};
对象的可选属性，在属性名后边加上？，表示对象中该属性是可选的
let b: {name: string, age?: number};
b = {name: 'qfb', age: 22}; // 不报错
b = {name: 'qfb'}; // 不报错
对象当中的任意类型属性(当不确定对象中有几个属性时可用)
let b: {name: string, [propName: string]: any};
b = {name: 'qfb', age: 22, class: '19计算机应用3-3', gender:'男'}; // 不报错
11.函数结构类型声明
声明d是一个函数类型，参数a和参数b是number类型,函数的返回值是number类型
let d: (a: number, b: number) => number;
// 报错
d = function (n1: string, n2: string): number {
return 10
}
12. Array类型
指定该变量为数组类型，数组中的元素是字符串（字符串数组）
let arr: string[];
arr = ['a', 'b', 'c'];
数组类型声明的2种表达方式
let arr1: string[] 表示字符串型数组
let arr2: number[] 表示数值型数组
let arr3: Array<number> 表示数值型数组,写法不一样罢了
13.tuple元组类型
- JS当中没有元组这个概念，元组其实就是一个固定长度的数组
元组定义
let h: [string, string];
h = ['hello', 'hi'];
因为元组是固定长度的，所以或多或少一个元素都会报错
多一个元素
少一个元素
14.enum 枚举类
enum Gender {
Male = 0,
Female = 1
}
let i: {name: string, gender: Gender};
i = {
name: '孙悟空',
gender: Gender.Male
}
console.log(i.gender === Gender.Male);
15.&与，表示同时符合
let j: { name: string } & { age: number };
j = {name:'qfb'}; // 不符合，报错
j = {name:'qfb',age: 18} //符合
16.类型别名，简化类型的使用
type myType = 1 | 2 | 3 | 4;
let k: myType;
let l: myType;
let m: myType;
k = 2;
网友评论