TypeScriptコーディング規約のきほん

 

1.目的

  • チーム開発などでコーディング規約を統一・共有することで、コードの保守性を向上させる

2.前提

  • 原則としてJavaScriptコーディング規約に則り、TypeScript固有の項目については、そちらに従う
  • 中には、明確なルールがないものもある。その場合は著名なプロジェクトでの標準的なルールや慣習などに従う

3.識別子スタイル

項目スタイル備考
変数名、関数名camelCaseJsに従う
定数名CONSTANT_CASE
クラス名PascalCase
メンバとメソッド名はcamelCase
Jsに従う
インターフェース名PascalCase(クラス名のスタイルに従う)・多くのJSチームでの慣習として、プレフィックスIやInterfaceなどは付与しない(組み込みのWindowやDocumentなどのInterfaceにIがついていない)
・そのインターフェースが存在する理由を表す名前を付けるのがベスト
タイプ名PascalCase(クラス名のスタイルに従う)
Enum名PascalCase(クラス名のスタイルに従う)
メンバもPascalCase
言語作成者、TypeScriptチームに従った慣例
ディレクトリ名多くのJSチームでの慣習としてcamelCaseまたは kebab-case
ファイル名多くのJSチームでの慣習としてcamelCaseまたは PascalCaseクラスや単一の関数しかexportしていないファイルの名称はexportしている要素の名称とする

4.言語特性

変数

  • 変数宣言
    • 原則constを使用する。constで不都合がある時にlet
    • varは使用しない
    • 変数はできるだけ使用する直前で宣言すること

文字列

  • 文字列の合成にはテンプレートリテラルを使う。+を使用しない
const user = {
  id: 1,
  name: "太郎",
};

console.log(`私の名前は${user.name}です`); // 私の名前は太郎です

配列

  • 型宣言は、慣習としてArray<Hoge>ではなく、Hoge[]を使う

等価チェック

  • 等価演算は===を使用する(🙅==)
    • 以下のように、JavaScriptが自動で型を変換するため、==だと数値の1と文字列の1の比較がtrueとなってしまう
    • 想定している動作とは異なる動作になってしまう可能性のある書き方は控えたほうが良いのと、タイプセーフにコードを書く上では、型も含めてチェックすべき
1 == "1"; // true
1 === "1"; // false

オブジェクトのプロパティへのアクセス方法

  • どちらかに統一する
const user = {
  id: 1,
  name: "太郎",
};

// ①
user.id

// ②
user["id"]

4-6.名前空間とモジュール

  • namespaceは基本的に使用せず、モジュールシステムを使用して他のファイルのコードを参照する
  • モジュールシステムのうち、CommonJs形式(require)を使用しない、EsModules(import)を使用する

5.型システム

null vs undefined

前提

  • 値がないことを表現する方法としてnullとundefinedがある(どちらもプリミティブ型)
undefinednull
定義値が代入されていないため、値がない代入すべき値が存在しないため、値がない
自然発生するかJsの言語仕様では、さまざまなケースでundefinedが自然発生する
・変数を宣言したときに初期値なしの場合
・オブジェクトに存在しないプロパティや配列にない要素にアクセス
・戻り値がない関数の戻り値を取得したとき
・プログラマーが意図的に使わない限り発生しない
・一部のDOM系のAPIはnullを返すこともある

どちらを使うべきか

  • 論争が分かれるが、Jsの言語仕様に沿って、値がないことを表現したい場合はundefinedを使用する方が無難
    • nullに統一する方法を採用しようとすると、上記のundefinedを全てnullに置き換えることが必要になり、現実的に不可能
    • 例えば、findメソッドは該当する要素がない場合はundefinedを返すが、これを使用したメソッドを実装する際に、結果がundefinedだったらいちいちnullに変換して返す等する必要がある

typeとinterfaceの使い分け

  • そこまで大差ないので、プロジェクトごとにどちらを使用するか決めてそれに従う形で良いのではないかと思われる
  • ※ただ、implementsできるという点で、個人的にはinterfaceが優れていると感じる
interfacetype(型エイリアス)
拡張可能か可能交差型(インターセクション型)で複数のタイプを組み合わせることにより、拡張可能
定義可能な対象オブジェクトとクラスオブジェクトとクラスに加え、そのほかのユニオン、タプル型なども可能
クラスで実装可能か可能(implements)不可
  • 交差型(インターセクション型)によるtypeの拡張
type Three = One & Two;
  • typeでは他の型(ユニオン型など)も定義可能
type ProductType = "book" | "grocery";

6.フォーマット

インデント

  • スペース2個分とする(🙅タブ)

引用符

  • シングルクォート(‘)
  • 他の有名なJavaScriptチーム(airbnb、標準、npm、NodeJS、google/angular、facebook/react)がこれを採用している

セミコロン

  • 不要でもいいと思われるが、議論が分かれるので、プロジェクト内で統一する

※以上です。不足している内容もあるかと思いますので、適宜加筆して行きます。

7.参考

タイトルとURLをコピーしました