VScode中html怎么引入js,vscode中如何使用typescript,如何自动编译成js文件

使用vscode创建一个typescript程序

1：介绍

typescript是一个跨平台的编程语言，专门用于前端的语言，是由微软开发，在2013年6月正式发布，它是javascript的超集，扩展了javascript语言，所有javascript代码都可以在typescript中运行，因为typescript最终是被编译成javascript代码的，包含typescript语法的代码是无法在浏器中执行的，它必须先编译成javascript代码。

2：安装typescript环境

打开windows下的cmd窗口，执行命令：

npm install -g typescript

tsc -V

如果安装不了，先配置一下国内镜像

npm config set registry http://registry.npm.taobao.org

如果没有npm命令的话，需要先安装nodejs

nodejs下载地址：https://nodejs.org/en/download

3：typescript示例

3.1：打开vscode，创建一个文件夹tstest

3.2：在tstest文件夹下创建一个文件，命令为：test.ts

3.3：在test.ts中加入代码：

(() => {

function hello(str:string){

return str;

}

let str = "sean";

console.log(hello(str));

})()

3.4：将test.ts文件编译成test.js文件

在tstest文件上右击，打开终端，输入命令

tsc .\test.ts

命令执行完毕后，可以同一目录中生成一个test.js的文件

3.5：在tstest文件夹下创建另一个文件，命令为index.html

3.6：在index.html中加入代码，引入test.js

Document

3.7：打开index.html页面，控制台即可输出sean

4：通过vscode怎么自动编译typescript代码示例

4.1：打开vscode,Explorer中右击New Folder创建一个文件夹，命令为：tstest1

4.2：在tsttest1上右键，打开终端，输入命令：

tsc --init

执行完成后会得到一个名为tsconfig.json的文件

4.3：修改二个配置

"outDir": "./js" /*ts文件编译成js文件存放的位置*/

"strict": false, /*是否开启一系列的类型检查规则*/

4.4：运行任务

Terminal -> Run Task -> Show all Tasks... -> tsc watch-tstest1/tsconfig.json

4.5：配置好后，我们在目录下写的所有ts代码，都将自动编译成js代码，存放到./js目录中，我们的html页面只需引入js代码即可

总结：

ts文件中如果直接写javascript代码，浏览器是可以完全支持的，如果ts文件中包含了ts的法语，必须先将ts先编译成js代码才可以被浏览器支持，如果不懂ts语法，也可以直接写js代码来实现，但是ts功能更加强大，而且是面向对象的，强烈建议使用ts来编写。

举报/反馈