TypeScript编码规范

1 命名及约定

1.1 类

使用 PascalCase 进行命名。

Bad

class foo {}

Good

class Foo {}

1.2 类成员（变量、方法）

使用 camelCase 进行命名。

Bad

class Foo {
  Bar: number;
  Baz(): number {}
}

Good

class Foo {
  bar: number;
  baz(): number {}
}

1.3 接口

使用 PascalCase 进行命名，不要在接口名前加“I”。

接口成员使用 camelCase 进行命名。

Bad

interface IFoo {
  Bar: number;
  Baz(): number;
}

Good

interface Foo {
  bar: number;
  baz(): number;
}

1.4 命名空间

使用 PascalCase 进行命名。

Bad

namespace foo {}

Good

namespace Foo {}

1.5 枚举

枚举成员使用 PascalCase 进行命名。*Bad*

enum Color {
  red,
}

*Good*

enum Color {
  Red,
}

使用 PascalCase 进行命名。*Bad*

enum color {}

*Good*

enum Color {}

1.6 文件名

• 使用破折号分隔描述性单词，比如：hero-list.ts。
• 使用点将描述性名称与类型分开，比如：user-info.page.ts。
• 尽量使用常规的几种类型名，包括.page,.service,.component,.pipe,.module,.directive,.controller 和.middleware。当然也可以自己创建其他类型，但不宜太多。
• 类名与文件名匹配，并遵循类命名规范。

2 类型

不要使用 Number、String、Boolean、Object 为变量、数组和方法设置类型。*Bad*

baz(foo: String): String {
​
}

*Good*

baz(foo: string): string {
​
}

需显式地为变量、数组和方法编写类型（类型推论能够推断出类型的不需要声明类型）。*Bad*

class Bar {
  bar(input) {
    let isZero;
    const foo: number = 5;
    if (input === 5) {
      isZero = false;
    }
    const resultObject = {
      fo: foo,
      isZeroRes: isZero,
    };
    return resultObject;
  }
}

*Good*

class Bar {
  bar(input: number): BarResult {
    let isZero: boolean;
    const foo = 5;
    if (input === 0) {
      isZero = true;
    }
    const resultObject = {
      fo: foo,
      isZeroRes: isZero,
    };
    return resultObject;
  }
}
​
interface BarResult {
  fo: number;
  isZeroRes: boolean;
}

3 声明变量

• 如果变量在其生命周期可能发生改变，尽量使用 let。

如果一个值在程序生命周期内不会改变，尽量使用 const。*Bad*

var bar = "bar";
var count;
if (true) {
  console.log(bar);
  count += 1;
}

*Good*

const bar = "bar";
let count: number;
if (true) {
  console.log(bar);
  count += 1;
}

4 对象

仅使用引号用于属于无效标识符的属性。*Bad*

const bad = {
  foo: 3,
  bar: 4,
  "data-blah": 5,
};

*Good*

const good = {
  foo: 3,
  bar: 4,
  "data-blah": 5,
};

在对象字面量里使用属性简写。*Bad*

const lukeSkywalker = "Luke Skywalker";
const obj = {
  lukeSkywalker: lukeSkywalker,
};

*Good*

const lukeSkywalker = "Luke Skywalker";
const obj = {
  lukeSkywalker,
};

使用{}进行对象创建。*Bad*

const  item  =  new  Object（）;

*Good*

const item = {};

5 字符串

使用单引号声明字符串。*Bad*

const bar = "bar";

*Good*

const bar = 'bar'；

6 解构

访问数组中的多个数据时，使用解构。*Bad*

const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];

*Good*

const arr = [1, 2, 3, 4];
const [first, second] = arr;

访问和使用对象的多个属性时，使用对象解构。*Bad*

const foo = user.firstName;
const bar = user.lastName;

*Good*

const { foo, bar } = user;

7 空格

• 在定义类型前面加上空格。
• 赋值等号两边加上空格。
• 方法、类大括号前空格。
• 对象冒号后空格。

*Bad*

class Foo {
  openDetail(item: string): void {
    let foo: string;
    foo = "";
    const foa = {
      name: "foo",
    };
    console.log(item);
  }
}

*Good*

class Foo {
  openDetail(item: string): void {
    let foo: string;
    foo = "";
    const foa = {
      name: "foo",
    };
    console.log(item);
  }
}

8 缩进

使用两个空格缩进。

9 分号

语句结尾添加分号。

*Bad*

const foo = "foo";

*Good*

const foo = "foo";

10 数组

使用 push 添加数据*Bad*

const foos = [];
foos[foos.length] = "abracadabra";

*Good*

const foos = [];
foos.push("abracadabra");

使用[]定义数组。*Bad*

let foos: Array<Foo>;

*Good*

let foos: Foo[];

TypeScript编码规范

https://ths-fe.github.io/2020/05/24/TypeScript编码规范/

作者

刘莹鑫

发布于

2020-05-24

更新于

2023-08-05

许可协议

CC BY-NC-SA 4.0

本文作者 xulin（海鸥技术部落），原载于团队 GitBook 技术 Wiki。