Ty­peSc­ript-tau­lu­koi­den luominen ja muok­kaa­mi­nen

Staat­ti­nen tyypitys mah­dol­lis­taa Ty­peSc­ript-kääntäjän valvoa taulukon ele­ment­tien tie­to­tyyp­piä. Tämä omi­nai­suus auttaa Ty­peSc­ript-tau­lu­koi­ta vä­hen­tä­mään virheiden to­den­nä­köi­syyt­tä koo­dis­sa­si, jolloin voit kehittää tur­val­li­sem­pia ja luo­tet­ta­vam­pia so­vel­luk­sia.

Mitä ovat Ty­peSc­ript-taulukot?

Ty­peSc­rip­tis­sä taulukot ovat jär­jes­tet­ty­jä ar­vo­luet­te­loi­ta. Aivan kuten Ja­vaSc­rip­tis­sä, Ty­peSc­rip­tis­sä­kin voit käyttää tau­lu­koi­ta ele­ment­tien ko­koel­mien tal­len­ta­mi­seen. Elementit voivat kuulua eri tie­to­tyyp­pei­hin, kuten nu­me­roi­hin, merk­ki­jo­noi­hin, ob­jek­tei­hin tai muihin tau­lu­koi­hin. Ty­peSc­rip­tin etuna on staat­ti­sen tyy­pi­tyk­sen tuki, mikä tar­koit­taa, että voit määrittää taulukon ele­ment­tien tie­to­tyy­pin. Tämä puo­les­taan parantaa virheiden ha­vait­se­mis­ta ke­hi­tys­työn aikana.

Tau­lu­koi­den keskeinen omi­nai­suus on niiden dy­naa­mi­nen koko, jonka ansiosta voit lisätä tai poistaa ele­ment­te­jä ilman, että kokoa tarvitsee määrittää etukäteen. Ty­peSc­rip­tis­sä taulukot ovat ole­tusar­voi­ses­ti muo­kat­ta­vis­sa. Voit kuitenkin luoda muo­kat­ta­mat­to­mia tau­lu­koi­ta käyt­tä­mäl­lä tau­luk­ko­me­to­de­ja, kuten map ja filter. Muo­kat­ta­mat­to­mia tau­lu­koi­ta voidaan käyttää uusien tau­lu­koi­den luomiseen olemassa olevien tau­lu­koi­den pohjalta. Taulukot tarjoavat yh­den­mu­kai­sen rakenteen tietojen jär­jes­tä­mi­seen ja hel­pot­ta­vat ele­ment­tien suo­dat­ta­mis­ta, la­jit­te­lua ja tois­ta­mis­ta.

Lisäksi Ty­peSc­ript-taulukot voivat toimia perustana tie­to­ra­ken­tei­den, kuten pinojen (LIFO – Last-In-First-Out) ja jonojen (FIFO – First-In-First-Out) to­teut­ta­mi­sel­le. Ne so­vel­tu­vat myös luet­te­loi­den, tau­lu­koi­den ja ko­koel­mien esit­tä­mi­seen eri­lai­sis­sa so­vel­luk­sis­sa. Koska samaan tyyppiin kuuluvia ele­ment­te­jä on helppo hallita, taulukot ovat erityisen hyö­dyl­li­siä kä­si­tel­täes­sä ul­koi­sis­ta lähteistä, kuten API-ra­ja­pin­nois­ta tai tie­to­kan­nois­ta, peräisin olevia tietoja.

Mikä on Ty­peSc­ript-tau­lu­koi­den syntaksi?

Ty­peSc­rip­tis­sä taulukot mää­ri­tel­lään avain­sa­noil­la let, const tai var, joita seuraa muuttujan nimi ja tie­to­tyyp­pi­mää­rit­te­ly. Kun määrität tie­to­tyy­pin, määrität, minkä tie­to­tyy­pin taulukon ele­ment­tien tulisi olla. Tämä tehdään kak­sois­pis­teel­lä. Elementit si­joi­te­taan ha­ka­sul­kei­siin ja erotetaan toi­sis­taan pilkuilla taulukon alus­tus­loh­kos­sa.

Ty­peSc­ript-taulukon mää­rit­te­lyn yleinen syntaksi on seuraava:

const variableName: datatype[] = [element1, element2, ...];

• va­riable­Na­me on nimi, jonka valitset tau­lu­kol­le.
• datatype määrittää taulukon ele­ment­tien tie­to­tyy­pin.
• [element1, element2, …] ovat tau­luk­koon tal­len­net­ta­vat to­del­li­set elementit tai arvot. Näiden ele­ment­tien tie­to­tyy­pin on oltava sama kuin tau­lu­kol­le mää­ri­tet­ty tie­to­tyyp­pi.

Seu­raa­vas­sa on muutamia esi­merk­ke­jä, jotka auttavat ym­mär­tä­mään syntaksia:

// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];

Mitä Ty­peSc­ript-tau­luk­ko­me­ne­tel­miä on olemassa?

Ty­peSc­ript-tau­luk­ko­me­ne­tel­mät ovat erittäin hyö­dyl­li­siä ja te­hok­kai­ta, koska niiden avulla voit te­hok­kaas­ti käsitellä, muokata ja järjestää tietoja tau­lu­koik­si. Seu­raa­vas­sa tau­lu­kos­sa on yleis­kat­saus Ty­peSc­rip­tin yleisistä tau­luk­ko­me­ne­tel­mis­tä ja niiden käyt­tö­ta­vois­ta.

Ty­peSc­ript-taulukon esi­merk­ke­jä

Ty­peSc­ript-taulukot ovat vält­tä­mät­tö­miä työkaluja so­vel­lus­ten tietojen jär­jes­tä­mi­ses­sä ja kä­sit­te­lys­sä. Seu­raa­vas­sa tar­kas­te­lem­me joitakin keskeisiä toi­min­to­ja.

Taulukon ele­ment­tien käyt­tä­mi­nen

Taulukon ele­ment­tien käyt­tä­mi­nen Ty­peSc­rip­tis­sä on pe­rus­toi­min­to, jonka avulla voit hakea tiettyjä ele­ment­te­jä tau­lu­kos­ta. Voit käyttää taulukon ele­ment­te­jä niiden indeksin avulla, joka edustaa niiden sijaintia tau­lu­kos­sa. Ty­peSc­rip­tis­sä taulukon indeksit ovat nol­la­poh­jai­sia. Tämä tar­koit­taa, että en­sim­mäi­sen elementin indeksi on 0 ja toisen elementin indeksi on 1.

let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99

Tau­lu­koi­den ha­jot­ta­mi­nen

Taulukon ha­jot­ta­mi­sen avulla voit nopeasti ja helposti poimia arvoja tau­lu­kos­ta ja määrittää ne muut­tu­jal­le.

let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3

Ty­peSc­ript-tau­lu­koi­den ele­ment­tien tois­ta­mi­nen

Tässä on esimerkki siitä, kuinka tois­te­taan taulukko Ty­peSc­rip­tis­sä for-silmukan avulla:

let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

Tässä esi­mer­kis­sä meillä on numbers, joka sisältää numeroita. Käytämme for-silmukkaa taulukon lä­pi­käy­mi­seen. Silmukka alkaa kohdasta i = 0, ja lisäämme i jo­kai­sel­la silmukan kier­rok­sel­la. Kohdassa numbers[i] voimme käyttää taulukon vastaavaa ele­ment­tiä ja tulostaa sen.

Tämä on tulos:

1
2
3
4
5