これは何
- こちらの記事の続きというか、TypeScript版の内容です
- デザイナーである私がいくらかTypeScriptを勉強して、役に立ったと感じていることをまとめてみました
ひとまずプリミティブ型だけの理解でもかなり良かった
- string: 文字
- number: 数字
- boolean: 真偽値（trueとfalse）
これらを覚えるだけでも正直かなり役に立ちました。
エンジニアの皆さんからしたら当たり前の内容かもしれませんが「このコンポーネントのpropsに数字以外が入ってこられちゃ困るな」なんて気がつけるようになったと思います。
booleanも、安心感というか「どんなテキストが入ってくるか分からない」状態よりも「OKかNGか、それだけ」と言い切れるのは脳のメモリを変に使わずに済む感覚があります。
複雑な型を考えているとき、そもそもの構成が間違っているのかもと冷静になれる
「このキーと値の組み合わせで、入れ子がこれだけあって、引数にあわせて変化してほしくて……」とか考えているうちに、最終的にどうinterfaceやtypeとして示せばいいか分からなくて投げ出しそうになることが多々あります。
単に私が型を書く力が弱いだけですが、「そもそもコンポーネント分ければ良くない？」となるきっかけになった経験も。
無理してパズルみたいなことに取り組んで自爆しがちな性格なのですが、冷静になるきっかけを作ってくれている気がします。
初めて使うライブラリでもちゃんと動かせる場合が増えた
デザイナーといえども、カルーセルスライダーとかフェードインアニメーションとかそういったライブラリは触ることがあります。
使い慣れていれば良いのですが、初めて触るようなライブラリだと「Examplesの通りに書いてるつもりなのに動かない……」みたいな場合もしばしば。
ライブラリがTypeScriptで書かれていると型定義に飛べるので、解決できる場合が増えました。
大抵はしょうもないミスをしているだけなのですが……ちゃんと型のエラーが出てくれたり定義を読めると沼にハマりづらい気がします。
HTMLのミスにも気づける
普通のHTMLを書いていると、例えばattributesの間違いを犯しても気づきづらいです。
textareaと間違えてinputにcolsやrowsを指定していたとしても、特にエラーも吐かずビューが表示されてしまいますよね。
これが例えばTypeScript + Reactであればこんな風に表示してくれます。
「そんな属性はありません」と怒ってくれるので、その場で間違いに気づけます。
UIツールでコンポーネントを作るときの視野が広がる
例としてFigmaで説明をします。
Figmaでコンポーネントを作るならvariantsはほぼ間違いなく使う機能ですよね。
variantsの設定をしている時点で「これはリテラルのユニオン型」とか「これは単なるboolean」とかを考えられます。
そこまで考えておけると、その後コードで実装するときに楽になると思います。
終わりに
デザイナーにとってのTypeScript、絶対に読み書きできないといけないような代物ではないと思いますが、ほんの少し勉強するだけでも役立つ箇所は多いと感じています。
完璧である必要はないので、ちょっと足を踏み入れてみませんか？