文字列が適切か考える

はじめに

初心者向けです。

初心者にありがちなことと、TSに入りたてでありがちなことを書きました。

文字列が適切でない選択である可能性を意識する

文字列使いがち問題

自分が以前見かけたコードに下記のようなものがありました。
Next.jsにも例としてこのようなコードが載っています（このコード自体は問題ないです）。

<Link href="/about"><a>About</a></Link>

このコード単体で見ると、問題ないですが、この書き方をそのままプロダクションでも行われるとすぐに面倒なことになります。

自分が問題視しているのは、/aboutの部分です。

自分が見たコードは、全て（どこでも）hrefの中身が文字列で書かれていました。そのため、タイポっていても実行時にしかわからず（どの部分でも実際にリンク踏むまで正しいかわからない）、再利用性はなく、TypeScriptを利用しているにも関わらず、型の恩恵も受けられない部分になっていました。

本来は、
下記のようにパスを定義しておき、

const aboutPath = () => '/about'

下記のように定義したパスを使うなどすべきです。

<Link href={aboutPath()}><a>About</a></Link>

こうすることにより、型の恩恵を受けられ、タイポすることもなくなります。

＊ 前提として（当然ながら）リンクはどこからでも使われるというのがあります。一箇所でしか使わないならそのまま文字列を直接使っても良いかもしれませんが、整合性の観点からは全て、関数や定数にすべきだと思います（特にパスの場合は、idなどを埋め込むことになると思うので関数にすべき）。

string型使いがち

使用するものが決まっている場合には、enumを使うべき（TypeScriptならunion typeでも一応可）

// enum版
enum Color {
	red = 'red',
	green = 'gleen',
	blue = 'blue'
}


const printColor = (color: Color) => {
    console.log(color)
}

printColor(Color.blue)

// union type版
const printColor = (color: 'red' | 'green' | 'blue') => {
    console.log(color)
}

printColor('red')

おまけ

下記は、最近見かけたAPIです。

withZone(ZoneId.of("UTC"))  

上よりも下のAPIのが良いです。

withZone(DateTimeZone.UTC)