2023-05-28 TypeScript学习记录(长更)
概述:TypeScript(下称ts),js的超集,在js基础上进行了扩展并且新增了一些类型;不能被浏览器直接识别,需要编译为js才能被执行。
为什么使用ts,而不是js:js语法的定义相对不够严谨,变量没有约束,而ts在js一些不足的地方进行了优化,使写法变得严谨也更为复杂起来。
ts安装:npm install -g typescript
ts编译:tsc xxx.ts // 创建一个xxx.ts文件,然后运行此命令
ts例子:
let hello: string = 'hello world';
console.log(hello);
类型声明:
声明字符串:
let box: string;
unknown 类型:
let s: string; let e = unknown; // unknown 实际上就是一个类型安全的any // unknown类型的变量不能直接赋值给其它变量,需要通过typeof判断来间接赋值,如下: if (typeof e ==='string') { s = e; }
类型断言:
// 语法:变量 as 类型 或者 <类型>变量
// 用来告诉解析器该变量的实际类型
s = e as string 或者 s = <string>e
void 类型:
// void用来表示为空,以函数为例,就表示没有返回值的函数(没有返回值其实也是一种返回值,相较于下面的never,后者则是连空都不会返回) function fn(): void { return undefined }
// 或者这样
function fn(): void {
return null
}
never 类型:
// never表示永远不会返回结果,该类型专门用来报错的 function fn(): never { throw new Error("报错了"); }
object 类型:
// object表示一个对象,一般用于限制对象内的返回值 // 语法:{属性名: 属性值, 属性名: 属性值, 属性名: 属性值} let b: {name: string}; // 设置一个对象b,且b里必须包含类型为string的name值 // 属性名后面加上?表示属性是可选的 let b: {name: string, age?: number}; // ?:表示赋值时age属性为可选,即可有可无 // [xxx: string]: any 表示任意类型的属性,xxx为自定义名称 let c: {name: string, [xxx: string]: any}
设置函数结构的类型声明:
// 语法:(形参: 类型, 形参: 类型 ...) => 返回值 let b: (a: number, c: number) => number; b = function (n1: number, n2: number): number { return n1 + n2; }
数组类型:
// 语法:类型[]或者Array<类型> // string[] 表示字符串数组 let e: string[]; e = ['a','b','c']; // number 表示数值数组 let f: number[]; f = [1,2,3] // Array[类型] let g: Array<number> g = [1,2,3]
&符号表示同时
let a = {name: string} & {age: number};
a = {name: '小明', age: 18}
类型的别名
let t = 1 | 2 | 3 | 4 | 5; // 语法:type 变量名 = 类型 type myType = number; let t: myType;
重点🔺:
泛型:
function fn(a: any): any { return a; } 转换为泛型写法👇👇 function fn<T>(a: T): T { return a; } // 在定义函数或者类时,如遇到类型不明确就可以使用泛型 // 可以直接调用具有泛型的函数 fn(a: 10); // 利用ts的自动识别类型,指定函数fn的参数类型为number的a且值为10 fn<string>(a: 'hello'); // 手动指定泛型
// 泛型可以指定多个
function fn2<T, K>(a: T, b:K) {
console.log(b);
return a;
};
fn2(123, 'hello'); // 不指定泛型,ts自动推断类型
// 为了降低出错率,最好手动指定泛型
fn2<number, string>(123, 'hello');
// 使用限制泛型的类型
interface Inter {
length: number;
}
// T extends Inter 表示泛型T必须是接口Inter的实现类(或者说是一个子类)
function fn3<T extends Inter>(a: T): number {
return a.length;
}
(未完待续...)