此文档是根据b站视频所记
浏览器是不认识ts语言的,写的ts代码也会编译成js让浏览器识别
安装
npm i typescript -g
let str = "abc"; // 推断 str 为字符串类型
str = 10; //报错,str已经被初始值字符串给类型限定了,所以str只能存储字符串类型
let str : string; // 推断 str 为字符串类型
str = 10; //报错,str已经被初始值字符串给类型限定了,所以str只能存储字符串类型
str = "abc"; //正确
//错误 ↓
let numArr = [1, 2, 3];
const result = numArr.find(item => item > 2);
result * 5; //程序推断item可能会是undefined
//正确(在自己十分确定该业务不会出现undefined使用)↓
let numArr = [1, 2, 3];
const result = numArr.find(item => item > 2) as number; //进行类型断言
result * 5;
let v1: string = "abc";
let v2: number = 10;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;
//联合类型:v4 只能被分配 string 和 null 类型(理论上null可以给任何类型,开启配置项中的strictNullChecks后null不能再随意分配给其它类型)
let v4: string | null = null;
// v5 只能分配这1,2,3其中的一个值
let v5: 1 | 2 | 3 = 2; //正确
let v5: 1 | 2 | 3 = "2"; //错误
//数组
let arr1 = [1, 2, 3, "4"]; //正确,但在实际开发中不建议这样使用
//写法一:
let arr2: number[] = [1, 2, 3]; //该数组只能存储number类型的数据
//写法二:
let arr3: Array<string> = ["a", "b", "c"]; //该数组只能存储string类型的数据
//元组:可以存储多个数据,但限定了存储数据的个数以及每个数据的类型
let t1: [number, string, number?] = [1, "a", 2];//加?为可选项
//枚举 (会自动分配值,默认从0开始)
enum MyEnum {
A,
B,
C,
}
console.log(MyEnum.A); //输出 0
console.log(MyEnum[0]); //输出 A
//以下两种同理,只不过第二种加了返回值类型的限定
function MyFn1(a: number, b: string) {
return a + b;
}
function MyFn1(a: number, b: string): string {
return a + b;
}
//void 表示没有返回值,下方代码出现了return返回值,故是错误的
function MyFn1(a: number, b: string): void {
return a + b;
}
//b是可选参数,可选参数要书写在必选参数的后面
function MyFn1(a: number, b?: string): string {
return a + b;
}
//a 如果不传参数便是默认值10,...rest是剩余参数
function MyFn1(a = 10, b: string, c?: string, ...rest:number[]): string {
return a + b + c + rest;
}
const f: string = MyFn1(20, "楠笙", "1", 2, 3, 4, 5);
console.log(f); //输出 20楠笙12,3,4,5
//正常定义对象类型
const obj = {
name: "xiaomin",
age: 15,
};
//使用接口
interface obj {
name: string;
age: number;
};
//使用该接口来定义对象
const obj: obj = {
name: "a",
age: 10,
};
//错误示例
const obj: obj = {
name: 10,//参数类型错误
ago: 10,//字段名错误
};
//若很多参数都需要定义约束类型
let a: string | number = 10;
let b: string | number = 20;
let c: string | number = 30;
//则使用类型别名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 20;
let c: MyType = 30;
//类型限定死了,只能是number类型
function muFn(a: number, b: number): number[]{
return [a,b]
}
//T为泛型变量名,可以为任何字母
function muFn1<T>(a: T, b: T): T[]{
return [a,b]
}
// 调用
myFn1(1,"a") // 错误,ts将根据第一个参数类型来决定该泛型是什么类型
myFn1(1,2) // 正确
myFn1<number>(1,2) // 正确