TypeScript勉強会

Transcript

1. TypeScript勉強会資料
2. はじめに - この勉強会はTypeScript初心者向けの勉強会です - Javaがある程度わかる、JSは少しわかる、TSはよくわからな い人をターゲットにしています - TypeScript移行を目的としています - クラスなど、省略している箇所が多々あります 2
3. 目次 - TypeScriptとは - 型 - 基本的な構文 - 関数 - インターフェース - 高度な型 - モジュールシステム - ビルド関連 - 参考 3
4. TypeScriptとは ・JavaScriptに対する“静的型付け” → 型付けのメリットは？ ① 型安全性 ② ドキュメント化/入力補完 ※JSに変換するので実行時には TSの要素はなくなります！！ 4 const str: string = “foo”; 赤字の部分を型注釈といい、strがstring 型であることを示しています。 型推論も充実しており、赤字の部分は 省略可能です。ただし省略すると結果 が微妙に異なります。(詳しくは後程) 推論版： 注釈版：
5. TypeScriptとは - 型付けのメリット① ① 型安全性 - コンパイラが型チェックして間違ったプログラムを検出してくれ る仕組みのこと - Javaなどと同じようにコンパイルエラーが出る 5
6. TypeScriptとは - 型付けのメリット② ② ドキュメント化/入力補完 - 型情報がソースコードに記載されるため、読解する補助となる - 型情報を基にIDEが入力を補助してくれる機能がある - 以下の場合string型が持っているメソッドなどが補完される 6
7. 基本的な構文① - 前提知識 ・文と式 - 大体Javaとおなじ - 式には結果があり、文には結果がない ・変数宣言 - const, letを使用する(varは非推奨) - letは再代入可能 & 宣言時に値を代入する必要なし - →多用すると読みにくくなるので、基本はconst - 型注釈を活用する 7
8. 型 - プリミティブ型 ⓪. プリミティブ型の種類 - 文字列・数値・真偽値・undefined・null (・BigInt・シンボル) ①. 文字列(string) - シングルクォート(‘’)orダブルクォート(“”)で囲む文字列リテラル - 機能上の差異はないので好みでOK - バッククォート(``)で囲むテンプレートリテラル - 改行できること、変数を埋め込めることが違い 8 str2は↓のようになります abc def
9. 型 - プリミティブ型 ②. 数値(number)(※BigIntは省略) - 整数・小数の区別がない - “_”の使用が可能 - NaN(Not a Number) - Number(“aaa”)などの戻り値 ③. 真偽値(boolean) - ture / false で真偽値を表す - 型の変換表→ 9 https://typescript-jp.gitbook.io/deep-dive/recap/truthy
10. 型 - プリミティブ型 ④. undefined / null - 双方ともそれ自体が値の名前 - 両方とも「データがない」ことを示す値 - 基本的にはundefinedを利用する - typeof nullがobjectとなる(バグ) - undefinedは自然発生する 10
11. 型 - リテラル型 ・リテラル型とは - プリミティブ型を細分化したもの - 文字列・数値・真偽値がある - “abc” や 2 や true といった名前の型 - 最初に紹介した推論はリテラル型に推論されている 11
12. 型 - object型 ・object型 - プリミティブ型以外の型は全てobject型に分類される - クラスそのものや配列・正規表現・関数なども含む - 言い換えると「object型」とは、「プリミティブ型以外の型なら なんでも代入できる型」と言える - object型にはプロパティの情報がない 12
13. 型 - オブジェクトリテラル ・オブジェクトリテラル - 「{}」で簡単にオブジェクトを生成できる記法 - もちろんオブジェクトリテラルを型にすることも可能 13 obj1はnameとageをもっていることをコンパイラに注釈で伝え ているため補完が効きます。(obj2も推論されるため同様) “?”は省略可能なプロパティを示しています。 obj1の型情報
14. 型 - オプショナルチェイニング ・オプショナルチェイニング - 「.」ではなく「?.」を使用する(例： obj?.prop) - オブジェクトがnull, undefinedでも使用可能 14 null, undefinedの場合 以降の呼び出しを まとめて飛ばす効果が ある
15. 型 - 配列 ・配列 - 基本的にはJavaなど他言語と同じ - Type[]かArray<T>で型注釈する - 機能的には同じなので統一してあればどちらでもOK - メソッドも多く実装されている - MDNを参照のこと 15
16. 型 - unknown, any, never ・ unknown, any - any - どんな型の代入も許す型 - unknown - 型が何かわからないときに使う型 - 型安全なanyと言われている - never - 何も代入できない - 何にでも代入できる 16
17. 型 - ユニオン(合併)型 ・ユニオン型 - 「型Tまたは型U」のような表現ができる型 - 集合で言うところの合併（和） - 2つ以上の型をパイプ“|”で繋いで記述する 17
18. 型 - インターセクション(交差)型 ・インターセクション型 - 「型Tかつ型U」のような表現ができる型 - 集合で言うところの交差（積） - 2つ以上の型をアンド“&”で繋いで記述する - プリミティブ型の交差型を作るとnever型になる 18
19. 型 - 階層構造 - 参考程度にTypeScriptの型の階層構造を添付します。 19 https://knmts.com/as-a-engineer-52/
20. 基本的な構文② - 演算子 - 算術演算子・比較演算子 - 基本的にJavaと同じ - 算術演算子“+”で文字列結合も可能 - 冪乗は「**」が使用可能 - 等価演算子 - 原則「===」や「!==」を使用する - 「==」や「!=」は使わない方が無難 - NaNと比較すると常にfalseになる 20
21. 基本的な構文③ - 制御構文 - 条件分岐 - if文 / else / else if / switch文 - 基本Javaと同様 - 後述の型ガードに役立つ - 三項演算子を使う場合も多い - ループ - while文 / for文 - これもJavaと同様 - 配列操作時にはfor-of文 21
22. 関数 ・TypeScriptでの関数の基本的な書き方(関数宣言) 22 function 関数名(引数1: 型, 引数2: 型): 戻り値の型{ return; } function testFunc(hoge: number, fuga: string): void{ return; }
23. 関数 - 関数式 ・関数宣言との大きな違いは式であること - 変数に代入して使用する - アロー関数式でも関数の作成が可能 23
24. 関数 - デフォルト引数 ・引数がundefinedの時に使われるデフォルト引数が指定出来る 24 function defaultFunc(hoge = 0、fuga = ""){ return hoge; } console.log(defaultFunc()) // hoge: 0, fuga: "" console.log(defaultFunc(undefined, "fuga")) // hoge: 0, fuga: "fuga"
25. 関数 - 可変長引数 ・スプレッド演算子(...)を使うことで、可変長引数を指定出来る 25 function spreadFunc(...rest: number[]){ return rest; } console.log(spreadFunc(1,2,3,4,5)) // [1,2,3,4,5] function spreadSeparationFunc(first: number, second: string, ...rest: number[]){ return rest; } console.log(spreadSeparationFunc(1,"2",3,4,5)) // [3,4,5]
26. 関数 - this引数 ・アロー関数以外の関数とクラスのメソッドは第一引数にthisを持つ ことが出来る - thisはコンテキストによって変わるため、TypeScriptで明示化する 26 function testThisFunc(this: string, hoge: number){ return this; } console.log(testThisFunc.call("this", 0)) // "this"
27. インターフェース - typeとinterface ・TypeScriptでは型宣言の方法が二種類ある - type - 型制約を強めるイメージ - 交差、合併型が使用できる - 複雑な型宣言に向いている - interface - 型を拡張するイメージ - 継承(extends)が使用できる - クラス、オブジェクトの型宣言に向いている 27
28. インターフェース - typeとinterface ・typeでは同じ型名を付けることができない 28 typeTest.ts
29. インターフェース - typeとinterface ・interfaceでは同じ型名だと型がマージされる 29 interfaceTest.ts
30. インターフェース - typeとinterface ・typeでAPIレスポンスの型を付けた例 30 typeTest.ts typeTest.ts
31. インターフェース - typeとinterface ・interfaceでAPIレスポンスの型を付けた例 31 interfaceTest.ts interfaceTest.ts
32. インターフェース - typeとinterface ・type vs interfaceの結論 - 一方でしか出来ないということはほとんどない - どちらが良い、悪いではなく適材適所 ※可能であればプロジェクトで統一するのが良さそう（個人的意見） 32
33. 高度な型 - 型ガード ・型ガードとは - 条件分岐でTypeScriptの型を絞り込む機能 - 型によって処理を変えたい場合に有効 - 早期returnにも対応している 33 typeGuardTest.t s
34. 高度な型 - 型アサーション ・型アサーションとは - as 型名で型推論を上書きする機能 - 概念はキャストに近いが、値は書き換えない - 強力だが、バグを生みやすいため注意が必要 34
35. モジュールシステム ・モジュールシステムとは - import、export宣言によって他のモジュールの読み込みを行う - TypeScriptでは型もモジュールとして扱える Q.通常のモジュールと型のモジュールの区別がつきにくいのでは？ A.import時にtypeと宣言できるので問題なし！ 35 types/animal.ts animalTest.ts
36. モジュールシステム - type宣言 ・Type-Only Imports and Export (TypeScript3.8) ・type Modifiers on Import Names(TypeScript4.5) 36 animalTest.ts animalTest.ts
37. モジュールシステム - npmパッケージモジュール ・npmとは - Node.js提供のパッケージマネージャ - サードパーティ製のパッケージ(モジュール)をインストール可能 - TypeScriptの型定義が含まれているものもある Q. パッケージにTypeScriptの型定義がない場合はどうする？ 1. DefinitelyTypedシステムから@typesをパッケージをインストールす る 2. 型定義を自作する 37
38. モジュールシステム - DefinitelyTyped ・DefinitelyTypedシステム - Microsoftが運営しているTypeScript型定義リポジトリ - @types/〇〇(パッケージ名)でインストール可能 - 基本的に有志によって製作されている 大原則： 型定義がパッケージに無い場合は@types/〇〇がないか検索！ https://www.typescriptlang.org/dt/search?search= 38
39. モジュールシステム - 自作の型定義ファイル ・型定義ファイルの作り方 1. 〇〇.d.tsファイルを作成(慣例) 2. declare module “モジュール名”で宣言 3. 変数や関数を型定義し、export 39 myModule.d.ts
40. ビルド関連 ・デプロイ時に必要なこと：TypeScript→JavaScriptへのコンパイル 1. TypeScriptコンパイラをインストール $ npm install --save-dev tsc 2. tsconfig.jsonファイルを作成 $ npx tsc --init 3. tscコマンドを実行 $ npx tsc 対象のファイル 40
41. ビルド関連 - tsconfig.json 41
42. ビルド関連 - tsconfig.jsonの主なコンパイルオプション ・Reference：https://www.typescriptlang.org/tsconfig 42 オプション 機能 例 lib targetでない機能を読み込む(array)。 [“dom”, “esnext”] sourceMap ソースマップの生成を有効にする(boolean)。 true outDir 出力先パス(string)。 “./dist” rootDir tscのルートディレクトリ(string)。 “./src” allowJS js、jsxファイルをコンパイル対象にする(boolean)。 true include コンパイル対象を指定する(array)。 [“./src/**/*”, “”] exclude コンパイルの除外対象に指定する(array)。 [“.dist”]
43. ビルド関連 - tsconfig.jsonのstrictオプション ・Reference：https://www.typescriptlang.org/tsconfig 43 オプション 機能 noImplictAny 暗黙的なany値をエラーにする。 noImplicitThis thisの型注釈を必須にする。 alwaysStrict JSのstrictモードを有効にする。 strictBindCallApply bind、call、apply使用時に厳密な型チェックが行われる。 strictNullChecks Nullableな値の呼び出しをエラーにする。 strictFunctionTypes 引数の型の共変性チェックを行う。 strictPropertyInitialization クラスプロパティの初期化を必須にする。
44. ビルド関連(再掲) ・デプロイ時に必要なこと：TypeScript→JavaScriptへのコンパイル 1. TypeScriptコンパイラをインストール $ npm install --save-dev tsc 2. tsconfig.jsonファイルを作成 $ npx tsc --init 3. tscコマンドを実行 $ npx tsc 対象のファイル 44
45. ビルド関連 - webpackタスクランナー ・webpackタスクランナーを使用すると、アプリのデプロイが楽に 1. webpackタスクランナーをインストール $ npm install -g webpack 2. webpack.config.jsファイルを作成 $ touch webpack.config.js 3. webpackを実行 $ webpack 45
46. ビルド関連 - webpack.config.js(全体) 46
47. ビルド関連 - webpack.config.js(entry) 47 // ビルド時の開始点となるJSファイルを指定 entry: { 'src/index.js': 'src/index.ts', },
48. ビルド関連 - webpack.config.js(module) 48 // モジュールの設定 module: { rules: [ { // 適用する拡張子 test: /¥.(ts|tsx)$/, // 除外するディレクトリ exclude: /node_modules/, // 適用するコンパイラ use: { loader: 'ts-loader', options: { transpileOnly: true, } } }, ], },
49. ビルド関連 - webpack.config.js(resolve) 49 // import文の拡張子設定 resolve: { extensions: ['.ts', '.js', '.tsx', '.jsx'], alias: { }, },
50. ビルド関連 - webpack.config.js(output) 50 // ビルドファイルの出力先設定 output: { libraryTarget: 'umd', filename: '[name]', path: `src/dist` }
51. ビルド関連 - webpackタスクランナー(再掲) ・webpackタスクランナーを使用すると、アプリのデプロイが楽に 1. webpackタスクランナーをインストール $ npm install -g webpack 2. webpack.config.jsファイルを作成 $ touch webpack.config.js 3. webpackを実行 $ webpack 51
52. 参考 - プログラミングTypeScript - https://www.oreilly.co.jp/books/9784873119045/ - プロを目指す人のためのTypeScript入門 - https://gihyo.jp/book/2022/978-4-297-12747-3 - サバイバルTypeScript - https://typescriptbook.jp/ 52
53. 参考 - 【TypeScript】型定義でのinterfaceとtypeの違い - https://yutaro-blog.net/2021/10/08/typescript-interface-type/ 53
54. 参考 - よく分からなかったのでCommonJSとTypeScriptのES Modulesinteropについて調べてみた - https://omochizo.netlify.app/posts/2020/08/commonjs-esm/ - 最新版TypeScript+webpack 5の環境構築まとめ - https://ics.media/entry/16329/ - 【TypeScript入門】tsconfigとWebpackの設定~環境構築編①~ - https://qiita.com/YSasago/items/778eef2a50d5664da572 - webpack.config.js の書き方をしっかり理解しよう - https://pick-up-tech.com/blog/webpack-config-js- %E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3 %82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82% 8A%E7%90%86%E8%A7%A3%E3%81%97%E3%82%88%E 3%81%86 54