Make it to make it

いろいろ作ってアウトプットするブログ

TypeScript学習3(Typed arrays)

TSでarrayを扱う上で重要なポイント

  • TS can do type inference when extracting values from an array
  • TS can prevent us from adding incompatible values to the array
  • We can get help with map, forEach, reduce, functions
  • Flexible - arrays can still contain multiple different types

配列(Array)の記述方法

const carMakers: string[] = ['ford', 'toyota', 'chevy'];
const dates = [new Date(), new Date()];

const carsByMake: string[][] = [];

// Help with inferences when extracting values
const car = carMakers[0];
const myCar = carMakers.pop();

// Prevent incompatible values
carMakers.push(100); // Throws error

// Help with `map`
carMakers.map(
  (car: string): string => {
    return car.toUpperCase();
  }
);

const importantDates: (Date | string)[] = [new Date(), '2030-10-10'];
importantDates.push('2030-10-10');
importantDates.push(new dates());

Tuple

Array-like structure where each element represents some property of record.

配列の中でも、決まった順序である特定の型の値が格納されるというものに関しては、Tupleという型定義を行う。

const drink = {
  color: 'brown',
  carbonated: true,
  sugar: 40
};

const pepsi = ['brown', true, 40];

例えば上記のようなコードの書き方だと、配列の値はstring, number, booleanのどれでも取れるということになってしまい、順番も自由にできてしまう。そこでTupleを用いてannotationを行う。

const drink = {
  color: 'brown',
  carbonated: true,
  sugar: 40
};

type Drink = [string, boolean, number];

const pepsi: Drink = ['brown', true, 40];
const sprite: Drink = ['clear', true, 40];

だがここでよくよく考えてみる。

そもそも配列の順序が固定されていて値の型も固定ならば、配列よりオブジェクトを書いたほうが有効なはずである。 なので、あまりTapleを使う出番はないであろう。