🐡

TypeScript の命名規則ってなんだ

2022/09/10に公開

はじめに

基本的にはlowerCamelCaseと思っているが、型の命名に困ってる。
また大文字を使うタイミングもわからない。なお、細かいコーディングスタイルは Prettier や Rome などのフォーマッタに全てを任せているので気にしない。

ググったらTypeScript Deep Diveにスタイルガイドが記載されていたので見ていきます。他にも Microsoft と Google のスタイルガイトを見ていきます。

命名規則にはあまり細かい記述がありませんでしたので、流します。

Microsoft のコーディングスタイルは、Typescript の開発者向けコーディングスタイルであるため、コミュニティ向けのスタイルではない。

大きくタイトル部分に書かれていましたので、流してます。

Goolge は命名規則が丁寧に書かれていたのでメインに見ていきます。

では詳細に命名がテーブルで記載されていたので Google の命名規則をメインに見ていきます。

_ を使用しないこと
- _prefixやsuffix_
$ を使用しないこと
- サードパーティの命名規則に合わせる場合を除き、使用しないでください
- だが個々のチームに委ねられている
型には型であることを示す名前を付けない
- ~~Ifoo~~ また~~FooInterface~~
- 既にtypeやinterfaceで示されていることを 2 重で表現しない
略語についてはプラットフォーム名(PHP, XML)で必要とされない限り、loadHTTPURLではなくloadHttpUrl を使用する

変数(variable / property)

変数には、lowerCamelCaseを使います。

let fooVar = { hogeFuga: "fuga" };

クラス名(class)

クラス名にはUpperCamelCaseを使います。

class Foo {
  private static readonly MY_SPECAL_NUMBER = 5;

  bar() {
    return 2 * Foo.MY_SPECAL_NUMBER;
  }
}

関数(function / parameter )

関数には、lowerCamelCaseを使います。

メンバの場合は、クラス名と似ているのでlowerCamelCaseを使います。

function barFunc(barParam: string) {}

型には、UpperCamelCaseを使います。

interface Foo {}
type Bar = {};

グローバルな定数はEnum を含めてUPPER_SNAKE_CASE を使います。

API_BASE_URL = "https://example.com/api";

型と定数の命名が明確になったので、良かったです。あと細かく記述されていたことを意識していきます。また、_ を使いたくなってた場面が多かったので気を付けます。React の命名規則に関しては、Airbnb のスタイルガイドがあったので今度確認します。