TypeScript基础详细介绍(1)

「爱情、让人受尽委屈。」 2023-10-13 15:03 45阅读 0赞

# 1.TypeScript 介绍 #

## 1.1 TypeScript 是什么 ##

![在这里插入图片描述][6b4fd085897b46688300ea1559b20599.png]

## 1.2 TypeScript 为什么要为JS 添加类型支持？ ##

![在这里插入图片描述][11b594d7e5d449bea34ed38f14f4c8e8.png]

## 1.3 TypeScript 相比JS 的优势 ##

![在这里插入图片描述][a969d295f5484b98b4df9cdaa6d26460.png]

# 2.TypeScript 初体验 #

## 2.1 安装编译TS 的工具包 ##

![在这里插入图片描述][8c1832350f75484f8b573f3143ca374a.png]

## 2.2 编译并运行TS 代码 ##

![在这里插入图片描述][400858a840c9436ab56fca282002efac.png]

## 2.3 简化运行TS 的步骤 ##

![在这里插入图片描述][236b96413ba14de293c6f81396851659.png]

# 3.TypeScript 常用类型 #

![在这里插入图片描述][4529721540c545f69469134bc24c8455.png]

## 3.1 类型注解 ##

![在这里插入图片描述][92d5658aea2140e2afadb785ea27575b.png]

## 3.2 常用基础类型概述 ##

![在这里插入图片描述][584e94ad80db4a4d99b14cc2b68801ac.png]

## 3.3 原始类型 ##

![在这里插入图片描述][0ea79febcfa14128a402ea95ad3da744.png]

## 3.4 数组类型 ##

![在这里插入图片描述][57d04a7663cb4575bb1758338389c062.png]

## 3.5 类型别名 ##

![在这里插入图片描述][2d3bff1c2ca74c14aa537e7ebcf8c177.png]

## 3.6 函数类型 ##

![在这里插入图片描述][b787ae180bfb4ae6b87ba08f4454b40b.png]  
![在这里插入图片描述][0c003dd6bdf446428e5c10b75664bf26.png]  
![在这里插入图片描述][b168afa0bcdf41a7837d42a863bcb3c7.png]  
![在这里插入图片描述][a0b449c245a942489997b8f3067890f4.png]

## 3.7 对象类型 ##

![在这里插入图片描述][7d70e334be7f4df684cc866ab81f7408.png]  
![在这里插入图片描述][95edd4fb70da4b53a6f1e55b9495b515.png]

## 3.8 接口 ##

![在这里插入图片描述][8d9fa161892645abba914d29d6bcc7f3.png]![在这里插入图片描述][e87e341b49c34fce96da08dc1fe8fc46.png]  
![在这里插入图片描述][4165cde6ca554ee0967681ab0b8f75dd.png]

## 3.9 元组 ##

![在这里插入图片描述][77c08844dd72430e84e1a85ea8ab71d9.png]

## 3.10 类型推论 ##

![在这里插入图片描述][9a3bc898ef724aafa65b2e88e0e5ea2e.png]

## 3.11 类型断言 ##

![在这里插入图片描述][5828ee408be044a69468af09fd435702.png]

![在这里插入图片描述][61521722235744d2ae8039f0b5516ca9.png]

[6b4fd085897b46688300ea1559b20599.png]: https://img-blog.csdnimg.cn/6b4fd085897b46688300ea1559b20599.png
[11b594d7e5d449bea34ed38f14f4c8e8.png]: https://img-blog.csdnimg.cn/11b594d7e5d449bea34ed38f14f4c8e8.png
[a969d295f5484b98b4df9cdaa6d26460.png]: https://img-blog.csdnimg.cn/a969d295f5484b98b4df9cdaa6d26460.png
[8c1832350f75484f8b573f3143ca374a.png]: https://img-blog.csdnimg.cn/8c1832350f75484f8b573f3143ca374a.png
[400858a840c9436ab56fca282002efac.png]: https://img-blog.csdnimg.cn/400858a840c9436ab56fca282002efac.png
[236b96413ba14de293c6f81396851659.png]: https://img-blog.csdnimg.cn/236b96413ba14de293c6f81396851659.png
[4529721540c545f69469134bc24c8455.png]: https://img-blog.csdnimg.cn/4529721540c545f69469134bc24c8455.png
[92d5658aea2140e2afadb785ea27575b.png]: https://img-blog.csdnimg.cn/92d5658aea2140e2afadb785ea27575b.png
[584e94ad80db4a4d99b14cc2b68801ac.png]: https://img-blog.csdnimg.cn/584e94ad80db4a4d99b14cc2b68801ac.png
[0ea79febcfa14128a402ea95ad3da744.png]: https://img-blog.csdnimg.cn/0ea79febcfa14128a402ea95ad3da744.png
[57d04a7663cb4575bb1758338389c062.png]: https://img-blog.csdnimg.cn/57d04a7663cb4575bb1758338389c062.png
[2d3bff1c2ca74c14aa537e7ebcf8c177.png]: https://img-blog.csdnimg.cn/2d3bff1c2ca74c14aa537e7ebcf8c177.png
[b787ae180bfb4ae6b87ba08f4454b40b.png]: https://img-blog.csdnimg.cn/b787ae180bfb4ae6b87ba08f4454b40b.png
[0c003dd6bdf446428e5c10b75664bf26.png]: https://img-blog.csdnimg.cn/0c003dd6bdf446428e5c10b75664bf26.png
[b168afa0bcdf41a7837d42a863bcb3c7.png]: https://img-blog.csdnimg.cn/b168afa0bcdf41a7837d42a863bcb3c7.png
[a0b449c245a942489997b8f3067890f4.png]: https://img-blog.csdnimg.cn/a0b449c245a942489997b8f3067890f4.png
[7d70e334be7f4df684cc866ab81f7408.png]: https://img-blog.csdnimg.cn/7d70e334be7f4df684cc866ab81f7408.png
[95edd4fb70da4b53a6f1e55b9495b515.png]: https://img-blog.csdnimg.cn/95edd4fb70da4b53a6f1e55b9495b515.png
[8d9fa161892645abba914d29d6bcc7f3.png]: https://img-blog.csdnimg.cn/8d9fa161892645abba914d29d6bcc7f3.png
[e87e341b49c34fce96da08dc1fe8fc46.png]: https://img-blog.csdnimg.cn/e87e341b49c34fce96da08dc1fe8fc46.png
[4165cde6ca554ee0967681ab0b8f75dd.png]: https://img-blog.csdnimg.cn/4165cde6ca554ee0967681ab0b8f75dd.png
[77c08844dd72430e84e1a85ea8ab71d9.png]: https://img-blog.csdnimg.cn/77c08844dd72430e84e1a85ea8ab71d9.png
[9a3bc898ef724aafa65b2e88e0e5ea2e.png]: https://img-blog.csdnimg.cn/9a3bc898ef724aafa65b2e88e0e5ea2e.png
[5828ee408be044a69468af09fd435702.png]: https://img-blog.csdnimg.cn/5828ee408be044a69468af09fd435702.png
[61521722235744d2ae8039f0b5516ca9.png]: https://img-blog.csdnimg.cn/61521722235744d2ae8039f0b5516ca9.png