Typescriptでマップデータや不変の値を扱うTips

今回は短編です。

Typescriptのオブジェクトや配列

Typescriptではオブジェクトや配列に型を定義することができます。
ですが、ときに多言化用の辞書データやcssプロパティなどの変更することのないデータを扱いたいと思うときが来るかもしれません。

例えば私はReactを使用するときはスタイリングにaphroditeを使用するので、フォントファミリーやカラーパレットなどをTypescriptで定数として持ちます。
https://github.com/Khan/aphrodite
https://zenn.dev/mast1ff/articles/f4fad1e2c6e516

ですがJavascriptのオブジェクトや配列のデータは変更が可能です。
また、中身のデータの値については当然ですがサジェストされません。

const leading = {
    none: 1,
    tight: 1.25,
    sung: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2
};

// これは当然エラー
leading.none = "1";

// 型があっていればオブジェクトの中身は自由に変更ができる
leading.none = 2;

IDEでの参照

immutableに扱う

ここで登場するのがas constです。

export const leading = {
    none: 1,
    tight: 1.25,
    sung: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2
} as const;

この場合の型はreadonlyとなり、変更もできずサジェストもされるようになる。

以上です。