TypeScript(Angular)で定数クラス

はじめに

TypeScriptを使って、Javaでいうところの定数クラスを作成したい場合はどうするのが正解なんだろう🤔

開発環境

• Angular: 5.2.3

• TypeScript: 2.5.3

• angular/cli: 1.6.5

• OS: darwin x64

• Node: 8.1.4

定数をまとめて定義する方法

案1 定数定義だけ書いたファイルを作成する

constで定義した変数を列挙しただけのファイルsrc/constant.tsを作成する。

src/constant.ts:

export const COLS = 10;
export const ROWS = 20;
export const BOARD_WIDTH = 300;
export const BOARD_HEIGHT = 600;

src/constant.tsから定義した定数を参照するときには、import * as constant from '../constant';という風にしてあげれば良い。

src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import * as constant from '../constant';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log(constant.COLS); // 10
    console.log(constant.ROWS); // 20
    console.log(constant.BOARD_WIDTH); // 300
    console.log(constant.BOARD_HEIGHT); // 600
  }
}

メリット・デメリット

⭕️ コード量が少なく済む

❌ (定数の数が多いと)定数名が長くなりやすい

❌ (定数の数が多いと)エディタの補完を使うときに、候補数が多すぎて選ぶのが大変になる

案2 class定義 + readonlyアクセス修飾子

定数の分類ごとにclassを作成し、その配下に定数を定義したファイル、src/app/myConstant.tsを作成する。

src/app/myConstant.ts:

export class MyConstant {
    public static readonly COLS = 10;
    public static readonly ROWS = 20;
    public static readonly BOARD_WIDTH = 300;
    public static readonly BOARD_HEIGHT = 600;
}

export class MyFavorite {
    public static readonly FOOD = 'ドーナッツ';
    public static readonly ANIMAL = 'モンキー';
}

src/app/myConstant.tsから定義した定数を参照するときには、import { MyConstant, MyFavorite } from './myConstant';という風にしてあげれば良い。

src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';

import { MyConstant, MyFavorite } from './myConstant';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log(MyConstant.COLS); // 10
    console.log(MyConstant.ROWS); // 20
    console.log(MyFavorite.ANIMAL); // モンキー
    console.log(MyFavorite.FOOD); // ドーナッツ
  }
}

メリット・デメリット

案1の逆

参考サイト

stackoverflow.com

qiita.com