# Mikä on TypeScript? Aloittelijan opas JavaScriptin supersettiin

TypeScriptilla on useita keskeisiä ominaisuuksia, jotka parantavat merkittävästi **web-sovellusten kehittämistä**. Tämä TypeScript-opas tarjoaa johdannon ohjelmointikieleen ja selittää sen tärkeimpiä ominaisuuksia ja käyttötarkoituksia sekä sen etuja ja haittoja.

## Mikä on TypeScript?

TypeScript on Microsoftin kehittämä ohjelmointikieli, joka perustuu web-kehityksessä laajasti käytettyyn JavaScript-kieliin. Yksi TypeScriptin erottuva ominaisuus on **staattinen tyypitys**. Toisin kuin dynaamisen tyypityksen käyttävä JavaScript, TypeScript mahdollistaa muuttujien, funktioiden ja parametrien tietotyyppien määrittelyn. Tämä mahdollistaa koodausvirheiden varhaisen havaitsemisen, jolloin virheet voidaan tunnistaa jo ennen koodin suorittamista. Staattinen tyypitys parantaa merkittävästi koodin laatua ja luettavuutta.

TypeScriptin syntaksi on lähes identtinen JavaScriptin kanssa, mikä helpottaa sen integrointia olemassa oleviin JavaScript-projekteihin. Itse asiassa **TypeScript on JavaScriptin yläjoukko**, mikä tarkoittaa, että kaikki oikea JavaScript-koodi on myös kelvollista TypeScript-koodia. Tämä mahdollistaa asteittaisen siirtymisen TypeScriptiin ja staattisen tyypityksen sekä muiden ominaisuuksien hyödyntämisen ilman, että olemassa olevaa koodipohjaa tarvitsee kirjoittaa kokonaan uudelleen.

Tässä on yksinkertainen JavaScript-esimerkki:

```javascript
function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"
```

Yllä olevassa koodissa funktio `greet` ei ole rajoitettu tiettyyn tietotyyppiin parametrin `name` osalta. Tämä tarkoittaa, että funktio toimii edelleen, vaikka välitämme argumenttina numeron.

TypeScriptissä koodi voi näyttää tältä:

```typescript
function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript
```

Tässä olemme määrittäneet parametrin `name` merkkijonoksi. Jos yritämme käyttää funktiota numeron kanssa, TypeScript näyttää virheilmoituksen, koska välitetty tietotyyppi ei vastaa odotettua tietotyyppiä.

Tämä esimerkki osoittaa, kuinka TypeScript auttaa havaitsemaan virheet varhaisessa vaiheessa ja parantaa koodin laatua estämällä **tietotyyppien virheellisen käytön**. On tärkeää huomata, että TypeScript käännetään lopulta JavaScriptiksi, jolloin sitä voidaan käyttää missä tahansa JavaScript-ympäristössä. Tämä tarkoittaa kuitenkin, että tyyppiturvallisuuden edut ovat käytettävissä vain kehitysvaiheessa.

## Mihin TypeScriptia käytetään?

TypeScript on välttämätön monilla ohjelmistokehityksen alueilla, erityisesti tilanteissa, joissa **tyyppiturvallisuus** ja koodin laatu ovat ratkaisevan tärkeitä.

TypeScriptin merkittävä käyttötapaus on web-kehitys. Tässä TypeScript varmistaa, että JavaScript-koodi on kirjoitettu tavalla, joka tekee siitä turvallisemman ja helpommin ylläpidettävän. Tämä on hyödyllistä laajoissa frontend-projekteissa, joissa on monimutkaisia koodipohjia. TypeScriptia voidaan kuitenkin toteuttaa myös **palvelinpuolella (backend) Node.js-sovelluksissa**, jolloin se tarjoaa lisäkerroksen turvallisuutta. Palvelimettomissa arkkitehtuureissa, kuten AWS Lambda ja Azure Functions, TypeScript auttaa minimoimaan virheet ja varmistamaan luotettavan suorituksen.

Monialustainen kehitys on toinen alue, jolla TypeScript osoittaa vahvuutensa. Se voi merkittävästi optimoida **monialustaisia sovelluksia ja mobiilisovellusten kehittämistä**. Kehykset, kuten NativeScript ja React Native, tarjoavat tukea TypeScriptille, kun kyse on mobiilisovellusten ohjelmoinnista eri alustoille. Pelikehityksessä TypeScriptia hyödynnetään projekteissa, joissa käytetään WebGL:ää tai pelimoottoreita, kuten Phaser tai Babylon.js. TypeScriptin tyyppiturvallisuus auttaa parantamaan pelien laatua ja ylläpidettävyyttä.

TypeScriptia käytetään myös **datan visualisointiin ja analysointiin**. Kirjastot kuten D3.js tukevat TypeScriptia ja mahdollistavat kehittyneiden hallintapaneelien ja visualisointien luomisen.

## TypeScriptin asentaminen

TypeScriptin asentaminen on helppoa ja vaatii vain muutaman vaiheen. Jos tietokoneellasi on **Node.js**, voit asentaa TypeScriptin `npm` lla (Node Package Manager).

### Vaihe 1: Lataa Node.js

Tarkista, onko Node.js asennettu tietokoneellesi. Jos et ole vielä asentanut Node.js:ää, voit ladata ja asentaa sen viralliselta verkkosivustolta.

### Vaihe 2: Asenna TypeScript terminaalissa

Avaa **komentokehote** (esim. komentokehote Windowsissa tai terminaali macOS- tai Linux-käyttöjärjestelmässä) ja kirjoita seuraava komento asentaaksesi TypeScriptin globaalisti:

```bash
npm install -g typescript
```

`-g` (globaali) lippu asentaa TypeScriptin koko järjestelmään, jotta voit käyttää sitä mistä tahansa.

### Vaihe 3: Tarkista asennettu versio

Voit testata, onko asennus onnistunut, suorittamalla seuraavan komennon:

```bash
tsc -v
```

Tämä komento näyttää, mikä TypeScript-versio on asennettu. Jos **versio numero** näkyy, asennus on onnistunut.

Asennuksen jälkeen voit luoda **JavaScript-tiedostoja** luomalla TypeScript-tiedostoja (tiedostotunniste *.ts*) ja kääntämällä ne TypeScript-kääntäjällä `tsc`.

### Vaihe 4: Luo TypeScript-tiedosto

Luo TypeScript-tiedosto, esimerkiksi *app.ts*, ja lisää siihen TypeScript-koodisi.

```typescript
type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);
```

### Vaihe 5: Käännä tiedosto

Käännä TypeScript-tiedosto antamalla seuraava komento:

```bash
tsc app.ts
```

Tämä kompiloida *app.ts* JavaScript-tiedostoksi nimeltä *app.js*. Sen jälkeen voit suorittaa JavaScript-tiedoston.

## Mitä ominaisuuksia TypeScriptilla on?

Verkkokehitys on edistynyt merkittävästi viime vuosina, ja TypeScript on noussut erittäin **tehokkaaksi vaihtoehdoksi JavaScriptille**. Alla olemme koonneet tämän kielen tärkeimmät ominaisuudet.

### Staattinen tyypitys

Staattinen tyypitys on TypeScriptin olennainen ominaisuus, jonka avulla voit määrittää muuttujien, parametrien, funktioiden ja muiden elementtien tietotyypit koodissasi. Toisin **kuin JavaScriptin dynaamisessa tyypityksessä**, jossa tietotyypit määritetään suorituksen aikana, TypeScriptissä tietotyypit määritetään kehitysvaiheessa ennen koodin suorittamista. Tämä menetelmä auttaa tunnistamaan virheet ja loogiset ongelmat varhaisessa vaiheessa.

```typescript
function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error
```

Tässä esimerkissä käytimme staattista tyypitystä funktiossa `add`. Kaksi parametria `a` ja `b` on määritelty numeroiksi (`number`) ja funktio palauttaa tyypin `number` arvon. Mikä tahansa yritys käyttää tätä funktiota eri tietotyypillä aiheuttaa TypeScriptin tunnistamaan sen virheeksi.

### Valinnainen kirjoittaminen

Valinnaisella tyypityksellä voit määrittää tietotyypit tietyille muuttujille ja parametreille, mutta jättää toiset ilman määriteltyä tietotyyppiä.

```typescript
function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}
```

Toiminto `sayHello` määritellään parametreilla `name` ja `age`. Merkintä `any` osoittaa, että parametri `age` voi olla mikä tahansa tietotyyppi.

### ES6+ -ominaisuudet

TypeScript tukee moderneja JavaScript-ominaisuuksia, mukaan lukien ES6 ja uudemmat ominaisuudet, kuten **nuolipäätteiset funktiot ja mallimerkkijonot**.

```typescript
const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;
```

Nuolipainikkeet johtavat lyhyempään ja tiiviimpään syntaksiin.

### Koodin organisointi

TypeScript tarjoaa paremman koodin organisoinnin ja varmistaa, että koodi on jaettu uudelleen käytettäviin osiin. Tämä on mahdollista moduulien ja nimitilojen ansiosta.

```typescript
// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);
```

Tässä näytämme, kuinka koodi voidaan jäsentää moduuleilla ja kuinka `import` ja `export` voidaan hyödyntää organisoinnissa. Lisäystoiminto on määritelty erillisessä moduulissa nimeltä `Math.ts`, ja se on sitten tuotu ja integroitu toiseen moduuliin, `Main.ts`.

### Olio-ohjelmointi (OOP)

TypeScript helpottaa olio-ohjelmointia [TypeScript-luokkien](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/typescript-luokat/), rajapintojen ja perinnön avulla:

```typescript
class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();
```

Tämä esimerkki osoittaa luokkien ja olio-ohjelmoinnin (OOP) käytön TypeScriptissä. Luokalla `Person` on ominaisuudet `name`, `age` ja metodi `greet`, jota käytetään henkilön esittelemiseen ja hänestä tietojen antamiseen.

### Laajennettu tyyppijärjestelmä

TypeScript-tyyppijärjestelmä on joustava ja kattava. Voit luoda **käyttäjän määrittämiä tyyppejä ja rajapintoja** ja jopa laajentaa olemassa olevia tyyppejä.

```typescript
interface Animal {
    name: string;
}
 
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };
```

Rajapinta `Animal` määrittelee ominaisuuden `name`, kun taas rajapinta `Dog` perii ominaisuuden `Animal` ja lisää siihen uuden ominaisuuden `breed`. Objekti `myDog` sisältää molempien rajapintojen ominaisuudet.

### Yhteensopivuus JavaScriptin kanssa

TypeScript on yhteensopiva JavaScriptin kanssa, joten se toimii missä tahansa JavaScript-ympäristössä. Tämän yhteensopivuuden ansiosta TypeScriptia on helpompi sisällyttää asteittain nykyisiin JavaScript-projekteihin.

```typescript
// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}
```

Yllä oleva JavaScript-koodi (ilman tyypitystä) voidaan käyttää TypeScript-koodissa (tyypityksellä) ilman ongelmia.

## Mitkä ovat TypeScriptin edut ja haitat?

Vaikka TypeScript tarjoaa useita etuja, sillä on myös joitakin haittoja. Tässä on yleiskatsaus:

### Edut

TypeScriptilla on laaja tyyppimäärittelyjen ekosysteemi monille JavaScript-kirjastoille ja -kehyksille. Tämä tekee kolmannen osapuolen koodin integroimisesta TypeScript-projekteihin saumatonta ja suoraviivaista. Tämä on hyödyllistä nykypäivän verkkopohjaisissa sovelluksissa, jotka usein perustuvat useisiin kirjastoihin ja kehyksiin.

Staattisen tyypityksen lisäksi TypeScript tarjoaa runsaasti kehitysominaisuuksia, kuten rajapinnat, luokat, moduulit ja **tuen nykyisille ECMAScript-standardeille**. Nämä ominaisuudet parantavat koodin rakennetta, helpottavat projektien ylläpidettävyyttä ja skaalautuvuutta sekä edistävät kehitystyön tuottavuutta. Monet integroidut kehitysympäristöt (IDE), kuten Visual Studio Code, tarjoavat erinomaisen tuen TypeScriptille.

### Haitat

**TypeScriptiin totuttelu vie aikaa**, etenkin kehittäjille, jotka ovat ennen sitä työskennelleet vain JavaScriptin parissa. TypeScript-koodi on käännettävä JavaScriptiksi, ennen kuin se voidaan suorittaa selaimissa tai Node.js-ympäristöissä. Tämä lisää yhden vaiheen kehitystyöhön.

Pienemmissä projekteissa TypeScript voi tuntua liian monimutkaiselta, koska tyyppiturvallisuuden edut eivät välttämättä ole niin ilmeisiä. TypeScript-projektit voivat vaatia **enemmän resursseja lisätyyppitietojen ja kompiloinnin vaiheiden vuoksi**.

## Mitkä ovat TypeScriptin vaihtoehtoja?

On olemassa useita web-ohjelmointikieliä, jotka voivat olla hyvä vaihtoehto TypeScriptille riippuen projektin erityisvaatimuksista ja kehittäjän tai kehittäjien mieltymyksistä.

- **Flow**: Flow on Facebookin kehittämä staattinen tyyppitarkistaja JavaScriptille. Sen avulla voit lisätä tyyppejä JavaScript-koodiin ilman, että sinun tarvitsee siirtyä kokonaan TypeScriptiin. Flow on hyvä valinta, jos haluat integroida tyypityksen JavaScript-projekteihisi asteittain.
- **Dart**: tämä on Googlen kehittämä ohjelmointikieli, jota voidaan käyttää verkkosovellusten ja mobiilisovellusten luomiseen. Se tarjoaa tyyppiturvallisuuden ja hyvän suorituskyvyn. Dartia käytetään usein yhdessä Flutter-kehyksen kanssa mobiilisovellusten kehittämisessä.
- **PureScript**: PureScript on vahvasti tyypitetty funktionaalinen ohjelmointikieli, joka sisältää vahvan tyyppiturvallisuuden ja puhtaasti funktionaalisen ohjelmointityylin. Se mahdollistaa JavaScript-kirjastojen tuomisen.
- **Elm**: Elm on funktionaalinen, vahvasti tyypitetty kieli, joka on suunniteltu verkkosovellusten kehittämiseen. Elm edistää Elm-arkkitehtuurin periaatetta ja tarjoaa korkean tyyppiturvallisuuden.
- **ReasonML (BuckleScript)**: tämä kieli on kehitetty Facebookissa ja perustuu OCaml-kieliin. BuckleScript on kääntäjä, joka kääntää ReasonML:n JavaScriptiksi. Se mahdollistaa myös tyyppiturvallisuuden ja on helppo integroida Reactiin frontend-kehitystä varten.

Vinkki Syvennämme muita aiheita, kuten [TypeScript-funktiot](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/typescript-functions/) ja [TypeScript-taulukot](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/typescript-taulukot/), muissa artikkeleissa digitaalisessa oppaassamme.


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