使用typescript有大概两三个月了，稍微总结一下。
ts是js的超集，ts开发和js开发其实并没有什么区别。ts文件经过tsc编译后就是js。
刨除面向对象开发的思想(这个也不是必须的)，仅仅是一点点语法上的区别。
这个差别在开始用的时候会比较痛苦，各种标红，warning，但是过了这大概不超过一天的不适期，会发现他的强类型检测，能避免很多不易发现的bug。
tsconfig.json
如官方文档所言，目录中存在tsconfig.json表明该目录是TypeScript项目的根目录。tsconfig.json文件指定编译项目所需的根文件和编译器选项。项目以以下方式之一编译：
- 在没有输入文件的情况下调用tsc，编译器将从当前目录开始并继续向父目录寻找搜索tsconfig.json文件。
- 在没有输入文件的情况下调用tsc和一个
--project（或只是-p）命令行选项来指定包含tsconfig.json文件的目录的路径，或者指向一个包含这些有效配置文件的.json文件的路径。 - 在命令行中指定输入文件时，tsconfig.json将被忽略。
最基本的tsconfig.json如下
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": [
"dom",
"es2015"
],
},
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"emitter.ts",
"program.ts",
"commandLineParser.ts",
"tsc.ts",
"diagnosticInformationMap.generated.ts"
]
}
files中列举了需要编译的文件。当然这样枚举有些复杂，我们可以直接使用"include" 和 "exclude"
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true,
"lib": [
"dom",
"es2015"
],
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
compilerOptions的libs选项可能是我们需要注意的一个点，这个选项的官网说明是
要包含在编译中的库文件列表
但是需要注意的是，不要以为libs添加了es2015或者es6，就可以随便的在低端机型上用Promise，Set之类的函数。写一个简单的脚本，可以观察一下：
index.ts
let a = new Set();
let b = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 100);
})
b.then(a => {
console.log(a);
})
var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i);
});
}
funcs.forEach(function (func) {
func();
})
let ab = [1,2,3,4,5];
let ba = [...ab];
编译后 index.js
var a = new Set();
var b = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1);
}, 100);
});
b.then(function (a) {
console.log(a);
});
var funcs = [];
var _loop_1 = function (i) {
funcs.push(function () {
console.log(i);
});
};
for (var i = 0; i < 10; i++) {
_loop_1(i);
}
funcs.forEach(function (func) {
func();
});
var ab = [1, 2, 3, 4, 5];
var ba = ab.slice();
可以看见，tsc对一些常见的语法进行了转换，例如let，...解构，箭头函数。但是对于Promise和Set还是原样输出的。
所以如果需要使用这些api，还是需要自己引入polyfill。
这就让人很费解，那还引入"es2015"干啥，直接干掉吧。但是这个是不能删的，一旦删了编辑器会报错，所以老老实实加上吧。
个人理解，他所谓的加入了编译，就和 babel-loader时指定了
"presets":["es2015"],一样，并不是包含进去所有的ES6功能，毕竟这会导致加入很多代码，结果并不是你想要的，babel也没有这样做。
调试
VSCode配置参考
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "index",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}/lib/index.ts"
],
}
]
}
网友评论