Union- ja leikkaustyypit

Tervetuloa seuraavalle oppitunnille! Tällä oppitunnilla opitte käyttämään union-tyyppejä, joiden avulla muuttujalle voidaan sallia useita mahdollisia tyyppejä, sekä intersektiotyyppejä, joiden avulla useita tyyppejä voidaan yhdistää yhdeksi. Nämä ovat tehokkaita välineitä joustavan ja vankan koodin luomiseen. Aloitetaan!

Union-tyyppien avulla muuttujalla voi olla useampi kuin yksi tyyppi. Union-tyypin määrittämiseen voi käyttää symbolia |.

Esimerkki: Muuttuja, joka voi olla joko merkkijono tai luku:

Tehtävä: Määritelkää union-tyyppinen muuttuja ja sijoittakaa siihen eri arvoja.

let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"

value = 42;
console.log(value); // Output: 42

Union-tyyppejä voi käyttää funktioiden parametreissa, jotta ne voivat vastaanottaa usean tyyppisiä syötteitä. Esimerkki:

Tehtävä: Kirjoittakaa funktio, joka hyväksyy union-tyyppisen parametrin ja tulostaa sen konsoliin.

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100

Intersektiotyyppien avulla useita tyyppejä yhdistetään yhdeksi. Intersektiotyypin määrittämiseen voi käyttää symbolia &.

Esimerkki: Kahden oliotyypin yhdistäminen:

Tehtävä: Luokaa intersektiotyyppi, joka yhdistää kaksi oliota, ja käyttäkää sitä.

type Person = { name: string };
type Employee = { employeeId: number };

type Staff = Person & Employee;

let staffMember: Staff = {
  name: "Alice",
  employeeId: 123,
};

console.log(staffMember);

TypeScript ei tiedä, mitä tyyppiä union-tyypissä käytätte. Tyypin rajaamiseen voitte käyttää tyyppivartijoita. Esimerkki:

Tehtävä: Käyttäkää tyyppivartijoita union-tyypin eri tyyppien käsittelemiseen.

function display(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value.toUpperCase()}`);
  } else {
    console.log(`Number value: ${value * 2}`);
  }
}

display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10

Intersektiotyypit ovat hyödyllisiä, kun käsitellään ominaisuuksia jakavia olioita. Esimerkki:

Tehtävä: Luokaa intersektiotyyppi järjestelmänvalvojan ja käyttäjän rooleille.

type Admin = { adminLevel: string };
type User = { username: string };

type AdminUser = Admin & User;

let admin: AdminUser = {
  adminLevel: "super",
  username: "admin123",
};

console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);

Tässä on joitakin yleisiä virheitä:

• Union-tyypin käyttäminen käsittelemättä kaikkia mahdollisia tapauksia (esimerkiksi tyyppivartijan unohtaminen).
• Tyyppien tekeminen tarpeettoman monimutkaisiksi tarpeettomilla intersektioilla.
• Yhteensopimattomien arvojen sijoittaminen union- tai intersektiotyyppiin.

Vinkki: Testatkaa koodinne aina varmistaaksenne, että tyypit toimivat odotetulla tavalla!

Käyttäkää union-tyyppejä, kun:

• Muuttujalla voi olla yksi useista mahdollisista tyypeistä.
• Tarvitsette joustavuutta funktioiden parametreihin.

Käyttäkää intersektiotyyppejä, kun:

• Yhdistätte useita olioita tai tyyppejä yhdeksi.
• Luotte monimutkaisempia tyyppejä tiettyjä käyttötapauksia varten.

Onnittelut! Olette oppineet käyttämään union- ja intersektiotyyppejä monimutkaisten tilanteiden käsittelemiseen TypeScriptissä. Näiden työkalujen avulla koodistanne tulee joustavampaa ja ilmaisuvoimaisempaa. Seuraavassa oppitunnissa tutustumme enum-tyyppeihin ja siihen, miten ne auttavat vakioarvojen hallinnassa. Jatketaan koodaamista!