安装
安装TypeScript还是很简单的：
1
| npm install -g typescript
|
写个hello.ts
1
2
3
4
5
6
| function sayHello(person: string) {
return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
|
然后执行
这时候会生成一个编译好的文件 hello.js：
1
2
3
4
5
| function sayHello(person) {
return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
|
可以看到，编译好后的就是平常的js代码，TS的一个优点在于类型的声明，这样在编译期bug就能及早发现（当然还有其他好处，例如泛型，Enum，装饰器）。
注意： TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。而在运行时，与普通的 JavaScript 文件一样，不会对类型进行检查。
复杂点
构建一个TypeScript的项目就需要tsconfig.json文件了。如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。
创建一个简单的项目，目录结构如下：
1
2
3
4
5
6
7
8
| MyProj
├── src
│ ├── index.ts
│ ├── person.ts
│ ├── animal.js
├── package.json
├── tsconfig.json
├── .eslintrc.js
|
tsconfig.json文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
"compilerOptions": {
"target": "ES2018", // 指定ECMAScript目标版本
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true, // 开启装饰器
"strict": true, // 启用所有严格类型检查选项
"noImplicitAny": false,
"removeComments": true, // 移除注释
"sourceMap": false,
"rootDir": "src", // Default: The longest common path of all non-declaration input files.
"outDir": "dist", // 编译输出目录
"allowJs": true // 允许JS文件混合
},
"include": ["src/**/*"], // 指定要编译文件
"exclude": ["node_modules"] // 指定要排除的编译文件
}
|
person.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| export class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
export interface Payload {
title: string;
description: string;
}
|
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { Person, Payload } from './person';
import { Animal } from './animal';
const p = new Person('sala', 12);
const data: Payload = { title: 'One', description: 'happy...' };
type StringOrNumber = string | number;
function getString(n: StringOrNumber): string {
if (typeof n === 'string') {
return n;
} else {
return n.toString();
}
}
const animal = new Animal('Kitty');
|
animal.js
1
2
3
4
5
6
7
8
9
| export class Animal {
constructor(name) {
this.name = name;
}
sayHi() {
return 'hello!';
}
}
|
package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
"name": "ts_learn_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"eslint": "^7.24.0",
"typescript": "^4.2.4",
"mwts": "^1.0.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint src --ext .ts",
"build": "tsc"
},
"keywords": [
"typescript"
],
"author": "salamander",
"license": "ISC"
}
|
.eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
rules: {
// 禁止使用 var
"no-var": "error",
// 优先使用 interface 而不是 type
"@typescript-eslint/consistent-type-definitions": ["error", "interface"],
},
};
|
2019 年 1 月，TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具，并创建了一个新项目 typescript-eslint，提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等。
参考：