体验Typescript开发配置

我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

ts编译为js

首先我们可以在本地电脑创建一个demo文件夹，然后我们在vscode中打开文件夹，打开后如下图

我们在demo文件夹下建立一个test.ts的文件，里面随便写点ts代码

当我们直接把test.ts文件夹下的文件拷贝到浏览器中并回车，会报错误，因为浏览器不能直接执行ts代码

所以我们需要安装typescript环境，执行下面命令，执行代码前，我们需要先在本地安装好node环境

// 这里的g表示全局安装
npm install typescript -g
// 如果想指定不同的版本，可以使用@ + 版本号，下面是加版本号的安装
npm install typescript@4.5.5 -g

安装之后，如果我们直接用node去执行ts代码会报错

node ./test.ts

控制台显示结果

这是因为ts代码不能直接运行，所以我们需要先进行编译，执行编译命令

tsc .\test.ts

结果编译完成后，会生成一个对应的js文件

生成的文件中的代码就是ts代码转换过来的js代码

这个时候我们就可以通过node去执行生成的js文件了

node ./test.js

执行后就会打印出我们代码中写的东西

总结：如果想编译执行一个ts文件，我们需要先执行tsc+文件名进行编译，再执行node+转换后的js文件，才能得到我们想要的结果。

进一步简化上面的步骤

我们可以使用ts-node工具，使用工具前，我们需要先在全局进行安装

// 如果想安装指定版本可以参考上面typescript的安装版本方法
npm install ts-node -g

可以删除我们上一步生成的test.js文件，将ts中的x值66修改为77

我们就可以直接执行下面的命令，输出对应的结果

ts-node ./test.ts

如果我们执行命令报错错误

那么我们需要解决dom错误，根据错误信息，我们执行下面的命令

tsc --init

执行命令后会生成一个tsconfig.json文件

我们只需要根据错误提示，在lib中添加dom就行，如下

修改后，我们在执行ts-node ./test.ts，会输出如下结果：

我们生成的tsconfig.json除了我们写的这个，还是很多配置介绍，可以参考官网tsconfig.json中的配置