第1回 TypeScriptを使おう

Transcript

1. 第1回 TypeScriptを使おう ～雰囲気で使うなら使うな～ らり
2. 対象者 • JavaScriptはある程度知っている人 • 未だにanyを使ってしまう人 • TypeScriptって使っとけばいいんでしょって思ってる人 • そもそも型を詳しく知らない人 • 型駆動開発がしたい人
3. お詫び • 自分もTypeScriptを完全理解してるわけじゃないので、分からない範囲もあります • 型をもりもり書いて～とかはしません • 型パズルも難しいのはしません • あくまで基礎勉強会なので、基礎を固めることを目標にしてます
4. レベル感 ↓これの型の説明 https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a ↓これの★2ぐらいの問題 https://qiita.com/uhyo/items/e4f54ef3b87afdd65546 これが余裕の方は全然見なくても問題無いと思います
5. TypeScriptってなぁに TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープン ソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静 的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセット（既存のものを 全て含んだ上でより機能が拡張されている上位互換となるモノ）となっている。 https://ja.wikipedia.org/wiki/TypeScript
6. TypeScriptってなぁに 詳しい話は以下の公式サイトをご覧ください https://www.typescriptlang.org/
7. 型ってなぁに データ型（データがた、Data type）とは、コンピュータプログラミングや計算機科学にお いて、属性を持つデータを分類し、その扱われ方をコンパイラやインタープリタに知らせ るプログラム。単に型（かた、Type）とも言われる。 多くのプログラミング言語は、整数型・浮動小数点型・ブール型・文字型といった基本 データ型を備えている。計算対象にされるデータは、しばしば値（value）と言われる。 データ型は式内の値を制約して、関数への適用可能性や変数への代入可能性を定義 する。データ型は、値の集合の概念と近似している。 https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E5%9E%8B
8. 型ってなぁに (簡単な説明) データ型とはデータの種類のことです。
9. TypeScriptの利点 • 型を事前に宣言するため、実行エラーを未然に防げる ◦ 数値と文字を間違えて扱う等 • 型を付けることにより、動作が速くなる • コードを読むのが楽になる ◦ 型によってどういう値が返ってくるかが分かる • エディタによるサジェストの恩恵が得れる
10. TypeScriptの欠点 • 型を理解していないと、嘘を加えたJavaScriptになる • 型の仕様がちょっと独特なところがある • コンパイルに時間がかかる • 実行エラーを100%防げる訳ではない • コードが長くなる ◦ 型宣言をするため • 型の付け方が難しい時がある ◦ どこまでガチガチにするかなど
11. 雰囲気でTypeScriptを使うことによる弊害 • 型が間違っているので、それを扱うコードも間違っていく • 上記により、エディタからの恩恵が薄い • コンパイルに時間がかかる • ただコードが長くなるだけ • TypeScript用にライブラリを入れることになるため、メンテが大変 → TypeScriptは導入するだけで良いというものではない → ちゃんと理解せずに使うのなら導入しない方が良い
12. 「TypeScriptを使おう」シリーズの最終目標 • 型で嘘をつかないようにする ◦ 共同開発の基本 • めっちゃ初歩の型の付け方や仕様を知る ◦ 応用的な型を作りやすくなるため、型パズルも出来るようになる • 出来るだけTypeScriptの恩恵を得れるようにする ◦ エディタのサジェストも受けることができ、うれしい • anyは絶対に使わない ◦ 型無しのJavaScriptを書くならTypeScriptを入れるな ◦ anyの存在意義の話は長いのでしません • 型駆動開発が出来るようになる ◦ 設計が考えやすくなる
13. やってはいけないこと • 型について考えすぎて開発の手が止まること ◦ OPはスピードも求められるので、ある程度妥協は必要な場面がある • 型のせいでコードが見にくくなること ◦ そんなことになるのであれば入れない方がいい 本来はJavaScriptが書ければ問題ないので あくまで型を導入することで開発しやすくなるだけってことを忘れずに
14. TypeScriptを試すところ https://www.typescriptlang.org/play
15. 型エイリアス 複数の場所で使いたい型を宣言するための構文
16. typeof演算子 値の型を文字列で返してくれる演算子 if文などに組み込むことができ、◦◦の型の時～みたいな処理を書くことが可能
17. プリミティブ型 • string • number • boolean • symbol • bigint • null • undefined
18. string型 文字列型 他言語ではcharなど色々分かれていたりするが、TypeScriptでは1種類 「`」で囲ったものは、テンプレートリテラルという
19. string型 文字列リテラル型が存在する それにより、stringのその文字列しか許可しない型を用意することができる
20. string型 (Stringオブジェクト編) Stringオブジェクトが存在する newキーワードを使って呼び出すと、object型になるが、使わないとstring型になる https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
21. string型 (Stringオブジェクト編) Stringオブジェクトは、型がStringの物を出すので、無理やり文字列にする性質がある よって、これは型変換ではなく、ただのオブジェクト変換なので、使用しない方がいい https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#general-types
22. number型 数値型 他言語ではint/float/doubleなど、数値によって型が分かれているが、TypeScriptでは1 つだけ
23. number型 JavaScriptには、NaNとInfinityがある これらもTypeScriptではnumber型となるため、number型だからといって必ずしも計算 が出来るとは限らない isFiniteという関数をつかって、有限なnumber型の値であるかを確かめる必要がある
24. null型 nullは型として存在するが、そもそも値なので、typeofで調べたときにはobjectとして出て くる そのため、型としてnullかどうかを調べる術はない ただ、型としては存在するので、null判別をしないといけない場面がある
25. undefined型 型をundefined型として宣言した時か、全く型を宣言していない時、値が存在しない時は 全てundefined型となる
26. Template Literal Types テンプレートリテラルで型を宣言することが出来る これを使うと、ただのstringより厳密な値を指定することが出来る
27. Template Literal Types ただ、ここで指定されたnumberはただのnumber型ではない そのため、他言語で使われるintやfloatのような数値しか扱うことができないため、注意 する必要がある
28. union type 「いずれかの型」を表現する型 パイプで繋げることで表す ちなみにnumber | stringは凄い範囲が広い型なので、出来るだけやめよう
29. union type 特定の文字列しか入らないようなものを用意したい時にも使える
30. 課題 以下の問題を解いてください 課題リンク また、この問題を解くにあたって、型の付け方で気を付けなければならないことや、他に 気になったことがあれば共有してください
31. 付録 https://typescriptbook.jp/ https://typescript-jp.gitbook.io/