如题,本篇我们介绍下ts的开发环境搭建。
typescript的开发环境,可选择vscode、sublime Text 或者webstrom均可,这里笔者采用的是webstrom作为typescript开发工具。
在webstrom中new一个工程tsdemo_01,在工程中new一个tsconfig.json,在这个文件中配置ts编译选项,如编译输出目录,编译之后生成的JavaScript文件需要遵循的es标准等。
npm init tsdemo_01 ##初始化一个nodejs工程。
package.json
{
"name": "tsdemo_01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",//遵循的JavaScript模块规范。主要的候选项有:commonjs、AMD和es2015。为了后面与node.js保持一致,我们这里选用commonjs。
"target": "es5",//编译之后生成的JavaScript文件需要遵循的标准。有三个候选项:es3、es5、es2015 (即es6)
"sourceMap": false,//编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后,出错时可借助同名的source map文件查找源文件中错误位置。
"removeComments": false,//编译生成的JavaScript文件是否移除注释。
"noImplicitAny": false,//为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替。为true时,将进行强类型检查,无法推断类型时,提示错误。
"outDir":"js" //编译输出JavaScript文件存放的目录
},
//include、exclude:编译.ts时需要包含/剔除的文件夹
"exclude": [
"node_modules"
]
}
配置选项说明
module:遵循的JavaScript模块规范。主要的候选项有:commonjs、AMD和es2015。为了后面与node.js保持一致,我们这里选用commonjs。
target: 编译之后生成的JavaScript文件需要遵循的标准。有三个候选项:es3、es5、es2015 (即es6)
sourceMap:编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后,出错时可借助同名的source map文件查找源文件中错误位置。
removeComments:编译生成的JavaScript文件是否移除注释。
noImplicitAny: 对于不明确的类型推断为any。为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替。为true时,将进行强类型检查,无法推断类型时,提示错误。
outDir:编译输出JavaScript文件存放的文件夹。
ok,配置好后,我们在工程中新建一个ts目录和一个js目录,分别用来存放我们的ts源代码和编译后的js目标输出代码。
接下来我们就可以开始在ts目录中写ts代码了 。按照国际惯例,我们先来个hello-world。
我们在ts目录中新建一个app.ts,作为项目的入口ts。然后再在ts目录中新建一个model目录,用来存放我们的ts模块(ts和es6一样是模块化管理的,ts中使用和es6一样的模块化机制)。
在model目录中新建一个Demo.ts,内容如下:
/**
* Demo类 计算两个数的和
*/
class Demo{
a:number;
b:number;
constructor(a:number,b:number){
this.a=a;
this.b=b;
}
sum():number{
return this.a+this.b;
}
}
export {Demo}
注意:在ts代码中,我们使用了es6的语法(这是推荐的写法),但是最终编译的ts文件是es5语法的,所以不用担心兼容性的问题。
app.ts
import {Demo} from './model/Demo';
var demo=new Demo(3,4);
console.log(demo.sum());
ok,当我们ctrs+s保存后,我们能看到,ts编译器自动将我们的ts代码编译到js目录中了,且目录结构和ts目录一样。
我们再看下,编译输出的Demo.js和app.js 内容到底是什么。
Demo.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Demo类 计算两个数的和
*/
var Demo = /** @class */ (function () {
function Demo(a, b) {
this.a = a;
this.b = b;
}
Demo.prototype.sum = function () {
return this.a + this.b;
};
return Demo;
}());
exports.Demo = Demo;
app.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Demo_1 = require("./model/Demo");
var demo = new Demo_1.Demo(3, 4);
console.log(demo.sum());
可以看到,编译的js代码中es6语法编译成了es5语法,es6中的模块(import、export)语法也变成了CommonJs(nodejs中所使用)的模块语法。
ok!!