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;
}

 

（未完待续...）