Az interfészek Typescriptben való használatának egyéb módjai

  • 5 perc

Most, hogy megismerte a felület deklarálásának és implementálásának alapjait, nézzük meg, hogyan használhatja őket.

Indexelhető típusok létrehozása

Olyan interfészeket használhat, amelyek olyan tömbtípusokat írnak le, amelyekbe indexelhető.

Az indexelhető típusok indexelési aláírással rendelkeznek, amely leírja az objektumba indexelhető típust, valamint az indexelés során a megfelelő visszatérési típusokat.

A felület például IceCreamArray egy indexalási aláírást number deklarál, és egy típust string ad vissza. Ez az index-aláírás azt állítja, hogy IceCreamArrayegy számmal indexelt, és egy sztringet ad vissza.

interface IceCreamArray {
    [index: number]: string;
}

let myIceCream: IceCreamArray;
myIceCream = ['chocolate', 'vanilla', 'strawberry'];
let myStr: string = myIceCream[0];
console.log(myStr);

Használhatja a beépített tömbtípust is, vagy létrehozhat egy típus aliast egy egyéni tömbhöz, de egy felülettel saját tömbtípust határozhat meg, hogy bárki, aki ezzel a felülettel szeretne dolgozni, következetesen alkalmazhatja azt.

JavaScript API leírása interfész használatával

A JavaScript- és TypeScript-fejlesztők gyakran használják a külső JavaScript-kódtárakat. Egy felülettel leírhatja a meglévő JavaScript API-kat, és tisztázhatja a függvényparamétereket és a visszatérési típusokat. A felület egyértelmű képet ad arról, hogy egy API mire számít, és mit fog visszaadni.

Az fetch API egy natív JavaScript-függvény, amellyel a webszolgáltatásokkal kommunikálhat. Ez a példa deklarál egy JSON-fájl visszatérési típusaihoz szükséges Post felületet, majd egy erősen gépelt választ használ fetch async és await hoz létre.

const fetchURL = 'https://jsonplaceholder.typicode.com/posts'
// Interface describing the shape of our json data
interface Post {
    userId: number;
    id: number;
    title: string;
    body: string;
}
async function fetchPosts(url: string) {
    let response = await fetch(url);
    let body = await response.json();
    return body as Post[];
}
async function showPost() {
    let posts = await fetchPosts(fetchURL);
    // Display the contents of the first item in the response
    let post = posts[0];
    console.log('Post #' + post.id)
    // If the userId is 1, then display a note that it's an administrator
    console.log('Author: ' + (post.userId === 1 ? "Administrator" : post.userId.toString()))
    console.log('Title: ' + post.title)
    console.log('Body: ' + post.body)
}

showPost();

A használat async/await meghaladja a képzési terv hatókörét. Ha szeretne többet megtudni róla, tekintse meg ezeket a videókat a Kezdő sorozattól a JavaScriptig tanfolyamon:

Tipp.

Bár az ECMAScript korábbi verziói, például az ES3 nem támogatják async , a awaitTypeScript fordító képes kompatibilis kódot létrehozni a funkció implementálásához. Ez lehetővé teszi, hogy kihasználja az újabb funkciót, miközben továbbra is meg tudja célozni a régebbi böngészőket! A Játszótéren másolja és illessze be a fenti példát, állítsa a célértéket ES3-ra, és tekintse meg a TypeScript által létrehozott segédkódot, hogy ezt lehetővé tegye.