Typescript简介

参考视频：

• 小满TypeScript基础教程全集（完结）_哔哩哔哩_bilibili
• 尚硅谷TypeScript教程（李立超老师TS新课）_哔哩哔哩_bilibili

学前小坑

安装typescript

在使用yarn global typescript安装ts之后，调用tsc可能会出现zsh: command not found: tsc的错误，这是因为终端没有配置对应的路径，如果是使用yarn进行安装，安装路径就在/Users/{MacName}/.config/yarn/global/node_modules/typescript/bin，因此只需要在配置文件中进行配置即可。

export PATH="/Users/{MacName}/.config/yarn/global/node_modules/typescript/bin:$PATH"

source ~/.zshrc

编译ts文件

• 可以先试用tsc对ts文件编译为js文件，再用node对js文件进行编译运行
• 也可以通过安装ts-node和@types/node，通过ts-node对ts文件进行编译运行

vscode推荐插件

• JavaScript and TypeScript Nightly
• TypeScript Hero

概念

• 是以JavaScript为基础构建的语言
• 一个JavaScript的超集
• 可以在任何支持JS的平台中执行
• TS扩展了JS并添加了类型
• TS不能被JS解析器直接执行

基础类型

TypeScript(TS)是基于JavaScript(JS)开发的一种语言，对于变量需要定义类型

• 数字类型

let num: number = 123;

• 字符类型

let str: string = "123";

• 布尔类型

let bool: boolean = false;

对于布尔类型也可以使用Boolean类进行创建

let boolObj: Boolean = new Boolean(1);
console.log(boolObj);
console.log(boolObj.valueOf());

输出的结果就是

[Boolean: true]
true

• 空值类型 & null & undefined

let n: void = null;
let u: void = undefined;
let n1: null = null;
let u1: undefined = undefined;

• null和undefined是其他类型的子类，可以赋值给其他类型，但是void和其他类型是平等关系，不能直接赋值（报错
• 但如果开启了ts的严格模式，null和undefined不能给其他类型赋值，但undefined可以对null赋值

同样的将空值类型应用到函数定义和返回值中一样适用，如果是返回类型是void就只能return或者不写

function fnVoid(): void {
    return;
}

• JS中的函数是不考虑参数的类型和个数的，虽然方便快捷但这样但出现类型错误的时候就很难检查出来，S因此对函数参数类型和个数进行了限制，同时也包括返回类型。

function sum(a: number, b: number): number {
    return a + b;
}

• 联合类型

let enumString: "female" | "male";
let enumType: boolean | string;

• 枚举类型

enum Gender {
    Male = 1,
    Female = 0
}
let i: { name: string, gender: Gender }
i = { name: "mayer", gender: Gender.Male };

任意类型

任意类型指的就是any和unknown类型，也就是可以通过这两种类型存放数字，字符，布尔，数组以及对象等类型的数据

两者之间的区别：

• unknown类型比any类型更加安全
• unknown类型不能调用属性和方法
• unknown类型只能赋值给unknown类型和any类型，any类型可以充当子类型（可以赋值给各种属性）

let un: unknown = "unknown";
let an: any = "any";
let str: string = "str";

un = an;
str = an;
str = un;(报错)

针对于unknown类型参数的赋值，可以通过类型断言完成

// 类型断言，用来告诉解析器变量的实际类型
s = um as string;
s = <string>um;

空类型

• void类型用来表示空，用函数表示就是没有返回值的函数

function fn(): void {
    return;
}

• never类型永远不会有返回值

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

接口和对象类型

在ts中，通过关键词interfaces接口来定义对象

• 使用interfaces来定义一种约束，让数据的结构满足约束的格式
• 可以用Java中的类类比理解

• 值得注意的是，ts定义对象使用到贪婪原则，也就是尽可能的匹配相同的类，再进行拼接组合。

• ？可选式操作符：可选参数，在实例化的过程中也可以不需要对该操作符修饰的属性赋值

• 任意属性[propName: string]，一旦定义让任意属性，那么确定属性和可选属性的类型必须是它类型的子类.propName只是个参数名类比后续的参数，后续带的类型表示后续参数名字都是string类型

• 关键词readonly作为只读标识，被修饰的属性只能只读不可修改

• 如果在接口中有函数变量，在定义过程中需要()表示该属性是方法属性，而在实例的过程中不需要，对应的value是回调函数即可

interface demo {
    name: string,
    [propName: string]: any,
}

interface demo {
    readonly age: number,
    course?: string,
}

let obj: demo = {
    name: "Harry",
    age: 12,
    remark: "In addtion = Another"
}

数组类型

• 普通命名方式

let arr: number[] = [1, 2, 3]
let arrAny: any[] = [true, 1, 'hello', [], {}]

• 泛型命名方式（类似于Java中定义数组的方式）

let arrOther: Array<number> = [1, 2, 3]
let arrOtherAny: Array<any> = [true, 1, 'hello', [], {}]

• 多维数组命名方式

let arrDim: number[][] = [[1, 2, 3], [4, 5, 6]]

• 固定长度的数组

let h: [string, number, string];
h = ['first', 12, 'second'];