概要
オンラインサロン IT_KINGDOM で、typescript で学んだことを備忘録としてメモしていきます。
学習内容
- リテラル型(Literal Types)
- Widening
リテラル型(Literal Types)
- Boolean, String, Number で使用
- 変数に入力する値を指定の値のみに固定する
// 使用例1
const isTrue: true = true; // boolean literal types： isTrueにtrue以外の値を入れるとエラー
const foo: "foo" = "foo"; // string literal types ： fooに"foo"以外の値を入れるとエラー
const numTwo: 2 = 2; // number literal types ： numTwoに2以外の値を入れるとエラー
const direction: "North" | "South" | "West" | "East" = "North"; // 'North', 'South', 'West', 'East'以外が入るとエラー
// 使用例2
const Home: NextPage = () => {
return <div><Component foo /></div>;
}
const Component = (props : { foo?: true}) => {
if (props.foo) {
return <div>a</div>;
}
Widening
- 型が自動で拡張する機能
-
constで宣言した Literal Types の変数を別の変数に代入すると、通常の型(string, number 等)で渡される -
letで宣言した Literal Types の変数では、Widening は発生しない
-
- Widening を防ぐために、
as const等を用いる。
// 例1 : constでLiteral Typesの型を宣言(Widening発生)
const foo: "foo" = "foo"; // Literal Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // WideningによりErrorにならない
// 例2 : letでLiteral Typesの型を宣言(Wideningが発生しない)
let foo: "foo" = "foo"; // Literal Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // 変数barの値は"foo"で固定されているため、Errorになる
// 例3 : as constでLiteral Typesの型を宣言(Wideningが発生しない)
const foo = "foo" as const; // as constで変数fooのLiteral Typesの型を宣言
let bar = foo; // 変数fooを変数barに代入
bar = "bar"; // 変数barの値は"foo"で固定されているため、Errorになる