毎日更新

72日目 個人開発記11 -typescriptはじめました-

こんばんは。

今日は個人開発記「typescriptはじめました」というテーマです。

今やっている開発では、フロントに「React-Redux-HooksでSPA」の技術を使っています。「個人開発でこのラインナップなら文句ないだろー」と自信満々に開発進めてたんてますが、昨日「そういえばtypescriptってやつがいたなー」とヤツの存在を思い出してしまいました。。。

いろいろ求人を見ていてもReactとニコイチな雰囲気を醸し出してますし、React使ってなくてもtypescriptだけを導入してる会社も多い印象です。

もともと今の開発を始める前にReactの勉強をしていた時、実は一緒にtypescriptも覚えようとしたんですがソッコーで挫折してます。

ただでさえReactに不慣れなところにtypescriptが絡んでくると、当時の自分にとってはもはや解読不能でした。「Reactと同時に勉強するのはさすがに無理がある」と判断し、一旦後回しにしてました。

結構な人が「typescriptは難しい。なんならReactより難しいかも」と言ってるのを見聞きしてたので、かなりビビリながら本日typesctiptの勉強を再開しました。

Udemyの講座で軽めに基礎をサラッとインプットし、「とにかく手を動かすのじゃ!」とすぐに自分のプロジェクトにtypescriptを入れてみました。

.ts/.tsx ファイルをコンパイルできるよう設定を書き換え、一発とりあえず

 $ npm run watch-poll

コマンドをかましてみると、、、、

エラー数36、、、!?

そう、普通にReactで動いていたコードにtypesctip入れただけでは「エラー祭り」なんですね。「型を定義するだけでしょ〜?」くらいに思ってたんですが、typescriptには「Linterとしての側面」もあるので、「型を適切に定義していないと怒られる」んですね。

このエラーを1つ1つ潰していく戦いが始まるわけです。

ただ引数に渡すオブジェクトの型定義くらいなら

type defaultPropsType = {
 name: string
 email: string
 password: string,
 password_confirmation: string,
};
const Register = (props:defaultPropsType) => {
 //
}

みたいな書き方をすればよくて、「おっけ〜分かる分かる〜!!!」て感じなんですが、

const Layout: ({ children }: {
 children: any;
}) => JSX.Element = ({ children }) => {
  return (
  {children}
 );
};

↑こんなのになってくると、とりあえずエラーなく動いてるコードですらもはや何のこっちゃって感じの難しさです。

それに、ググってもなかなかいい記事が出てこないし、そもそも日本語の記事があんまりヒットしないんですね。React周りは本当に情報が少なくて大変です。

特にHooks周りのエラーは日本語文献ほぼ皆無で、マジで死にかけました。。

結局5時間以上かけて36以上あったTSコンパイルエラーは無事に解消できました。これで「typescript使ってます」って言える!!

ただ、css-in-jsのプラグイン『emotion』がtypescriptを入れたことにより動かなくなり、スタイルが当たらなくなってしまいました。

ただ関連パッケージと一緒にnpm -i すれば動くわけではなく、他のnpmモジュールにも影響を与えるとはナカナカ手強いです。。

まあとりあえず動くようにはなったので、初日にしては上出来ではないでしょうか。技術スタックにtypescriptが仲間入りです。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5