🎄
TypeScript一人カレンダー 目次と索引
こんにちは、クレスウェア株式会社の奥野賢太郎 (@okunokentaro) です。本記事は『TypeScript 一人 Advent Calendar 2022』(TypeScript一人カレンダー) の目次と索引ページです。
本アドベントカレンダー内の各記事では、2022年12月、TypeScript 4.9の時点で解説しています。本アドベントカレンダーのすべての記事は、TypeScript初心者を脱し始めてもっと活用していきたいと願う読者層に向けていますので、最低限の前提は省略して記述しています。
目次
第1部 Conditional Types
-
1日目
ReturnType<T>
- Utility Types
ReturnType<T>
- どんなときに便利?
- 例1
- 例2
- 注意点
-
2日目
Awaited<T>
Awaited<T>
- どんなときに便利?
- 例1
- 例2
-
3日目
infer
と実例UnArray<T>
infer
-
ReturnType<T>
を読んでみる-
extends
がたくさん出てきて難しい?
-
- 実例
UnArray<T>
-
4日目 実例
runRenderHook()
- テストでちょっと困る型の扱い
- うーん?テストは書けたけど
-
runRenderHook()
- 戻り型アノテーションについて注意
-
5日目
Parameters<T>
,ConstructorParameters<T>
-
Parameters<T>
- Labeled Tuple Elements
- 得た型の使い方
- Indexed Access Types
- どんなときに便利?
ConstructorParameters<T>
-
第2部 Mapped Types
-
6日目
Pick<T, K>
-
Pick<T, K>
- keyof Type Operator
- どう使う?
- 例1
- 例2
-
-
7日目
Omit<T, K>
Omit<T, K>
- どう使う?
- 例
-
Pick<T, K>
との使い分け
-
8日目
Extract<T, U>
とExclude<T, U>
-
Extract<T, U>
- 業務でよく使う例1
- 業務でよく使う例2
Exclude<T, U>
-
-
9日目 Mapped Typesを活用する
- Mapped Types
- どうやって定義する?
- Template Literal Types
-
Pick<T, K>
の中身をみてみる
- Mapped Types
-
10日目
readonly
とReadonlyArray<T>
readonly
-
readonlyプロパティ
-
class
の場合の扱い
-
-
readonly
配列- 型の書き方
- 予約語ではない
- いつ使う?
- 余談
- Change Array by copy
- Records & Tuples
-
11日目 Mapping Modifiersと実例
Writable<T, K>
- テストでちょっと困る型の扱い2
Writable<T, K>
-
12日目
Partial<T>
Partial<T>
-
Omit<T, K>
と異なる点- プロパティ定義なし
- Optionalなプロパティ
-
T | undefined
のUnion
-
HasProperty
について理解する
-
13日目 実例
RecursivePartial<T>
-
Partial<T>
を活用する瞬間 -
RecursivePartial<T>
- なにをやっているか
- 再帰を活用しよう
-
-
14日目
Required<T>
,Readonly<T>
Required<T>
Readonly<T>
- いつ使う?
-
15日目
object
とRecord<K, T>
-
Record<K, T>
- プロパティとして指定しうる値の型
-
undefined
リスクに注意
- 縁の下の力持ち
- 任意のオブジェクト
- プロパティをひとつも含まないオブジェクト
- 業務ではあまり使わない
-
-
16日目
intrinsic
とTemplate Literal Typesintrinsic
- Intrinsic String Manipulation Types
- 業務ではどう使う?
- Template Literal Types における infer の挙動
- camelCaseからsnake_caseに変換する型を作る
- TypeScriptはチューリング完全
第3部 Assertion Types
-
17日目
NonNullable<T>
と実例assertExists()
NonNullable<T>
- nullの可能性を除去する実装
- コンポーネント内でNullableな変数を扱うハンドラ
- 雑なnull逃し
- 例外を投げるように変更
- Assertion Functions
assertExists()
exists()
- コンポーネントのハンドラを短く書く
- 嘘をつけてしまうため注意
-
Array.prototype.filter()
でのちょっと便利な書き方
-
18日目 Branded Typesを導入してみる
- Nominal TypingとStructural Typing
- Type Alias
- Nominal Typing Likeなclass
- Branded Types
- Branded Types が解決したこと
-
19日目 実例
FilledString
,UserId
- Branded Typesの改良
- Type Assertionsが使えるときと、使えないとき
- Type Assertionsが危険である状況
- Assertion Functionsを採用する
-
assertString()
とasString()
FilledString
- アレンジした
Brand<K, T>
で宣言するUserId
- Branded Typesの改良
-
20日目 String Literal Typesと
as const
enum
- String Literal TypesとUnion Types
-
isSuit()
関数を実装する- 定数を先に宣言しておくリファクタリング
- 定数から型定義を作りたい
as const
コラム
-
21日目
if
文とswitch
文は使い分ける?- ちょっとした疑問
- Narrowingとエディタの挙動
- Visual Studio Code
-
if
文 -
switch
文
-
- WebStorm
-
if
文 -
switch
文
-
- 結論、やはりどっちでもいい
-
22日目 実例
mapOrElse()
- ジェネリクスはどういうときに使うか
mapOrElse()
- 身近なジェネリクスを扱う例
-
23日目 実例
extends Error
- TypeScriptプログラミングにおけるエラー
- ECMAScript処理系で実行されるという事実からは逃れることができない
- 完璧なフォローはコストが高い
-
catch
ブロック内での型付け -
catch
のerr
はError
型インスタンスとは限らない - 暗黙的に
err: Error
であると扱えない理由 - 実例
extends Error
- Errorを継承しないクラスはおすすめしない
-
24日目 実例 再帰型定義と
RGBA
- 過去の頑張りを話します
- TypeScriptの限界
-
RGBA
改 - TypeScript 5.0
第4部 Conditional Types, Mapped Types, Assertion Typesを組み合わせる
-
25日目 実例
assertMatchedType()
- TypeScriptの集大成
- 不確実な環境での安心の獲得
- 不整合は常に起こりうる
- 防御的プログラミングと契約による設計
- 不整合はなぜ起こったか
- 内部起因か外部起因か
-
unknown
型を扱った信頼できる仕組みづくり- Assertion Functions
-
unknown
型を採用する欠点 - 開発のモチベーション
-
assertMatchedType()
の実装- 型のユニットテスト
- 登り方を検討する
RemoveNeverProperties<T>
Escape<T>
UnionToUnionTuple<T>
-
isMatchedType<T>()
のランタイム実装 assertMatchedType()
- 完成
- 総括
索引
記号
-
__brand
/ → Branded Types -
--strictNullChecks
/ → Strict Null Checks -
-readonly
/ → Mapping Modifiers -
!
/ → Non-null Assertion Operator -
? :
/ → Conditional Types -
?:
/ → Mapped Types -
""
(空文字列) /12
,19
-
[...arr]
/ → Spread Syntax -
[]
(空配列) /12
-
[0]
/ → Indexed Access Types -
[number]
/05
-
[object Object]
/18
-
[P in keyof T]
(Mapped Types) /09
-
+?
/ → Mapping Modifiers -
<T>
/ → ジェネリクス -
|
/ → Union Types -
${T[P]}
(Template Literal Types) /09
A
- Abstract Operations (ECMAScript) /
12
- Ajv /
11
,25
- Anders Hejlsberg (人名) / → アンダース・ヘルスバーグ(人名)
-
any
/04
,06
,10
,11
,15
,19
,23
,25
-
Array.prototype.filter()
/17
-
Array.prototype.includes()
/20
-
Array.prototype.map()
/09
,22
-
Array.prototype.reverse()
/10
-
Array.prototype.sort()
/10
-
Array<T>
/03
,22
-
as const
/20
-
as unknown as
/06
,19
-
as
(Key Remapping viaas
) /19
-
as
(Type Assertions) /18
,19
,20
-
asFilledString()
(筆者作) /19
-
assertExists()
(筆者作) /17
- Assertion Functions /
17
,19
,22
,25
,17
-
asserts v is T
/ → Assertion Signature -
assertString()
(筆者作) /19
-
asString()
(筆者作) /19
-
Awaited<T>
/02
,03
,13
B
-
ban-types
(typescript-eslint) /15
- bikeshed /
07
-
Boolean
/15
-
Brand<K, T>
/18
,19
- Branded Types /
18
,19
-
button
(HTML Element) /05
C
-
Capitalize<S>
/16
- Change Array by copy (TC39) /
10
-
class
/10
,18
,18
,23
- CMS /
08
-
ComputeRange<N, Result>
(引用) /24
- Conditional Types /
03
,08
,13
,16
,22
,25
-
const
Assertion /20
-
constructor
/10
,18
-
ConstructorParameters<T>
/05
-
convertOrElse()
(筆者作) /22
- Create missing branches (WebStorm) /
21
- CSS in JS /
24
- Custom Hook /
04
- C言語 /
21
D
- Dan Abramov (人名) /
23
-
delete
演算子 /11
- Deno /
23
- Design by Contract /
25
-
DetailedHTMLProps
/05
-
Double<T>
(筆者作) /09
E
- ECMAScript /
19
,21
,23
- ECMAScript仕様書 /
15
,23
- Electron /
02
- Emotion (CSS in JS) /
24
-
enum
/20
-
Equals<X, Y>
(引用) /25
-
Error
/23
- ESLint /
04
,15
-
eslint-disable-next-line
/04
-
Exclude<T, U>
/08
-
exists()
(筆者作) /17
-
explicit-function-return-type
(typescript-eslint) /04
-
extends
(Generic Constraints) /03
-
extends
(Inferring) /03
-
extends
(Subclass) /03
,23
-
Extract<T, U>
/08
F
G
H
I
- IDE /
21
-
if
文 /04
,20
,21
- immutable /
10
- Indexed Access Types /
20
-
infer
/03
,05
,13
,16
-
inferred
(筆者作) /04
-
instanceof
演算子 /17
,23
-
intrinsic
/16
- Intrinsic String Manipulation Types /
16
-
Item
(筆者作) /07
,18
,19
-
ItemId
(筆者作) /18
-
Iterable<T>
/03
J
K
L
- Labeled Tuple Elements /
05
- Language Service /
21
-
let
/01
,04
-
lib.dom.d.ts
/14
-
lib.es5.d.ts
/03
,16
- Literal Types /
20
,24
-
Lowercase<S>
/16
M
-
Map<K, V>
/15
-
mapOrElse()
(筆者作) /22
- Mapped Types /
09
,11
,12
,13
,14
,15
,16
,19
,22
,25
- Mapping Modifiers /
11
,12
,13
,14
- mattmccutchen (人名) /
25
- Michal Zalecki (人名) /
18
-
mui
/05
N
- Narrowing /
17
,21
,23
,25
-
never
/15
,17
- Next.js /
06
,18
-
node-sqlite
/02
- Nominal Typing /
18
- Nominal Typing Likeなclass /
18
- Non-null Assertion Operator /
18
-
NonNullable<T>
/17
-
null
/12
,13
,17
,19
- Null- and undefined-aware types /
17
-
null
チェック /17
-
Number
/15
O
- O/Rマッパー /
02
-
object
/15
-
Object
/15
-
Object.prototype.toString()
/18
-
Omit<T, K>
/07
,08
,11
,12
,13
-
onClick
/05
,17
- Optional / → Optional Properties
- Optional Properties /
12
,13
,14
,17
P
- Parameterized Test /
07
-
Parameters<T>
/05
-
Partial<T>
/12
,13
,14
,17
- PHP /
25
-
Pick<T, K>
/06
,07
,08
,09
- PostgreSQL /
25
-
private readonly
/10
-
Promise<T>
/02
,19
,22
-
protected readonly
/10
-
public readonly
/10
R
- React /
01
,04
,05
,17
,23
-
react-testing-library
/04
-
readonly
/10
,11
,14
-
Readonly<T>
/14
-
ReadonlyArray<T>
/03
,10
,14
- Recoil /
04
-
Record<K, T>
/15
- Records & Tuples (TC39) /
10
-
RecursivePartial<T>
(筆者作) /13
-
Reflect.has()
/12
-
renderHook()
/04
-
Required<T>
/14
,17
-
ReturnType<T>
/01
,03
,04
,05
- RGB /
24
-
RGBA
(筆者作) /24
-
runRenderHook()
(筆者作) /04
- Rust /
13
,18
,23
S
- Scala /
13
,18
-
SnakeCase<S>
(筆者作) /16
- Spread Syntax (
[...arr]
) /10
- SQLite /
02
-
strict
(tsconfig
) /12
,23
- Strict Null Checks /
12
,17
-
String
/15
- String Literal Types /
20
- Structural Subtyping / → Structural Typing
- Structural Typing /
18
,19
- Subclass /
03
- Subtyping /
19
- Suspense (React) /
23
- switch文 /
21
- SWR /
15
-
Symbol
/15
T
- t_wada (人名) /
25
-
T[P]
(Mapped Types) /09
- TC39 /
10
- Template Literal Types /
09
,16
,19
-
throw
/17
,23
-
try-catch
/01
,23
- Tuple / → Tuple Types
- Tuple Types /
01
,05
,10
,20
-
type
/ → Type Alias - Type Alias /
01
,06
,18
- Type Assertions /
18
,19
,20
- Type Compatibility /
18
- Type Predicate Signature /
17
,19
- Type Widening /
20
-
typeof
演算子 /01
,17
,20
- Typeof Type Operator /
01
- TypeScript 0.9 /
20
,22
- TypeScript 2.0 /
12
,17
- TypeScript 2.1 /
01
,06
,07
,09
,12
,14
,15
- TypeScript 2.8 /
08
,14
,17
- TypeScript 3.0 /
23
- TypeScript 3.1 /
05
- TypeScript 3.4 /
10
,20
- TypeScript 3.5 /
07
,12
- TypeScript 3.7 /
17
- TypeScript 4.0 /
05
,23
- TypeScript 4.1 /
16
,19
- TypeScript 4.4 /
23
- TypeScript 4.5 /
02
- TypeScript 5.0 /
24
- typescript-eslint /
04
- typo /
08
,20
U
-
UnArray<T>
(筆者作) /03
,05
-
Uncapitalize<S>
/16
-
undefined
/12
,13
,15
,17
,19
,22
-
Underscore<P>
(筆者作) /19
- Union / → Union Types
- Union Types /
05
,06
,08
,09
,12
,15
,20
,21
,24
,25
-
unknown
/06
,13
,23
,25
-
Uppercase<S>
/16
-
User
(筆者作) /06
,18
,19
-
UserId
(筆者作) /18
,19
- User-defined Type Guard /
17
,19
- Utility Types /
01
,02
,03
,05
,06
,07
,08
,09
,12
,14
,15
,16
,17
,22
V
W
あ行
- アンダース・ヘルスバーグ(人名) /
24
- 嘘のAssertion Functions /
17
- エイリアス型 / → Type Alias
- エディタ /
10
,21
- エラー /
23
,25
- エントロピー増大の法則 /
25
か行
- 買い物カゴ /
04
,07
,08
,17
- 型同士の区別 /
18
- 型のユニットテスト /
25
- 可読性 /
18
,21
- 契約による設計 /
25
- コードレビュー /
07
,17
- コードレビュアー / → コードレビュー
- 公称型 /
18
- 構造的部分型 /
18
- コピペ /
01
,04
- コピペ /
19
,20
さ行
た行
- 単体テスト /
04
- チューリング完全 /
16
,24
- 重複 / → コピペ
- デシリアライズ (JSON) /
18
,23
- テスト /
04
- テスト /
06
,07
,11
,17
,20
- ドメイン /
07
- トランプのスート /
20
な行
- 直し忘れ / → typo
- 任意のオブジェクト /
15
は行
- バリデーションエラー /
25
- 表記ゆれ /
06
- プリミティブ値 /
18
,19
- プロパティをひとつも含まないオブジェクト /
15
- プロパティ値の上書き /
07
- ヘッドレスCMS /
25
- 防御的プログラミング /
25
- 保守性 /
18
ま行
や行
- 予約語 /
10
ら行
- リテラル型 / → Literal Types
- レガシー案件 /
06
Discussion