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