TypeScript入门

「爱情、让人受尽委屈。」 2022-09-11 12:14 256阅读 0赞

为了搭建一个比较现代的前端应用，似乎目前唯一的选择是JavaScript，但是传统的JavaScript存在着缺陷，人们总结出来了JavaScript的拓展语言，这就是TypeScript  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16]  
TypeScript是JavaScript的超集，在兼容JavaScript的同时，也带来了Java，C\#等语言才具有的强类型定义的特点，可以说TypeScript把JavaScript提升到了一个全新的高度，在TypeScript中我们除了可以使用熟悉的JavaScript的语法，还可以充分利用JavaScript不具备的强类型定义、面向对象、泛型等拓展对象，构建出一个更强大、更健壮、更容易维护的大型项目。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_15_color_FFFFFF_t_70_g_se_x_16]  
注意：TypeScript无法在浏览器中运行，我们还需要借助编译器把TS变成JS  
TS优势：  
1.Typing强类型  
规范我们的代码  
可以在代码的编译阶段及时发现错误  
在原生js的基础上加上了一层类型定义

TypeScript类型检查 ，避免低级错误，解放劳动力，帮助我们写出质量更高的代码

安装TS： `npm install -g typescript`  
运行：`tsc main.ts`会生成相应的main.js,这个js文件是运行在浏览器中的  
运行： `node main.js`会成功输出结果

![在这里插入图片描述][504abd699bcf4c898cdbe500af9920c5.png]  
![在这里插入图片描述][05c7db24435544df997809754a93cd42.png]  
typescript 工作流  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_18_color_FFFFFF_t_70_g_se_x_16]  
typescript 的编译器叫tsc,就跟es6的babel 是一个作用

创建一个项目

npm init  // 生成package.json文件
        npm install -D lite-server   //轻量级服务器

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bb66b9b57f3e4ffbb35f49edef0d56e4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/561047327f8f4137b25dff021397682b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/0c3973a2773746c984caa70092421a73.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/66ae913b8d2e4af7b36b77dd600b2f28.png
[504abd699bcf4c898cdbe500af9920c5.png]: /images/20220828/5de0e3afc6754993848ffae2e4d7f0d4.png
[05c7db24435544df997809754a93cd42.png]: /images/20220828/ae43b65990054dbb928c0c1c094bcbb0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2dfb1a3d8f1e43d1a0750800a431670a.png