Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript勉強会
Search
hy094
August 16, 2022
Technology
0
1.7k
TypeScript勉強会
hy094
August 16, 2022
Tweet
Share
More Decks by hy094
See All by hy094
20231220_FETechCafe_今年のフロントエンドの流行を語る
hy094
0
230
社内TypeScript勉強会を開催した話
hy094
0
550
Other Decks in Technology
See All in Technology
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Connect 100+を支える技術
kanyamaguc
0
200
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
200
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Music & Morning Musume
bryan
46
6.6k
Code Review Best Practice
trishagee
69
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
TypeScript勉強会資料
はじめに - この勉強会はTypeScript初心者向けの勉強会です - Javaがある程度わかる、JSは少しわかる、TSはよくわからな い人をターゲットにしています - TypeScript移行を目的としています - クラスなど、省略している箇所が多々あります
2
目次 - TypeScriptとは - 型 - 基本的な構文 - 関数 -
インターフェース - 高度な型 - モジュールシステム - ビルド関連 - 参考 3
TypeScriptとは ・JavaScriptに対する“静的型付け” → 型付けのメリットは? ① 型安全性 ② ドキュメント化/入力補完 ※JSに変換するので実行時には TSの要素はなくなります!!
4 const str: string = “foo”; 赤字の部分を型注釈といい、strがstring 型であることを示しています。 型推論も充実しており、赤字の部分は 省略可能です。ただし省略すると結果 が微妙に異なります。(詳しくは後程) 推論版: 注釈版:
TypeScriptとは - 型付けのメリット① ① 型安全性 - コンパイラが型チェックして間違ったプログラムを検出してくれ る仕組みのこと - Javaなどと同じようにコンパイルエラーが出る
5
TypeScriptとは - 型付けのメリット② ② ドキュメント化/入力補完 - 型情報がソースコードに記載されるため、読解する補助となる - 型情報を基にIDEが入力を補助してくれる機能がある -
以下の場合string型が持っているメソッドなどが補完される 6
基本的な構文① - 前提知識 ・文と式 - 大体Javaとおなじ - 式には結果があり、文には結果がない ・変数宣言 -
const, letを使用する(varは非推奨) - letは再代入可能 & 宣言時に値を代入する必要なし - →多用すると読みにくくなるので、基本はconst - 型注釈を活用する 7
型 - プリミティブ型 ⓪. プリミティブ型の種類 - 文字列・数値・真偽値・undefined・null (・BigInt・シンボル) ①. 文字列(string)
- シングルクォート(‘’)orダブルクォート(“”)で囲む文字列リテラル - 機能上の差異はないので好みでOK - バッククォート(``)で囲むテンプレートリテラル - 改行できること、変数を埋め込めることが違い 8 str2は↓のようになります abc def
型 - プリミティブ型 ②. 数値(number)(※BigIntは省略) - 整数・小数の区別がない - “_”の使用が可能 -
NaN(Not a Number) - Number(“aaa”)などの戻り値 ③. 真偽値(boolean) - ture / false で真偽値を表す - 型の変換表→ 9 https://typescript-jp.gitbook.io/deep-dive/recap/truthy
型 - プリミティブ型 ④. undefined / null - 双方ともそれ自体が値の名前 -
両方とも「データがない」ことを示す値 - 基本的にはundefinedを利用する - typeof nullがobjectとなる(バグ) - undefinedは自然発生する 10
型 - リテラル型 ・リテラル型とは - プリミティブ型を細分化したもの - 文字列・数値・真偽値がある - “abc”
や 2 や true といった名前の型 - 最初に紹介した推論はリテラル型に推論されている 11
型 - object型 ・object型 - プリミティブ型以外の型は全てobject型に分類される - クラスそのものや配列・正規表現・関数なども含む - 言い換えると「object型」とは、「プリミティブ型以外の型なら
なんでも代入できる型」と言える - object型にはプロパティの情報がない 12
型 - オブジェクトリテラル ・オブジェクトリテラル - 「{}」で簡単にオブジェクトを生成できる記法 - もちろんオブジェクトリテラルを型にすることも可能 13 obj1はnameとageをもっていることをコンパイラに注釈で伝え
ているため補完が効きます。(obj2も推論されるため同様) “?”は省略可能なプロパティを示しています。 obj1の型情報
型 - オプショナルチェイニング ・オプショナルチェイニング - 「.」ではなく「?.」を使用する(例: obj?.prop) - オブジェクトがnull, undefinedでも使用可能
14 null, undefinedの場合 以降の呼び出しを まとめて飛ばす効果が ある
型 - 配列 ・配列 - 基本的にはJavaなど他言語と同じ - Type[]かArray<T>で型注釈する - 機能的には同じなので統一してあればどちらでもOK
- メソッドも多く実装されている - MDNを参照のこと 15
型 - unknown, any, never ・ unknown, any - any
- どんな型の代入も許す型 - unknown - 型が何かわからないときに使う型 - 型安全なanyと言われている - never - 何も代入できない - 何にでも代入できる 16
型 - ユニオン(合併)型 ・ユニオン型 - 「型Tまたは型U」のような表現ができる型 - 集合で言うところの合併(和) - 2つ以上の型をパイプ“|”で繋いで記述する
17
型 - インターセクション(交差)型 ・インターセクション型 - 「型Tかつ型U」のような表現ができる型 - 集合で言うところの交差(積) - 2つ以上の型をアンド“&”で繋いで記述する
- プリミティブ型の交差型を作るとnever型になる 18
型 - 階層構造 - 参考程度にTypeScriptの型の階層構造を添付します。 19 https://knmts.com/as-a-engineer-52/
基本的な構文② - 演算子 - 算術演算子・比較演算子 - 基本的にJavaと同じ - 算術演算子“+”で文字列結合も可能 -
冪乗は「**」が使用可能 - 等価演算子 - 原則「===」や「!==」を使用する - 「==」や「!=」は使わない方が無難 - NaNと比較すると常にfalseになる 20
基本的な構文③ - 制御構文 - 条件分岐 - if文 / else /
else if / switch文 - 基本Javaと同様 - 後述の型ガードに役立つ - 三項演算子を使う場合も多い - ループ - while文 / for文 - これもJavaと同様 - 配列操作時にはfor-of文 21
関数 ・TypeScriptでの関数の基本的な書き方(関数宣言) 22 function 関数名(引数1: 型, 引数2: 型): 戻り値の型{ return;
} function testFunc(hoge: number, fuga: string): void{ return; }
関数 - 関数式 ・関数宣言との大きな違いは式であること - 変数に代入して使用する - アロー関数式でも関数の作成が可能 23
関数 - デフォルト引数 ・引数が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 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]
関数 - this引数 ・アロー関数以外の関数とクラスのメソッドは第一引数にthisを持つ ことが出来る - thisはコンテキストによって変わるため、TypeScriptで明示化する 26 function testThisFunc(this:
string, hoge: number){ return this; } console.log(testThisFunc.call("this", 0)) // "this"
インターフェース - typeとinterface ・TypeScriptでは型宣言の方法が二種類ある - type - 型制約を強めるイメージ - 交差、合併型が使用できる
- 複雑な型宣言に向いている - interface - 型を拡張するイメージ - 継承(extends)が使用できる - クラス、オブジェクトの型宣言に向いている 27
インターフェース - typeとinterface ・typeでは同じ型名を付けることができない 28 typeTest.ts
インターフェース - typeとinterface ・interfaceでは同じ型名だと型がマージされる 29 interfaceTest.ts
インターフェース - typeとinterface ・typeでAPIレスポンスの型を付けた例 30 typeTest.ts typeTest.ts
インターフェース - typeとinterface ・interfaceでAPIレスポンスの型を付けた例 31 interfaceTest.ts interfaceTest.ts
インターフェース - typeとinterface ・type vs interfaceの結論 - 一方でしか出来ないということはほとんどない - どちらが良い、悪いではなく適材適所
※可能であればプロジェクトで統一するのが良さそう(個人的意見) 32
高度な型 - 型ガード ・型ガードとは - 条件分岐でTypeScriptの型を絞り込む機能 - 型によって処理を変えたい場合に有効 - 早期returnにも対応している
33 typeGuardTest.t s
高度な型 - 型アサーション ・型アサーションとは - as 型名で型推論を上書きする機能 - 概念はキャストに近いが、値は書き換えない -
強力だが、バグを生みやすいため注意が必要 34
モジュールシステム ・モジュールシステムとは - import、export宣言によって他のモジュールの読み込みを行う - TypeScriptでは型もモジュールとして扱える Q.通常のモジュールと型のモジュールの区別がつきにくいのでは? A.import時にtypeと宣言できるので問題なし! 35 types/animal.ts
animalTest.ts
モジュールシステム - type宣言 ・Type-Only Imports and Export (TypeScript3.8) ・type Modifiers
on Import Names(TypeScript4.5) 36 animalTest.ts animalTest.ts
モジュールシステム - npmパッケージモジュール ・npmとは - Node.js提供のパッケージマネージャ - サードパーティ製のパッケージ(モジュール)をインストール可能 - TypeScriptの型定義が含まれているものもある
Q. パッケージにTypeScriptの型定義がない場合はどうする? 1. DefinitelyTypedシステムから@typesをパッケージをインストールす る 2. 型定義を自作する 37
モジュールシステム - DefinitelyTyped ・DefinitelyTypedシステム - Microsoftが運営しているTypeScript型定義リポジトリ - @types/〇〇(パッケージ名)でインストール可能 - 基本的に有志によって製作されている
大原則: 型定義がパッケージに無い場合は@types/〇〇がないか検索! https://www.typescriptlang.org/dt/search?search= 38
モジュールシステム - 自作の型定義ファイル ・型定義ファイルの作り方 1. 〇〇.d.tsファイルを作成(慣例) 2. declare module “モジュール名”で宣言
3. 変数や関数を型定義し、export 39 myModule.d.ts
ビルド関連 ・デプロイ時に必要なこと:TypeScript→JavaScriptへのコンパイル 1. TypeScriptコンパイラをインストール $ npm install --save-dev tsc 2.
tsconfig.jsonファイルを作成 $ npx tsc --init 3. tscコマンドを実行 $ npx tsc 対象のファイル 40
ビルド関連 - tsconfig.json 41
ビルド関連 - 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”]
ビルド関連 - 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 クラスプロパティの初期化を必須にする。
ビルド関連(再掲) ・デプロイ時に必要なこと:TypeScript→JavaScriptへのコンパイル 1. TypeScriptコンパイラをインストール $ npm install --save-dev tsc 2.
tsconfig.jsonファイルを作成 $ npx tsc --init 3. tscコマンドを実行 $ npx tsc 対象のファイル 44
ビルド関連 - webpackタスクランナー ・webpackタスクランナーを使用すると、アプリのデプロイが楽に 1. webpackタスクランナーをインストール $ npm install -g
webpack 2. webpack.config.jsファイルを作成 $ touch webpack.config.js 3. webpackを実行 $ webpack 45
ビルド関連 - webpack.config.js(全体) 46
ビルド関連 - webpack.config.js(entry) 47 // ビルド時の開始点となるJSファイルを指定 entry: { 'src/index.js': 'src/index.ts',
},
ビルド関連 - webpack.config.js(module) 48 // モジュールの設定 module: { rules: [
{ // 適用する拡張子 test: /¥.(ts|tsx)$/, // 除外するディレクトリ exclude: /node_modules/, // 適用するコンパイラ use: { loader: 'ts-loader', options: { transpileOnly: true, } } }, ], },
ビルド関連 - webpack.config.js(resolve) 49 // import文の拡張子設定 resolve: { extensions: ['.ts',
'.js', '.tsx', '.jsx'], alias: { }, },
ビルド関連 - webpack.config.js(output) 50 // ビルドファイルの出力先設定 output: { libraryTarget: 'umd',
filename: '[name]', path: `src/dist` }
ビルド関連 - webpackタスクランナー(再掲) ・webpackタスクランナーを使用すると、アプリのデプロイが楽に 1. webpackタスクランナーをインストール $ npm install -g
webpack 2. webpack.config.jsファイルを作成 $ touch webpack.config.js 3. webpackを実行 $ webpack 51
参考 - プログラミングTypeScript - https://www.oreilly.co.jp/books/9784873119045/ - プロを目指す人のためのTypeScript入門 - https://gihyo.jp/book/2022/978-4-297-12747-3 -
サバイバルTypeScript - https://typescriptbook.jp/ 52
参考 - 【TypeScript】型定義でのinterfaceとtypeの違い - https://yutaro-blog.net/2021/10/08/typescript-interface-type/ 53
参考 - よく分からなかったので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