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来编写。

举报/反馈

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

怎样把COFFEEscript 编译成JS
http://www.cnblogs.com/blackice/p/3285111.html http://blog.csdn.net/cloudcraft/article/details/82672 ...
vscode 配置ts自动转换成js文件
全局安装typescript cnpm install -g typescript 新建项目,生成tsconfig.json配置文件 cd 目录 tsc --init
css中background属性引入图片url()中地址
网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...
Sublime Text3中 less 自动编译成 css 的方法
使用sublime text的less2css插件步骤: 1.安装node.js,这个到官网下载即可 2.安装less,方法:命令行输入: npm install -g less 3.sublime ...
Pycharm 中py文件编译成exe文件出现的问题和一个问题解决
1 pyinstaller 命令和参数: usage: pyinstaller [-h] [-v] [-D] [-F] [--specpath DIR] [-n NAME] [--add-data & ...
js文件中可以写html吗,js代码写在HTML正常，分离成js文件再在HTML中引用不起作用...
js代码写在HTML功能正常,分离成js文件再在HTML中引用却不起作用 js代码片段,功能是调用高德地图JS API,并做些布局调整 var map = new AMap.Map("con ...
ts文件编译与运行,vscode自动编译
ts文件编译与运行根据官方文档提示,ts文件无法直接运行,需要编译成js文件. 1.那么问题就来了,如何把ts文件编译成js文件呢? 官方文档说,Visual Studio 2017和Visual ...
idea中reload all from disk_SpringBoot IDEA中实现热部署
在前后端分离的时代中,或许我们基本上很少会用到传统的MVC模式,但是对于部分老项目或者一些小项目来说,传统的MVC方式依然有着它短平快的优点.那么对于开发中,我们常遇到的一个困扰就是,如何像传统Spr ...
android studio中把c/c++文件编译成.so库（一）
2019独角兽企业重金招聘Python工程师标准>>> 最近的项目涉及到JNI编程,经过一段时间的JNI编程之后,终于完美弄完了.所以,把在android studio中编译c/c+ ...

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

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

最新文章

热门文章