使用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
Document3.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来编写。
举报/反馈