typescript知识总结及在react、vue中的应用（上）

àì夳堔傛蜴生んèń 2023-09-29 13:38 111阅读 0赞

**目录**

1.是什么

2.ts的数据类型

3.类型注解及联合类型

4.函数类型和数组类型

5.对象类型

6.接口

7.元组

8.类型推论

9.类型断言

10.字面量类型

11.枚举类型

12.any类型

--------------------

#### 1.是什么 ####

> **是JavaScript的超集，既javascript中有的他都有，甚至还有他没有的。**

--------------------

#### 2.ts的数据类型 ####

> **就是js+ts自带的类型，这个很重要，务必全部掌握。**

![aadf2bc9ed7c4a649396926c3633e8d2.png][]

--------------------

#### 3.类型注解及联合类型 ####

> **项目中使用最多最频繁，结合上面数据类型使用。**

let a : string = 'aaaa' //这就是典型的类型注解 ：形式

![2eb1aba52f984f4fa6ecbc31953894b1.png][]

--------------------

#### 4.函数类型和数组类型  ####

> **函数类型使用的频率很高，100%使用率，务必掌握。**

![abcce61d4d264d579487ff0cdb63bf05.png][]

![e2903357f7254939968a7a12cb7fba4b.png][]

![7cf8156479f44754ad6c2d32ea684a7d.png][]

![0d7c63769c9742ed9e96453ed4fb5575.png][]

![9c54c9dc17f54e47936748b9401db259.png][]

![e5ab6dce371b48ac8447b2ebc215bbc5.png][]

--------------------

#### 5.对象类型 ####

> **对象类型使用的频率很高，100%使用率，务必掌握。**

![0674114c297c4d01943556f90b96ca39.png][]

![56c33accae3f41e287ca38215953212c.png][]

--------------------

#### 6.接口 ####

> **项目中使用频繁，也比较方便，可能还会和接口继承组合使用。**

**简而言之：接口描述对象类型！**

![f639493e2e8743ec8a4c3ffeb41c4d54.png][]

接口继承

![beb24654063546fbaf95cdf53b9b6c80.png][]

#### 7.元组 ####

>  **使用场景：明确的知道数组里面有几个值**

![eb62c4216fd64562a2fcf124e967a177.png][]

--------------------

#### 8.类型推论 ####

> **这个其实就是js的，不过这个还是有类型保护机制的，这个比较方便**

#### ![b9f1b10ca6fb444fabe95b7ef983ff76.png][] ####

--------------------

#### 9.类型断言 ####

> **当我（程序员）比ts更知道是什么类型时使用**

![63032350ef8d447884c84edc0070ff1d.png][]

![447cf70d0fca4214b0dd45b81e708074.png][]

--------------------

#### 10.字面量类型 ####

> **注意 const 的使用场景以及和联合类型组合使用**

#### ![55dbc8906eef40d38de824af1b55ed4f.png][] ![ea44782878ff4a6ba1a0fa0be2abed25.png][] ####

####  11.枚举类型 ####

> **一般用于固定的数据**

![01880f2bc5f545cb8fe5f26d955283ed.png][]

![3e97e3ee4642415c9337d986254e0e24.png][]

数字枚举

![aca84e542cb14c90a2d2079795e2af5d.png][]

字符串枚举

![800e7dde87b740e5beb9bb7abc81da34.png][]

--------------------

#### 12.any类型 ####

> **说是不推荐使用，实际真香！**

![a53b6286b5334747989557f5b5e6774f.png][]

[aadf2bc9ed7c4a649396926c3633e8d2.png]: https://img-blog.csdnimg.cn/aadf2bc9ed7c4a649396926c3633e8d2.png
[2eb1aba52f984f4fa6ecbc31953894b1.png]: https://img-blog.csdnimg.cn/2eb1aba52f984f4fa6ecbc31953894b1.png
[abcce61d4d264d579487ff0cdb63bf05.png]: https://img-blog.csdnimg.cn/abcce61d4d264d579487ff0cdb63bf05.png
[e2903357f7254939968a7a12cb7fba4b.png]: https://img-blog.csdnimg.cn/e2903357f7254939968a7a12cb7fba4b.png
[7cf8156479f44754ad6c2d32ea684a7d.png]: https://img-blog.csdnimg.cn/7cf8156479f44754ad6c2d32ea684a7d.png
[0d7c63769c9742ed9e96453ed4fb5575.png]: https://img-blog.csdnimg.cn/0d7c63769c9742ed9e96453ed4fb5575.png
[9c54c9dc17f54e47936748b9401db259.png]: https://img-blog.csdnimg.cn/9c54c9dc17f54e47936748b9401db259.png
[e5ab6dce371b48ac8447b2ebc215bbc5.png]: https://img-blog.csdnimg.cn/e5ab6dce371b48ac8447b2ebc215bbc5.png
[0674114c297c4d01943556f90b96ca39.png]: https://img-blog.csdnimg.cn/0674114c297c4d01943556f90b96ca39.png
[56c33accae3f41e287ca38215953212c.png]: https://img-blog.csdnimg.cn/56c33accae3f41e287ca38215953212c.png
[f639493e2e8743ec8a4c3ffeb41c4d54.png]: https://img-blog.csdnimg.cn/f639493e2e8743ec8a4c3ffeb41c4d54.png
[beb24654063546fbaf95cdf53b9b6c80.png]: https://img-blog.csdnimg.cn/beb24654063546fbaf95cdf53b9b6c80.png
[eb62c4216fd64562a2fcf124e967a177.png]: https://img-blog.csdnimg.cn/eb62c4216fd64562a2fcf124e967a177.png
[b9f1b10ca6fb444fabe95b7ef983ff76.png]: https://img-blog.csdnimg.cn/b9f1b10ca6fb444fabe95b7ef983ff76.png
[63032350ef8d447884c84edc0070ff1d.png]: https://img-blog.csdnimg.cn/63032350ef8d447884c84edc0070ff1d.png
[447cf70d0fca4214b0dd45b81e708074.png]: https://img-blog.csdnimg.cn/447cf70d0fca4214b0dd45b81e708074.png
[55dbc8906eef40d38de824af1b55ed4f.png]: https://img-blog.csdnimg.cn/55dbc8906eef40d38de824af1b55ed4f.png
[ea44782878ff4a6ba1a0fa0be2abed25.png]: https://img-blog.csdnimg.cn/ea44782878ff4a6ba1a0fa0be2abed25.png
[01880f2bc5f545cb8fe5f26d955283ed.png]: https://img-blog.csdnimg.cn/01880f2bc5f545cb8fe5f26d955283ed.png
[3e97e3ee4642415c9337d986254e0e24.png]: https://img-blog.csdnimg.cn/3e97e3ee4642415c9337d986254e0e24.png
[aca84e542cb14c90a2d2079795e2af5d.png]: https://img-blog.csdnimg.cn/aca84e542cb14c90a2d2079795e2af5d.png
[800e7dde87b740e5beb9bb7abc81da34.png]: https://img-blog.csdnimg.cn/800e7dde87b740e5beb9bb7abc81da34.png
[a53b6286b5334747989557f5b5e6774f.png]: https://img-blog.csdnimg.cn/a53b6286b5334747989557f5b5e6774f.png