Zenn
🤔

TypeScriptの学習メモ(1)

2020/10/27に公開
TypeScript
idea

前提

個人開発のHtml5ゲーム開発用のライブラリとしてPhaserを使っている。
Node.js + Javascriptでの開発だが、ソフト開発環境を構築したときに色々ツギハギして作成したため、メンテナンスがしにくく良くない状況である。
特にwebpack/babel等は祈りながら設定した。

Phaserでは、TypeScriptでの開発にある程度実績があるようだ。
新規プロジェクト立ち上げに合わせて、開発言語をTypeScriptに移行し、開発環境の見直しを行いたい。

以前、QiitaのTypeScript学習の記事がバズっていたので、それを取っ掛かりに進める。
この記事に、進捗状況のメモやハマったポイントなどを残しておく。

開発環境

OSレベルの開発環境等

  • windows10上のubuntu(Vagrant)
  • node(v12.19.0 / lts)
  • yarn

TypeScript学習ロードマップでの学習と結果

TypeScript学習の記事のLevelに合わせて進める。

Level0

参考記事
ざっくり読む。噂に聞いてたように型定義があるんだなーぐらいの感想。
静的チェックツールで問題点の指摘がより良くなるかな？

Level1

1.1 ソフト環境構築

参考考記事

  • webpack/webpack-cli/webpack-dev-serverでパッケージバージョンで問題発生
    webpack-dev-serverは4.0系のwebpackじゃないとダメのようだ。
    他の記事で正常動作が確認できている設定を参考に、以下バージョンを指定。
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

  • vagrantのゲストOS上のサーバーのファイル(index.html)がホストOSから見えない
    この記事が参考になった。

    • webpack-dev-serverのhost設定を0.0.0.0にする
    • ポートフォワーディング設定

  • 自動ビルドが動かない
    原因不明。vagrant(ゲストOS)だからダメ？windowsのセキュリティあたりも怪しい。
    webpackのwatchオプションにpoll:trueを指定するとうまくいった。

  • 型定義ファイルが強力

  • webpackでライブラリが重すぎるときはChunkを使う

1.2 TypeScript型入門

参考記事
後半TypeScript固有の機能説明が詳しい。
が、初学者にはキツイ。読み流してしまった。ある程度型が分かってきたら読み返す？

1.3 サバイバルTypeScript

参考記事
かなり丁寧な解説で、レイアウトも読みやすい。
最終更新も２週間前とメンテナンスがよくされている。
作りながら学ぶ章はあっさり終わってしまったので、もっと作りながら学びたい。
JSとTSを取り巻く歴史の話と、ジェネリクスなんで産まれたん？あたりはとても良く分かる。

続く。

Discussion