LoginSignup
1
0

More than 1 year has passed since last update.

TypeScript 交差 / 共有体 / リテラル / 列挙型

Last updated at Posted at 2022-03-21

intersection型(交差型)

既存の型を利用して新たな型を作成することができる型となります。

type Pitcher1 = {
  throwingSpeed: number;
};
type Batter1 = {
  battingAverage: number;
};

const DaimajinSasaki: Pitcher1 = {
  throwingSpeed: 154,
};
const OchiaiHiromitu: Batter1 = {
  battingAverage: 0.367,
};

例として上記に二つの型エイリアスを定義しています。
今回は、球速を示すthrowingSpeed と 打率を示すbattingAverageの両方を持つ型を新たに作成したいと思います。

type TwoWayPlayer = Pitcher1 & Batter1;

const OtaniShouhei: TwoWayPlayer = {
  throwingSpeed: 165,
  battingAverage: 0.286,
};

新たにTwoWayPlayerという型エイリアスを定義し、その中で既存の型を&で連結することで型を合成することができます。
また、既存の型を流用することでメンテナンス向上にもつながります。

union型(共有体型)

いずれかの型を指定するときに使用する型となります。

let value: number | string = 1;
value = 'foo';
value = 100;

指定の型をパイプ記号「|」で区切って記述することで、今回の場合、value数値、もしくは文字列であることを宣言しています。

Literal型

特定の値だけを代入可能にする型となります。

文字列リテラル

let dayOfTheWeek: '' | '' | '' | '' | '' | '' | '' = '';
dayOfTheWeek = '';
dayOfTheWeek = '31'; // 型 '"31"' を型 '"日" | "月" | "火" | "水" | "木" | "金" | "土"' に割り当てることはできません。

数値リテラル

let month: 1|2|3|4|5|6|7|8|9|10|11|12 = 1;
month = 12;
month = 13; // 型 '13' を型 '1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12' に割り当てることはできません。

真偽値リテラル

let TRUE: true = true;
TRUE = false; // 型 'false' を型 'true' に割り当てることはできません。

今回の場合、trueのみ代入可能にしています。

enum型(列挙型)

複数の定数を一つにまとめて定義して管理することができる型となります。

数値の列挙

enum Months {
  January = 1,
  February,
  March,
  April,
  May,
  Jun,
  July,
  August,
  September,
  October,
  November,
  December,
}

console.log(Months.January); // 1
console.log(Months.December); // 12

0から順にインクリメントされるため、先頭のJanuary1をオーバーライドして各要素に適切な数値が設定されるようにしています。

文字列の列挙

enum COLORS {
  RED = '#FF0000',
  WHITE = '#FFFFFF',
  GREEN = '#008000',
  BLUE = '#0000FF',
  BLACK = '#000000',
}

let green = COLORS.GREEN;
console.log({ green }); // { green: '#008000' }

参考教材

1
0
0

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
  3. You can use dark theme
What you can do with signing up
1
0