リテラル型
リテラルはJavaScriptのプリミティブである値そのものです。
文字列リテラル
型として文字列リテラルを使用できます。例えば：
1
let foo: 'Hello';
Copied!
ここでは
fooという名前の変数を作成しました。それに代入されるリテラル値は'Hello'のみを許可します。これは以下のとおりです：1
let foo: 'Hello';
2
foo = 'Bar'; // Error: "Bar" is not assignable to type "Hello"
Copied!
それらは単独ではあまり使い所がありませんが、ユニオン型で結合して、強力な(そして便利な)抽象化を作成することができます。
1
type CardinalDirection =
2
| "North"
3
| "East"
4
| "South"
5
| "West";
6
7
function move(distance: number, direction: CardinalDirection) {
8
// ...
9
}
10
11
move(1,"North"); // Okay
12
move(1,"Nurth"); // Error!
Copied!
その他のリテラル型
TypeScriptは
booleanとnumberリテラル型もサポートしています。1
type OneToFive = 1 | 2 | 3 | 4 | 5;
2
type Bools = true | false;
Copied!
推論
かなり一般的に
Type string is not assignable to type "foo"というエラーを受け取ります。次の例はこれを示しています。1
function iTakeFoo(foo: 'foo') { }
2
const test = {
3
someProp: 'foo'
4
};
5
iTakeFoo(test.someProp); // Error: Argument of type string is not assignable to parameter of type 'foo'
Copied!
これは、
testが{someProp: string}型であると推定されるためです。この問題を解決するには、シンプルな型アサーションを使用して、TypeScriptに以下のようにリテラルを推測させます。1
function iTakeFoo(foo: 'foo') { }
2
const test = {
3
someProp: 'foo' as 'foo'
4
};
5
iTakeFoo(test.someProp); // Okay!
Copied!
あるいは、型アノテーションを使うことで、宣言した時点でTypeScriptが正しい型を推論するのを助けることができます。
1
function iTakeFoo(foo: 'foo') { }
2
type Test = {
3
someProp: 'foo',
4
}
5
const test: Test = { // Annotate - inferred someProp is always === 'foo'
6
someProp: 'foo'
7
};
8
iTakeFoo(test.someProp); // Okay!
Copied!
ユースケース
文字列型の有効な使用例は次のとおりです。
文字列ベースの列挙型
TypeScript enumsは数字ベースです。上記の
CardinalDirectionの例のようにユニオン型の文字列リテラルを使用して文字列ベースの列挙型を模倣することができます。次の関数を使ってKey:Value構造体を生成することさえできます：1
/** Utility function to create a K:V from a list of strings */
2
function strEnum<T extends string>(o: Array<T>): {[K in T]: K} {
3
return o.reduce((res, key) => {
4
res[key] = key;
5
return res;
6
}, Object.create(null));
7
}
Copied!
そして、
keyof typeofを使ってリテラル型の合成を生成します。完全な例を次に示します。1
/** Utility function to create a K:V from a list of strings */
2
function strEnum<T extends string>(o: Array<T>): {[K in T]: K} {
3
return o.reduce((res, key) => {
4
res[key] = key;
5
return res;
6
}, Object.create(null));
7
}
8
9
/**
10
* Sample create a string enum
11
*/
12
13
/** Create a K:V */
14
const Direction = strEnum([
15
'North',
16
'South',
17
'East',
18
'West'
19
])
20
/** Create a Type */
21
type Direction = keyof typeof Direction;
22
23
/**
24
* Sample using a string enum
25
*/
26
let sample: Direction;
27
28
sample = Direction.North; // Okay
29
sample = 'North'; // Okay
30
sample = 'AnythingElse'; // ERROR!
Copied!
既存のJavaScript APIのモデリング
例えば CodeMirrorエディタには
readOnlyオプションがあります。これは、booleanまたはリテラル文字列nocursor(有効値: true、false、"nocursor")です。それは次のように宣言することができます：1
readOnly: boolean | 'nocursor';
Copied!