【TypeScript】学习笔记

一、什么是TS?

TS是TypeScript的简称，是一种强类型的语言。可以理解为JavaScript+强制类型标记。

二、TS的好处？

1、静态类型检查。

2、良好的代码提示，提升开发效率。

三、安装TS，配置TS自动编译环境：

1、安装ts包

npm i typescript -g

2、根据官网资料配置自动编译环境：此处我们选择的是vanilla-ts模板

npm create vite@latest ts-pro -- --template vanilla-ts 

在官网我们可以发现，TS还支持一下模板：

vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，

qwik-ts。

执行完以上命令我们将得到一个以 ts-pro为名的文件夹，根据终端提示我们执行cd ts-pro进入ts-pro目录，npm i安装依赖包，npm run dev启动项目。

四、TS类型注解： 

1、基础类型：string、number、boolean、null、undefined

2、复杂类型：数组、函数

3、TS新增的类型：联合类型、类型别名、接口（interface）、字面量类型、泛型、枚举、void、any。

下面我将根据分类，依次为各个类型注解。

 五、基础类型：

注意：

1、在注释类型的时候，我们需要使用全小写。

2、当使用TS为变量注解后，在赋值为其他类型的值后，会有类型提示。

变量名：类型 

六、复杂类型-数组：

注意： 

1、我们不仅可以限制变量的类型为数组，还可以限制组员的类型。

2、TS会提示我们变量和变量组员的属性和方法。

3、在使用泛型写法定义的时候，我们写的Array的首字母需要大写。

数组的定义，我们分为两种写法：

1、常见写法

变量名：组员类型[]

2、泛型写法

变量名：Array<组员类型>

七、联合类型：

注意：

1、联合类型指可以将一个变量同时设置为多种类型，声明时使用 “ | ”链接。

2、联合类型可以在多种场景中使用。

1、常见：

变量名： 类型1 | 类型2

2、和数组结合使用：

变量名：(类型1 | 类型2)[]

....

八、类型别名： 

注意：

1、通过 type 关键字，我们可以同时给多个变量设置成同一种类型。

type  类型别名 = 类型 

变量名：类型别名

九、复杂类型-函数：

注意：

1、可以给参数和返回值添加类型约束。

2、当给参数设置类型约束后，这个参数为必填。

3、当给返回值设置之后，我们所return的值必须符合类型约束的要求。

4、在一些特定的情况下，我们既要为某个参数进行类型约束，又要这个参数为费必传，此时我们需要为这个参数用 “ ? ” 进行标记。

函数的定义，我们分为三种写法：

1、函数声明：

function 函数名(参数1：类型，参数2：类型)：返回值类型 {

    return 

}

2、分开注解：（箭头函数）

const 函数名 = (参数1：类型，参数2：类型)：返回值类型  => {

    return 

}

3、整体注解：（使用type类型别名关键字）

type 类型别名 =  (参数1：类型，参数2：类型) =>返回值类型 

const  函数名：类型别名 = （参数1，参数2） => {

    retuen

}

4、特殊的：可选参数（在参数2后边加 ？则表明参数2可不传。）

function 函数名(参数1：类型，参数2？：类型)：返回值类型 {

    return 

}

十、void-无返回值：

注意：

1、当函数不需要return的时候，我们给返回值定义成void。

2、undefined是一种具体的返回值，不等于void。

function 函数名(参数1：类型)：void { 

}

十一、interface接口类型： 

注意：

1、interface用于给对象的属性或方法添加类型约束。

2、接口的可选设置：在某个属性后添加 “ ？”标识此属性可不传。

3、当未进行 “ ? ” 可选择设置时，如果少传某个属性会进行提示。

4、接口的继承当有多个接口有相同属性时，我们可以使用 “extends” 关键字继承。

interface 接口名 {

        属性1：类型，

        属性2：类型，

        属性3?：类型

}

此时属性3可不传。

接口继承：

interface 父接口名 {

        属性1：类型，

        属性2：类型，

}

interface 子接口名 extends 父接口名{

        属性3：类型，

}

此时子接口会同时具有属性1、属性2、属性3三个属性。

十二、Type注解对象：

注意：

1、我们可以使用 type 关键字注解对象。

2、我们使用 “ type + 交叉类型 ” 模拟继承。

type 类型名 = {

        属性1：类型，

        属性2：类型

}

let 对象名：类型名

type + 交叉类型：

type 父类型名 = {

        属性1：类型，

        属性2：类型

}

type 子类型名 = 父类型名 & {

        属性3：类型，

}

let 对象名：子类型名

此时该对象会同时具有属性1、属性2、属性3三个属性

 

总结： 

interface 和 type的区别：

1、继承不同。

2、同名的interface会合并，type会报错。

十三、 字面量类型：

注意：

1、给某个元素提供确切的某个值。

2、实际应用中，我们常常和联合类型结合起来，提供某个确切的值。

十四、any类型：

注意：

1、当我们给某个元素设置成any类型后，编辑器会自动忽略检查。

十五、类型断言： as

注意：

1、定义了某个元素一定为某种类型，当它为其他元素时，编辑器不会提示，但浏览器会报错。

十六、泛型： <T>

注意：

1、可以不先指定类型，使用时在指定类型。

2、可以复用类型，更加灵活。

3、适用于多个对象需要定义，且多个对象有很多属性相同。

4、使用思路：

• 先定义泛型：可变部分定义为泛型T。
• 定义具体类型，使用泛型时传入即可。

1、定义：

interface 接口1 <T> {

        属性1： 类型，

        属性2：类型，

        属性3：T

}

interface 接口2 {

        属性4： 类型，

        属性5：类型，

}

2、使用：

let 对象：接口1<接口2> = { }

3、此时我们所定义的对象内元素应该为：

对象： {

        属性1： 类型，

        属性2：类型，

        属性3：{

                属性4： 类型，

                属性5：类型，

        }

}