TypeScript编码规范

TypeScript编码规范

1 命名及约定

1.1 类

使用 PascalCase 进行命名。

Bad

1
class foo {}

Good

1
class Foo {}

1.2 类成员(变量、方法)

使用 camelCase 进行命名。

Bad

1
2
3
4
class Foo {
Bar: number;
Baz(): number {}
}

Good

1
2
3
4
class Foo {
bar: number;
baz(): number {}
}

1.3 接口

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

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

Bad

1
2
3
4
interface IFoo {
Bar: number;
Baz(): number;
}

Good

1
2
3
4
interface Foo {
bar: number;
baz(): number;
}

1.4 命名空间

使用 PascalCase 进行命名。

Bad

1
namespace foo {}

Good

1
namespace Foo {}

1.5 枚举

  • 使用 PascalCase 进行命名。

    Bad

    1
    enum color {}

    Good

    1
    enum Color {}
  • 枚举成员使用 PascalCase 进行命名。

    Bad

    1
    2
    3
    enum Color {
    red,
    }

    Good

    1
    2
    3
    enum Color {
    Red,
    }

1.6 文件名

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

2 类型

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

    Bad

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class Bar {
    bar(input) {
    let isZero;
    const foo: number = 5;
    if (input === 5) {
    isZero = false;
    }
    const resultObject = {
    fo: foo,
    isZeroRes: isZero,
    };
    return resultObject;
    }
    }

    Good

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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;
    }
  • 不要使用 Number、String、Boolean、Object 为变量、数组和方法设置类型。

    Bad

    1
    2
    3
    baz(foo: String): String {

    }

    Good

    1
    2
    3
    baz(foo: string): string {

    }

3 声明变量

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

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

    Bad

    1
    2
    3
    4
    5
    6
    var bar = "bar";
    var count;
    if (true) {
    console.log(bar);
    count += 1;
    }

    Good

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

4 对象

  • 使用{}进行对象创建。

    Bad

    1
    const  item  =  new  Object();

    Good

    1
    const item = {};
  • 在对象字面量里使用属性简写。

    Bad

    1
    2
    3
    4
    const lukeSkywalker = "Luke Skywalker";
    const obj = {
    lukeSkywalker: lukeSkywalker,
    };

    Good

    1
    2
    3
    4
    const lukeSkywalker = "Luke Skywalker";
    const obj = {
    lukeSkywalker,
    };
  • 仅使用引号用于属于无效标识符的属性。

    Bad

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

    Good

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

5 字符串

  • 使用单引号声明字符串。

    Bad

    1
    const bar = "bar";

    Good

    1
    const bar = 'bar'

6 解构

  • 访问和使用对象的多个属性时,使用对象解构。

    Bad

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

    Good

    1
    const { foo, bar } = user;
  • 访问数组中的多个数据时,使用解构。

    Bad

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

    Good

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

7 空格

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

Bad

1
2
3
4
5
6
7
8
9
10
class Foo {
openDetail(item: string): void {
let foo: string;
foo = "";
const foa = {
name: "foo",
};
console.log(item);
}
}

Good

1
2
3
4
5
6
7
8
9
10
class Foo {
openDetail(item: string): void {
let foo: string;
foo = "";
const foa = {
name: "foo",
};
console.log(item);
}
}

8 缩进

使用两个空格缩进。

9 分号

语句结尾添加分号。

Bad

1
const foo = "foo";

Good

1
const foo = "foo";

10 数组

  • 使用[]定义数组。

    Bad

    1
    let foos: Array<Foo>;

    Good

    1
    let foos: Foo[];
  • 使用 push 添加数据

    Bad

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

    Good

    1
    2
    const foos = [];
    foos.push("abracadabra");
作者

刘莹鑫

发布于

2020-05-24

更新于

2021-08-04

许可协议

CC BY-NC-SA 4.0

评论