LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

【typescript入門3】Literal Types・Wideningの概念

概要

オンラインサロン 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になる

参考サイト

typescript 公式サイト

オンラインサロン IT_KINGDOM

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0