一、体验

1. TypeScript的概述

1.1 JavaScript是什么？

JavaScript是一种运行在客户端中的编程语言，当应用于浏览器时，为网站提供动态交互特性，让网页“动起来”。

运行环境： 1 浏览器 2 Node.js

1.2 TypeScript 是什么？

TypeScript 是JavaScript的超级（js有的ts都有） TypeScript是 Type+JavaScript（为js添加了类型系统）设计目标是开发大型应用。

//TypeScript  代码：有明确的类型，即 ：number （数值类型）

let age: number =10

// JavaScript 代码，无明确的类型

let age =10

1.3 TypeScript 相比 js的优势

a：类型化思维方式，开发更为严谨，提前定位错误，减少bug。

b：类型系统提高了代码可读性，维护和重构更容易。

c：补充了接口，枚举等开发大型应用时js缺失的功能。

d：vue3源码为ts，是未来趋势。

e： angular 和 react都可以与ts使用。

1.4开发工具

倾向于 vscode - 使用方便，插件较多灵活。

1.5安装node.js

官网教程很清晰。验证：终端里， node -v 出现版本号即可。

1.6为什么要安ts工具包？

浏览器只认识js 不认识ts ，所以需要将ts转化为js 。然后可以在node.js/浏览器中运行。

1.7 安装解析TS工具包

安装步骤：

打开vscode终端
输入安装命令： npm i -g typescript typescript：就是用来解析TS 的工具包，提供了tsc命令，实现了TS-JS转化。

1.8 TS文件创建

新建文件夹
用vscode打开文件夹
在vscode中新建hello.ts文件
执行验证 hello.ts文件中，输入console.log('hello, my study typeScript') 进行验证打开终端，将ts转为js ，转换办法是，在终端中输入 tsc hello.ts 回车，在文件夹中出现新文件同名的js文件 hello.js。执行js文件，在终端中输入 node hello.js

1.9简化执行ts步骤

简化方式：使用ts-node包。 ‘直接’ 在node.js 中执行 TS 代码安装： npm i -g ts-node 使用： ts-node hello.ts 说明：

ts-node包将ts转换为js ，然后执行js代码
ts-node包提供了命令 ts-node ，用来执行ts代码

ts-node hello.ts 终端报错

可能是版本不符合，可以指定安装版本。将原有包卸载，安装指定版本

卸载： npm uni -g ts-node

安装： npm i -g ts-node@8.5.4

删除原本的hello.js ，再次用ts-node运行hello.ts 。依旧可以运行。所以ts-node 很香了，一步到位。

1.10 注释和输出语句

注释

注释：对代码的解释说明，用来帮助和理解代码
知晓：注释的内容是不会执行的
推荐：写代码的时候写注释，否则，自己也是不记得的。

注释方式：单行注释和多行注释

单行注释：

// 这是我的代码注释 快捷键ctrl+/

多行注释： /* 这是我的多行注释 */ 快捷键是 shift +alt +a

输出语句

作用：在终端中打印信息 node.js 会执行我们所写代码，为了能够知道代码的执行结果，就需要使用输出语句将结果打印出来，判断是否执行，以及执行结果是否正确。 console.log('TS 的魅力')

1.11 总结

总结就是上面的，翻上去看看吧！

小笔记- typescript学习1-体验篇