0%

Typescript学习

安装

安装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));

然后执行

1
tsc hello.ts

这时候会生成一个编译好的文件 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
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
{
"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
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 等。

参考: