# TypeScript-taulukoiden luominen ja muokkaaminen

Staattinen tyypitys mahdollistaa **TypeScript-kääntäjän** valvoa taulukon elementtien tietotyyppiä. Tämä ominaisuus auttaa TypeScript-taulukoita vähentämään virheiden todennäköisyyttä koodissasi, jolloin voit kehittää turvallisempia ja luotettavampia sovelluksia.

## Mitä ovat TypeScript-taulukot?

TypeScriptissä taulukot ovat **järjestettyjä arvoluetteloita**. Aivan kuten JavaScriptissä, TypeScriptissäkin voit käyttää taulukoita elementtien kokoelmien tallentamiseen. Elementit voivat kuulua eri tietotyyppeihin, kuten numeroihin, merkkijonoihin, objekteihin tai muihin taulukoihin. [TypeScriptin](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/mikae-on-typescript/) etuna on staattisen tyypityksen tuki, mikä tarkoittaa, että voit määrittää taulukon elementtien tietotyypin. Tämä puolestaan parantaa virheiden havaitsemista kehitystyön aikana.

Taulukoiden keskeinen ominaisuus on niiden dynaaminen koko, jonka ansiosta voit lisätä tai poistaa elementtejä ilman, että kokoa tarvitsee määrittää etukäteen. TypeScriptissä taulukot ovat oletusarvoisesti muokattavissa. Voit kuitenkin luoda **muokattamattomia taulukoita** käyttämällä taulukkometodeja, kuten `map` ja `filter`. Muokattamattomia taulukoita voidaan käyttää uusien taulukoiden luomiseen olemassa olevien taulukoiden pohjalta. Taulukot tarjoavat yhdenmukaisen rakenteen tietojen järjestämiseen ja helpottavat elementtien suodattamista, lajittelua ja toistamista.

Lisäksi TypeScript-taulukot voivat toimia perustana tietorakenteiden, kuten pinojen (LIFO – Last-In-First-Out) ja jonojen (FIFO – First-In-First-Out) toteuttamiselle. Ne soveltuvat myös **luetteloiden, taulukoiden ja kokoelmien esittämiseen** erilaisissa sovelluksissa. Koska samaan tyyppiin kuuluvia elementtejä on helppo hallita, taulukot ovat erityisen hyödyllisiä käsiteltäessä ulkoisista lähteistä, kuten API-rajapinnoista tai tietokannoista, peräisin olevia tietoja.

## Mikä on TypeScript-taulukoiden syntaksi?

TypeScriptissä taulukot määritellään avainsanoilla `let`, `const` tai `var`, joita seuraa muuttujan nimi ja **tietotyyppimäärittely**. Kun määrität tietotyypin, määrität, minkä tietotyypin taulukon elementtien tulisi olla. Tämä tehdään kaksoispisteellä. Elementit sijoitetaan hakasulkeisiin ja erotetaan toisistaan pilkuilla taulukon alustuslohkossa.

TypeScript-taulukon määrittelyn yleinen syntaksi on seuraava:

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

- **variableName** on nimi, jonka valitset taulukolle.
- **datatype** määrittää taulukon elementtien tietotyypin.
- **\[element1, element2, …\]** ovat taulukkoon tallennettavat todelliset elementit tai arvot. Näiden elementtien tietotyypin on oltava sama kuin taulukolle määritetty tietotyyppi.

Seuraavassa on muutamia esimerkkejä, jotka auttavat ymmärtämään syntaksia:

```typescript
// 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ä TypeScript-taulukkomenetelmiä on olemassa?

TypeScript-taulukkomenetelmät ovat erittäin hyödyllisiä ja tehokkaita, koska niiden avulla voit tehokkaasti **käsitellä, muokata ja järjestää** tietoja taulukoiksi. Seuraavassa taulukossa on yleiskatsaus TypeScriptin yleisistä taulukkomenetelmistä ja niiden käyttötavoista.

<table>
  <thead>
    <tr>
      <th>Menetelmät</th>
      <th>Kuvaus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`push()`</td>
      <td>Lisää yhden tai useamman elementin taulukon loppuun ja palauttaa taulukon uuden pituuden.</td>
    </tr>
    <tr>
      <td>`pop()`</td>
      <td>Poistaa taulukon viimeisen elementin ja palauttaa sen.</td>
    </tr>
    <tr>
      <td>`unshift()`</td>
      <td>Lisää yhden tai useamman elementin taulukon alkuun ja palauttaa taulukon uuden pituuden.</td>
    </tr>
    <tr>
      <td>`shift()`</td>
      <td>Poistaa ensimmäisen elementin taulukosta ja palauttaa sen.</td>
    </tr>
    <tr>
      <td>`concat()`</td>
      <td>Yhdistää nykyisen taulukon yhteen tai useampaan muuhun taulukkoon ja palauttaa uuden taulukon. Alkuperäinen taulukko pysyy muuttumattomana.</td>
    </tr>
    <tr>
      <td>`join(separator)`</td>
      <td>Muuntaa taulukon elementit merkkijonoksi ja palauttaa sen. Voit valita elementtien erottimen.</td>
    </tr>
    <tr>
      <td>`slice(start, end)`</td>
      <td>Luo tasaisen kopion taulukosta, joka koostuu elementeistä määritettyjen indeksien “start” (mukaan lukien) ja “end” (pois lukien) välillä. Alkuperäinen taulukko säilyy muuttumattomana.</td>
    </tr>
    <tr>
      <td>`splice(start, deleteCount, element1, element2, ...)`</td>
      <td>Lisää uusia elementtejä määritettyyn kohtaan ja/tai poistaa elementtejä taulukosta.</td>
    </tr>
    <tr>
      <td>`forEach(callback)`</td>
      <td>Suorittaa annetun toiminnon jokaiselle taulukon elementille.</td>
    </tr>
    <tr>
      <td>`map(callback)`</td>
      <td>Luo uuden taulukon soveltamalla funktiota taulukon jokaiseen elementtiin.</td>
    </tr>
    <tr>
      <td>`filter(callback)`</td>
      <td>Luo uuden taulukon, jossa on kaikki elementit, jotka läpäisevät määritetyn toiminnon toteuttaman testin.</td>
    </tr>
  </tbody>
</table>

## TypeScript-taulukon esimerkkejä

TypeScript-taulukot ovat välttämättömiä työkaluja sovellusten tietojen järjestämisessä ja käsittelyssä. Seuraavassa tarkastelemme joitakin keskeisiä toimintoja.

### Taulukon elementtien käyttäminen

Taulukon elementtien käyttäminen TypeScriptissä on perustoiminto, jonka avulla voit hakea tiettyjä elementtejä taulukosta. Voit käyttää taulukon elementtejä niiden indeksin avulla, joka edustaa niiden sijaintia taulukossa. TypeScriptissä **taulukon indeksit ovat nollapohjaisia**. Tämä tarkoittaa, että ensimmäisen elementin indeksi on 0 ja toisen elementin indeksi on 1.

```typescript
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
```

### Taulukoiden hajottaminen

**Taulukon hajottamisen** avulla voit nopeasti ja helposti poimia arvoja taulukosta ja määrittää ne muuttujalle.

```typescript
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
```

### TypeScript-taulukoiden elementtien toistaminen

Tässä on esimerkki siitä, kuinka toistetaan taulukko TypeScriptissä **for-silmukan** avulla:

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

Tässä esimerkissä meillä on `numbers`, joka sisältää numeroita. Käytämme for-silmukkaa taulukon läpikäymiseen. Silmukka alkaa kohdasta `i = 0`, ja lisäämme `i` jokaisella silmukan kierroksella. Kohdassa `numbers[i]` voimme käyttää taulukon vastaavaa elementtiä ja tulostaa sen.

Tämä on tulos:

```typescript
1
2
3
4
5
```


This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/typescript-taulukot/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/typescript-taulukot/) for AI/LLM consumption.