Typescript 學習筆記 - Section 5

發佈時間

Section Overview#

這章節主要會介紹如何使用 Typed Arrays

Arrays in Typescript#

定義: 在 Typescript 的世界裡, array 裡面的 element 應該都維持一定程度上的相同型別

Examples#

// typescript inference const carMakers: string[]
const carMakers = ['ford', 'toyata', 'chevy'];

// or typescript annotation
const carMakers: string[] = ['ford', 'toyata', 'chevy'];
const carMakers: string[] = [];

// typescript inference const carMakers: any[]
const carMakers = [];

// const dates: Date[]
const dates = [new Date(), new Date()];

// const carsByMake: string[][]
const carsByMake = [['f150'], ['corolla'], ['camaro']];

Why Typed Array?#

  • Typescript(TS)可以幫助我們判斷從 array 取出來的值是什麼型別
  • TS 可以幫助我們將錯誤型別的值加到 array 裡
  • 當在使用 array.map, 'forEach', 'reduce'的時候 TS 可以幫助我們判斷型別
  • array 仍有一定的彈性加入不同型別的值

Examples#

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

// Prevent incompatible values
// get ts lint error
carMakes.push(100);

// Help with 'map'
carMakes.map((car: string): string => {
  // get methods belongs to string
  return car;
});

Multiple Types in Arrays#

// Flexible types
const importantDates: (Date | string)[] = [new Date()];
importantDates.push('2030-10-10');
importantDates.push(new Date());
// get ts lint error
importantDates.push(100);

When to Use Typed Arrays#

Anytime~