编译

image.png

官网沙箱运行

https://www.typescriptlang.org/zh/play，官网这个地方可以直接运行TS，给你临时测试一些代码，免安装

安装

image.png
tsc：对TS进行编译，转成JS代码

=====================

简单运行

tsc转js，node/浏览器运行

创建后缀为.ts的文件，.js是JS文件，.ts 是TS的文件
image.png
然后直接编写ts
image.png
上面声明了一个变量message，是String类型的，而下面给他赋值一个Number类型，不符合规范的话，直接就提示有错误了，不用等编译。
image.png
最后在命令行，通过tsc命令，生成对应的js文件
image.png
image.png
image.png
最后在Nodejs 或 浏览器 环境下运行

image.png

作用域

在同一个文件夹下，所有的ts文件都是共享同一个作用域的。

意思是文件夹src下，假设有a.ts和b.ts两个文件，两个文件都有let name 这个变量，那么就发生冲突报错了。

如果不想这样，直接在每个文件中，最后一行代码，export { } 即可，导出一个空对象。

这样表示我这个文件是一个模块，在我自己单独的作用域下。

优化简单运行：ts-node

通过ts-node库，为TypeScript的运行提供执行环境

安装ts-node

image.png
image.png
这个命令，相当于帮我们转成 js 并且自动运行，两步并做一步

项目中运行ts

1、Webpack

webpack 可以查看 https://www.yuque.com/yejielin/mypn47/qh6irh

安装ts-loader、babel
image.png

配置webpack.config.js
image.png
image.png

生成tsconfig.json文件，这个文件是控制你的项目ts验证规则，比如是否严格模式等等
可以通过 tsc —init 生成，里面的配置是ts默认的配置。
image.png

最后编写ts文件即可。
image.png

2、Vue Cli

创建项目时，可以选择是否使用ts，选择使用后就自带ts环境，直接编写ts文件即可。
查看 https://www.yuque.com/yejielin/mypn47/xkk66n#hMsEZ

3、Vite

vite自带ts环境，创建vite项目后，直接编写ts文件即可。