TypeScriptで式展開をする方法

はじめに

rails api + TypeScript（react)でポートフォリオを作成中にフロント側で式展開を行いたくなり、調べたことをざっくり備忘録にまとめます。

TypeScriptの式展開

「${}」で囲みます。

「`」の名前をバッククォートと言うらしいです。
「'」ではないので注意してください。
(ちなみにこれはシングルクォートです。)

`${}`

実際に使った例

本来はデータによってリンクを動的に変えたい！という時に式展開は使用することが多いと思いますが、userIdを取得する記述の前提を書きすぎると式展開についての記事ではなくなってしまうので、一旦"userId"に2を代入します。

const userId = 2

<Route exact path={`/users/${userId}/edit`} component={UserEdit} />
//"/users/2/editのリンクに飛ぶことができる

終わりに

typescriptはコードを書いている時にエラー箇所を教えてくれるからありがたいですね。
とは言ってもreactでわかってないことが多すぎてまだまだ苦戦してますが。。