TypeScript教程

注：本文仅对ts中相对js不一样的地方做了笔记哟~想看js教程请挪步

js基础教程

简介

   Typescript是以javascript为基础构建的语言（是JavaScript的超集），可以在任意支持Javascript的平台中执行，但是它不能直接被js解析器执行，需要通过编译成js语言才可以解析；

类型声明

   类型声明是TS最重要的一个特点，通过类型声明可以指定TS中变量（形参、实参）的类型，在指定类型之后，当为变量赋值时，ts编译器会自动检查值是否符合类型声明，符合才会进行赋值；

let 变量: 类型; // 声明
let 变量: 类型 = 值; // 声明并赋值
function fn(参数: 类型, 参数: 类型): 类型 {
    
}

类型	例子	描述
number	1 23 -23	任意数字
string	'hi' 'welcome'	任意字符串
boolean	true false	布尔值
字面量	12 ‘string’ {} []	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	任意类型
void	空值(undefined)	没有值（或undefined），一般用于声明函数返回值
never	没有值	不能是任何值
object	{name: '小明'}	任意的js对象
array	[2, 3, 4]	任意的js数组
tuple	[4, 5]	固定长度的数组，新增数据类型
enum	enum{male, female}	枚举，新增数据类型

    注意当声明类型为any时，相当于对该变量关闭了Ts类型检测，但是在将一个any类型的变量a赋值给一个非any变量b时，会将b也变成any类型（容易造成变量类型混乱，所以要慎用any）；若变量声明时未定义类型时，默认是any类型（隐式的any）；一般用unknown代替any使用，它相当于一个安全类型的any，它不可以随意赋值给其他类型变量；

never表示永远不会返回结果，可以用于函数抛错：

function fn(): never {
    throw new Error('抛错喽')
}

{}用于指定对象中可以包含哪些属性：

let person : {
    name: string,
    class: string,
    project?: string   
} // 声明person变量

person = {
    name: '小明',
    class: '一年级'
} // 变量赋值

let dog : {
    name: string,
    [propName: string]: any

} // 声明dog变量

dog = {
    name: '汪汪',
    gender: '男',
    age: 1
} // 增加了number类型的age与string类型的gender 

声明对象时，在属性名后面加上?表示该属性是可选的

声明对象时，加上[propName: string]: any 表示可定义任意类型的对象（propName为属性名，属性名为string类型）

声明数组时，可以在变量前加上类型，表示数组内都是什么类型的数据，或者通过Array<类型>表示；

 类型[];
 Array<类型>

let e: string[]; // 表示e是字符串数组
let f: number[]; // 表示f是数字数组
let g: Array // 表示g是字符串数组

元组是Ts新增的数据类型，元组就是固定长度的数组；元组中的元素不必保持类型一致

语法： [类型， 类型， 类型]
示例： 
let h :[string, number, string];
h = ['hi', 1, 'num']

枚举一般用于对已知的数据进行列举：如果枚举中的标识符没有赋值，则值一般为下标，如下例中Male即为0

enum Gender {
    Male,
    Female
} // 定义Gender为枚举类型


let i: {
    name: string,
    gender: Gender
} // gender属性为Enum类型

i = {
    name: '小明',
    gender: Gender.Male
}

可以使用 | 来连接多个类型（联合类型）

let c: 'hi' | 'hello' // c是hi或是hello

类型断言

类型断言有两种方式：使用as或者使用<>在变量前声明；类型断言用于告诉解析器变量的实际类型；

变量 as 类型
<类型>变量

接口

在面向对象的编程中，接口是一种规范的定义。规范一个类中应该包含哪些属性和方法，同时接口也可以当做类型声明去使用；

接口可以在定义类的时候去限制类的结构，接口中的所有属性都不能有实际的值，只能定义对象的结构；并且在接口中所有的方法都是抽象方法（在类中都要实现）；

接口可以继承接口，实现接口的子类也可以同时实现多个接口；

interface myInterface {
    name: string
    age: number
}

const obj: myInterface = {
    name: '小明',
    age: 12,
} // 接口作为类型声明来使用

interface myInter {
    name: string;
    sayHello(): void
}
// 用类实现一个接口，即使类满足接口的要求
class MyClass implements myInter {
    name: string,
    constructor(name: string) {
        this.name = name
    }
    sayHello() {
        console.log('大声呼喊')
    }
}

泛型

泛型是解决类、接口、方法的复用性以及对不确定数据类型的支持；

// 泛型类
function fn(a: T): T {
//参数a和function返回值皆是泛型T
}

function fn2(a: T, b: K): T{
    return a
}
// 参数a和function返回值皆是泛型T，参数b是泛型K