TypeScript Academy · Oppitunti

as-avainsana tyyppiväitteissä

Ohittakaa päätellyt tyypit harkitusti as-avainsanalla.

Oppitunti 1/413 vaihetta

as-avainsana tyyppiväitteissä on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on tyyppiväite?

Tyyppiväite kertoo kääntäjälle: ’luota minuun, tiedän tämän arvon olevan tyyppiä T’. Käytät as-avainsanaa muodossa value as Type. Se muuttaa tapaa, jolla tyyppitarkistin näkee arvon, mutta ei itse arvoa.

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

as-syntaksi

Kirjoita ensin lauseke, sitten as ja lopuksi kohdetyyppi. Myös vanhempi kulmasulkeisiin perustuva syntaksi on olemassa, mutta as-syntaksia suositellaan, koska se toimii kaikkialla, myös JSX/TSX-tiedostoissa.

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

Tyyppiväitteet eivät muuta ajonaikaista toimintaa

Tämä on tärkeää: tyyppiväitteet ovat vain käännösaikaisia ohjeita. Ne poistetaan koodista sen suoritettaessa. Muunnosta tai validointia ei tapahdu – jos teet virheellisen väitteen, ajonaikainen arvo pysyy muuttumattomana ja voi aiheuttaa ongelmia.

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

Milloin tyyppiväitteet ovat sallittuja

TypeScript sallii suorat tyyppiväitteet vain tyyppien välillä, jotka limittyvät eli joissa toinen tyyppi voidaan sijoittaa toisen tilalle. Voit väittää unknown-tyypin olevan string tai laajentaa ja kaventaa tyyppiä tyyppien välisen suhteen puitteissa.

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

Virheelliset suorat tyyppiväitteet

Jos kahdella tyypillä ei ole mitään yhteistä, TypeScript hylkää suoran tyyppiväitteen todennäköisenä virheenä. Esimerkiksi string-tyypin väittäminen suoraan number-tyypiksi estetään.

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

Union-tyypin kaventaminen as-avainsanalla

Yksi yleinen sallittu käyttötapa on väittää union-arvon olevan yksi sen jäsenistä, kun tiedät jotain, mitä kääntäjä ei tiedä. Käytä tätä säästeliäästi – ajonaikainen tarkistus on yleensä turvallisempi.

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

DOM-elementtien tyyppien määrittäminen

Klassinen käytännön esimerkki: DOM-kyselyt palauttavat yleisen tyypin, kuten HTMLElement | null. Kun tiedät kyseessä olevan tietyn elementin, voit väittää sen kyseiseksi tyypiksi ja käyttää elementtikohtaisia ominaisuuksia.

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

Miksi DOM-väitteitä tarvitaan

DOM-ohjelmointirajapinnat eivät voi tietää, minkä konkreettisen elementin saat, joten ne palauttavat yleisiä tyyppejä. Tietyn alityypin, esimerkiksi HTMLInputElement-tyypin, väittäminen tuo käyttöön ominaisuudet, kuten value ja checked.

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

const-väitteet ovat erikoistapaus

Olette jo nähneet as const-syntaksin. Se on erityinen tyyppiväite, joka tekee arvosta syvästi vain luku -muotoisen ja käyttää literaalityyppejä. Se on ainoa tyyppiväite, joka on aina turvallinen, koska se vain kaventaa tyyppiä.

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

Tyyppiväitteet ohittavat turvallisuustarkistukset

Koska tyyppiväitteet käskevät kääntäjää lopettamaan tarkistamisen, ne siirtävät vastuun teille. Virheellinen väite voi piilottaa todellisen tyyppivirheen, kunnes ohjelma kaatuu ajonaikaisesti. Käyttäkää niitä vain, kun tiedätte asiasta todella enemmän kuin kääntäjä.

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

Suosikaa kaventamista tyyppiväitteiden sijaan

Kun mahdollista, suosikaa ajonaikaista kaventamista eli tyyppisuojia tyyppiväitteiden sijaan. Kaventaminen todistaa tyypin, kun taas tyyppiväite vain väittää sen. Käyttäkää as-syntaksia vain tapauksissa, joita kaventaminen ei pysty ilmaisemaan, kuten DOM-elementin tarkentamisessa.

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

Pikatesti

Testatkaa, miten hyvin ymmärrätte tyyppiväitteet.

Vastaa interaktiivisessa oppitunnissa

Kertaus: as-väitteet

Opitte, että:

value as Type käskee kääntäjää käsittelemään arvoa annettuna tyyppinä.
Tyyppiväitteet ovat vain käännösaikaisia – ajonaikaista muunnosta tai tarkistusta ei tehdä.
Ne sallitaan vain tyyppien välillä, jotka limittyvät.
Yleisiä sallittuja käyttötapoja ovat unknown-tyypin kaventaminen ja DOM-elementtien tyyppien tarkentaminen. Suosikaa kaventamista aina, kun se on mahdollista.

Seuraavaksi tutustumme non-null-väiteoperaattoriin.

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

Aloita maksutta

Opi TypeScript 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: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”as-avainsana tyyppiväitteissä” ilmainen?

Kyllä – oppitunnin ”as-avainsana tyyppiväitteissä” 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 TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”as-avainsana tyyppiväitteissä”?

Ohittakaa päätellyt tyypit harkitusti as-avainsanalla. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

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

Kuinka kauan ”as-avainsana tyyppiväitteissä”-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ä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript 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

← Takaisin: TypeScript Academy