判別可能なUnion型
Union型の判別(Discriminated Union)
例として、
SquareとRectangleのUnionを考えてみましょう。ここではkind（特定のリテラル型）は両方のUnion型のメンバに存在しています:1
interface Square {
2
kind: "square";
3
size: number;
4
}
5
6
interface Rectangle {
7
kind: "rectangle";
8
width: number;
9
height: number;
10
}
11
type Shape = Square | Rectangle;
Copied!
判別用のプロパティ(ここでは
kind)に対して、型安全なチェック(==、===、!=、!==)またはswitchを使用すると、TypeScriptはあなたのために、そのリテラル型を持つオブジェクトの型を特定し、型の絞り込みを行います :)1
function area(s: Shape) {
2
if (s.kind === "square") {
3
// Now TypeScript *knows* that `s` must be a square ;)
4
// So you can use its members safely :)
5
return s.size * s.size;
6
}
7
else {
8
// Wasn't a square? So TypeScript will figure out that it must be a Rectangle ;)
9
// So you can use its members safely :)
10
return s.width * s.height;
11
}
12
}
Copied!
網羅チェック(Exhaustive Checks)
一般論として、あなたはユニオンのすべてのメンバに対して漏れなくコード(またはアクション)が存在していることを確認したいでしょう。
1
interface Square {
2
kind: "square";
3
size: number;
4
}
5
6
interface Rectangle {
7
kind: "rectangle";
8
width: number;
9
height: number;
10
}
11
12
// Someone just added this new `Circle` Type
13
// We would like to let TypeScript give an error at any place that *needs* to cater for this
14
interface Circle {
15
kind: "circle";
16
radius: number;
17
}
18
19
type Shape = Square | Rectangle | Circle;
Copied!
Circleのインスタンスが渡された場合に悪いことが起きる例：1
function area(s: Shape) {
2
if (s.kind === "square") {
3
return s.size * s.size;
4
}
5
else if (s.kind === "rectangle") {
6
return s.width * s.height;
7
}
8
// Would it be great if you could get TypeScript to give you an error?
9
}
Copied!
これをチェックするには、フォールスルー(else)を追加し、そのブロックの推論された型が
never型と互換性があるかを確認するだけです。たとえば、その網羅チェックを追加すると、ナイスなエラーが発生します:1
function area(s: Shape) {
2
if (s.kind === "square") {
3
return s.size * s.size;
4
}
5
else if (s.kind === "rectangle") {
6
return s.width * s.height;
7
}
8
else {
9
// ERROR : `Circle` is not assignable to `never`
10
const _exhaustiveCheck: never = s;
11
}
12
}
Copied!
これによって、あなたは新しいケースに対応することを強制されます：
1
function area(s: Shape) {
2
if (s.kind === "square") {
3
return s.size * s.size;
4
}
5
else if (s.kind === "rectangle") {
6
return s.width * s.height;
7
}
8
else if (s.kind === "circle") {
9
return Math.PI * (s.radius **2);
10
}
11
else {
12
// Okay once more
13
const _exhaustiveCheck: never = s;
14
}
15
}
Copied!
スイッチ(Switch)
ヒント：もちろん、
switchステートメントでも同じことが可能です：1
function area(s: Shape) {
2
switch (s.kind) {
3
case "square": return s.size * s.size;
4
case "rectangle": return s.width * s.height;
5
case "circle": return Math.PI * s.radius * s.radius;
6
default: const _exhaustiveCheck: never = s;
7
}
8
}
Copied!
strictNullChecks
strictNullChecksを使用して網羅チェックを行っている場合、TypeScriptは"not all code paths return a value"というエラーを出すかもしれません。そのエラーを黙らせるには、シンプルに
_exhaustiveCheck変数(never型)を返すだけです:1
function area(s: Shape) {
2
switch (s.kind) {
3
case "square": return s.size * s.size;
4
case "rectangle": return s.width * s.height;
5
case "circle": return Math.PI * s.radius * s.radius;
6
default:
7
const _exhaustiveCheck: never = s;
8
return _exhaustiveCheck;
9
}
10
}
Copied!
網羅チェックの中で例外を投げる
引数として
neverを取る関数を書くことができます(したがって、この関数はneverとして推論された変数で呼ばれた場合にのみ呼ばれます)。そして、次のように、関数の本体が実行された場合に例外を投げるように書きます。1
function assertNever(x:never): never {
2
throw new Error('Unexpected value. Should have been never.');
3
}
Copied!
以下に、
area関数とともに使用する例を示します。1
interface Square {
2
kind: "square";
3
size: number;
4
}
5
interface Rectangle {
6
kind: "rectangle";
7
width: number;
8
height: number;
9
}
10
type Shape = Square | Rectangle;
11
12
function area(s: Shape) {
13
switch (s.kind) {
14
case "square": return s.size * s.size;
15
case "rectangle": return s.width * s.height;
16
// If a new case is added at compile time you will get a compile error
17
// If a new value appears at runtime you will get a runtime error
18
default: return assertNever(s);
19
}
20
}
Copied!
Retrospective Versioning
次のような形のデータ構造があるとします。
1
type DTO = {
2
name: string
3
}
Copied!
そして、
DTOをさまざまな場所で使用した後に、nameという名前は良くない選択だったことに気が付いたとします。このような場合には、リテラルの数値(または望むなら文字列)を追加したDTOの新しいユニオン型を定義することで、後から型にバージョニングを追加することができます。strictNullChecksを有効にしていれば、バージョン0をundefinedとマークするだけで、そのバージョンの型が使われているかどうかのチェックを自動的に行えます。1
type DTO =
2
| {
3
version: undefined, // version 0
4
name: string,
5
}
6
| {
7
version: 1,
8
firstName: string,
9
lastName: string,
10
}
11
// Even later
12
| {
13
version: 2,
14
firstName: string,
15
middleName: string,
16
lastName: string,
17
}
18
// So on
Copied!
このように定義したDTOは、次のように利用します。
1
function printDTO(dto:DTO) {
2
if (dto.version == null) {
3
console.log(dto.name);
4
} else if (dto.version == 1) {
5
console.log(dto.firstName,dto.lastName);
6
} else if (dto.version == 2) {
7
console.log(dto.firstName, dto.middleName, dto.lastName);
8
} else {
9
const _exhaustiveCheck: never = dto;
10
}
11
}
Copied!
Redux
ユニオン判別を活用しているポピュラーなライブラリはreduxです。
1
import { createStore } from 'redux'
2
3
type Action
4
= {
5
type: 'INCREMENT'
6
}
7
| {
8
type: 'DECREMENT'
9
}
10
11
/**
12
* This is a reducer, a pure function with (state, action) => state signature.
13
* It describes how an action transforms the state into the next state.
14
*
15
* The shape of the state is up to you: it can be a primitive, an array, an object,
16
* or even an Immutable.js data structure. The only important part is that you should
17
* not mutate the state object, but return a new object if the state changes.
18
*
19
* In this example, we use a `switch` statement and strings, but you can use a helper that
20
* follows a different convention (such as function maps) if it makes sense for your
21
* project.
22
*/
23
function counter(state = 0, action: Action) {
24
switch (action.type) {
25
case 'INCREMENT':
26
return state + 1
27
case 'DECREMENT':
28
return state - 1
29
default:
30
return state
31
}
32
}
33
34
// Create a Redux store holding the state of your app.
35
// Its API is { subscribe, dispatch, getState }.
36
let store = createStore(counter)
37
38
// You can use subscribe() to update the UI in response to state changes.
39
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
40
// However, it can also be handy to persist the current state in the localStorage.
41
42
store.subscribe(() =>
43
console.log(store.getState())
44
)
45
46
// The only way to mutate the internal state is to dispatch an action.
47
// The actions can be serialized, logged or stored and later replayed.
48
store.dispatch({ type: 'INCREMENT' })
49
// 1
50
store.dispatch({ type: 'INCREMENT' })
51
// 2
52
store.dispatch({ type: 'DECREMENT' })
53
// 1
Copied!
これをTypeScriptで使うことにより、型安全性とリファクタ容易性、そしてコードの自己文書化を図ることができます。
最終更新 2yr ago