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 {}

  Good

  enum Color {}

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

  Bad

  enum Color {
    red,
  }

  Good

  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

  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;
  }

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

  Bad

  baz(foo: String): String {
  
  }

  Good

  baz(foo: string): string {
  
  }

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  item  =  new  Object（）;

  Good

  const item = {};

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

  Bad

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

  Good

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

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

  Bad

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

  Good

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

5 字符串

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

  Bad

  const bar = "bar";

  Good

  const bar = 'bar'；

6 解构

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

  Bad

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

  Good

  const { foo, bar } = user;

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

  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;

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 数组

• 使用[]定义数组。

  Bad

  let foos: Array<Foo>;

  Good

  let foos: Foo[];

• 使用 push 添加数据

  Bad

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

  Good

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