TS - tablice, tuple

Kolejne lekcje wprowadzające do TypeScript. Na razie dopiero się rozkręcamy, ale musimy przez ten początkowy, nudny materiał się przebić. Teraz – tablice, tuple.

Ok, przykład z użyciem nawiasów ostrych:

let fruits: Array<string>;
fruits = ['Apple', 'Orange', 'Banana']; 

let ids: Array<number>;
ids = [23, 34, 100, 124, 44];

A teraz bardziej normalne (moim zdaniem) podejście:

let fruits: string[] = ['Apple', 'Orange', 'Banana'];

Jak byśmy chcieli coś o indeksie poza zakresem (np. 3 w tym wypadku) to mamy undefined jak w czystym JS (to swoją drogą ciekawe i możemy zauważyć, że w JS nie mamy index out of range error czy czegoś takiego).

Ok, a teraz tablica, która jest readonly:

const names: Readonly<string[]> = ['John', 'Jane'];
//names.push('Jim');
//names.pop();

Kiedyś było niby coś takiego jak ReadonlyArray, ale to, co powyżej działa i nie potrzebuje dodatkowych typów. Swoją drogą jak nie mamy w tsconfig noemitonerrors na true to kod się skompiluje (choć error wyskoczy) i będziemy mieli to w JS wykonane, tylko edytor będzie zaznaczać błąd.

Ok, teraz tablica nie jako zmienna, ale argumenty przekazywane do funkcji:

const addMany = (...numbers: number[]):number => {
    return numbers.reduce((curResult, curValue) => {
      return curResult + curValue;
    }, 0);
  };
  
  const addedNumbers = addMany(5, 10, 2, 3.7);
  console.log(addedNumbers);

Po kompilacji mamy to:

"use strict";
const addMany = (...numbers) => {
    return numbers.reduce((curResult, curValue) => {
        return curResult + curValue;
    }, 0);
};
const addedNumbers = addMany(5, 10, 2, 3.7);
console.log(addedNumbers);

A tu przykład typu any:

 const logMany = (...args: any[]): void => {
    args.forEach(arg => console.log(arg));
  };
  
  logMany('abc', 1, 2, 3, '4');

Any pozwala na łączenie typów. Możemy to nieco zawęzić do jakichś określonych typów:

 const logMany2 = (...args: (number|string)[]): void => {
    args.forEach(arg => console.log(arg));
  };
  
  logMany2('abc', 1, 2, 3, '4');

Pamiętać cały czas musimy, że po kompilacji to jedno i to samo:

const logMany = (...args) => {
    args.forEach(arg => console.log(arg));
};
logMany('abc', 1, 2, 3, '4');
const logMany2 = (...args) => {
    args.forEach(arg => console.log(arg));
};
logMany2('abc', 1, 2, 3, '4');

I teraz tak – any bądź typy z tą unią (tą kreską) pozwalają na mieszanie typów. To nie to samo, co powiedzenie – typ dowolny, ale ten sam typ w każdym elemencie.

Aby tak zawęzić, czyli typ dowolny, ale ten sam, musimy użyć typów generycznych:

function arrayEl<T>(...args: T[]): void {
    args.forEach(arg => console.log(arg));
}

arrayEl<number>(1,2,3);

I teraz typ dowolny (ten typ, który wpisaliśmy do nawiasów ostrych), ale jeden i ten sam dla wszystkich elementów. Typy generyczne też niedługo sobie poznamy, na razie robimy taki TS 101 tylko.

Mamy też taki typ jak tupla, jeżeli ogarniamy tuple w Pythonie to musimy zapamiętać, te w TS są mutowalne. Natomiast koncepcja jest taka, że jest tablica określonej wielkości i określonych typów:

var employee: [number, string] = [1, "Steve"];
var person: [number, string, boolean] = [1, "Steve", true];

Możemy też mieć tuple array:

var employee: [number, string][];
employee = [[1, "Steve"], [2, "Bill"], [3, "Jeff"]];

Więcej TS już niedługo.

TS – tablice, tuple