Frontend Academy · Oppitunti

Primitiivityypit, union-tyypit ja tyyppialiaset

Tyypitä muuttujat string-, number- ja boolean-tyypeillä sekä taulukoilla. Luo union-tyyppejä |-merkillä ja anna niille selkeät nimet tyyppialiaksilla

Oppitunti 2/413 vaihetta

Primitiivityypit, union-tyypit ja tyyppialiaset on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Muuttujien tyyppimerkinnät

Lisätkää tyyppimerkinnät muuttujan nimen jälkeen kaksoispisteellä. TypeScript päättelee tyypit aina kun mahdollista — lisätkää eksplisiittinen tyyppimerkintä, kun päättely on epäselvää tai kun haluatte dokumentoida koodia.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Perustyypit

TypeScriptin perustyypit vastaavat JavaScriptin perustyyppejä: string, number (kokonais- ja liukulukuja ei erotella), boolean, null, undefined, symbol, bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Taulukot

Taulukon tyypin voi ilmoittaa muodossa Type[] tai geneerisellä muodolla Array<Type>. Molemmat ovat keskenään samanarvoisia.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Union-tyypit: |

Union-tyyppien avulla muuttujalla voi olla jokin useista tyypeistä. Käyttäkää putkioperaattoria |. TypeScript tarkentaa tyyppiä ehtolauseiden sisällä.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Literaalityypit

Tyyppeinä voi käyttää kirjaimellisia merkkijono-, numero- tai boolean-arvoja. Yhdistettynä union-tyyppeihin ne muodostavat kiinteän joukon sallittuja arvoja, kuten enum.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Tyyppialiasit: type

Avainsana type luo tyyppialiasin — uudelleenkäytettävän nimen mille tahansa tyypille. Aliaksia voi käyttää perustyypeille, union-tyypeille, objekteille, tupleille ja monimutkaisille yhdistelmätyypeille.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Objektityypit typellä

Objektien rakenteet voi kuvata tyyppialiasien avulla. Merkitkää ominaisuudet valinnaisiksi merkillä ? ja vain luku -ominaisuuksiksi määritteellä readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Leikkaustyypit: &

Yhdistäkää useita tyyppejä operaattorilla &. Tulostyypillä on molempien tyyppien kaikki ominaisuudet. Tämä on hyödyllistä tyyppejä laajennettaessa.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

any-tyyppi — ohitusreitti

any poistaa arvon tyyppitarkistuksen käytöstä. Se on tarttuva — arvot, jotka johdetaan any-arvosta, ovat myös any-tyyppiä. Käyttäkää sitä viimeisenä keinona siirtymän aikana, ei koskaan pitkäaikaisena ratkaisuna.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

unknown-tyyppi — turvallinen vaihtoehto any-tyypille

unknown on tyypiltään turvallinen vastine any-tyypille. Tuntematonta arvoa ei voi käyttää, ennen kuin sen tyyppi on tarkennettu. Tämä pakottaa validoimaan ulkoiset tiedot.

Tuplet — kiinteän pituiset taulukot

Tuple on kiinteän pituinen taulukko, jossa jokaisella paikalla on tunnettu tyyppi.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Pikatarkistus

Minkä TypeScript-ominaisuuden avulla funktio voi hyväksyä joko merkkijonon tai numeron?

Vastaa interaktiivisessa oppitunnissa

Kertaus: perustyypit, union-tyypit ja aliakset

Perustyypit: string, number, boolean, null, undefined. Taulukot: Type[]. Union-tyypit: A | B. Literaalityypit kiinteille arvojoukoille. type-alias uudelleenkäytettäville tyyppinimille. Valinnaiset ominaisuudet merkillä ?. readonly muuttumattomille ominaisuuksille. Suosikaa ulkoisille tiedoille unknown-tyyppiä any-tyypin sijaan.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Primitiivityypit, union-tyypit ja tyyppialiaset” ilmainen?

Kyllä – oppitunnin ”Primitiivityypit, union-tyypit ja tyyppialiaset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Primitiivityypit, union-tyypit ja tyyppialiaset”?

Tyypitä muuttujat string-, number- ja boolean-tyypeillä sekä taulukoilla. Luo union-tyyppejä |-merkillä ja anna niille selkeät nimet tyyppialiaksilla Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Primitiivityypit, union-tyypit ja tyyppialiaset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Miksi TypeScript: tyypit havaitsevat virheet käännösaikana
Primitiivityypit, union-tyypit ja tyyppialiaset
Interfacet ja objektityypit
TypeScriptin kääntäminen ja tsconfig.json

← Takaisin: Frontend Academy