TypeScript
Integration
Build the working app by combining all parts.
Summary - Weather app
In this project you combined all parts of a weather app: the data model, API response type, transform function, and display function. Each part carries its own responsibility and together they form a working application. The model represents data, the API type the external source, the transform the bridge, and formatting the output.
interface Weather { city: string; temperature: number; }
function transform(r: ApiResponse): Weather { ... }
function format(w: Weather): string { ... }
Final assembly
In the final assembly, all parts merge in a single flow: raw data of type ApiResponse is received, transformed to the Weather model with transform, then the text to show the user is produced with format. This flow keeps external and internal data separate and makes maintenance easier.
Exercise Working weather app
Define ApiYanit and Hava interfaces: both contain sehir: string and sicaklik: number. The donustur function should be (y: ApiYanit): Hava and return { sehir: y.sehir, sicaklik: y.sicaklik }. The formatla function should be (h: Hava): string and return h.sehir + " " + h.sicaklik + "C". Create an ApiYanit object named yanit with { sehir: "Antalya", sicaklik: 30 }. Assign the result of donustur(yanit) to hava and print formatla(hava) with console.log.
Show example solution
interface ApiYanit { sehir: string; sicaklik: number; }
interface Hava { sehir: string; sicaklik: number; }
function donustur(y: ApiYanit): Hava {
return { sehir: y.sehir, sicaklik: y.sicaklik };
}
function formatla(h: Hava): string {
return h.sehir + " " + h.sicaklik + "C";
}
const yanit: ApiYanit = { sehir: "Antalya", sicaklik: 30 };
const hava = donustur(yanit);
console.log(formatla(hava));
Test yourself
-
What is the correct flow during integration?
- First define interface, then nothing
- First format, then API call
- First format, then transform
- Get API data, transform, format
Show answer
Get API data, transform, format — Correct flow: API data is received, transformed to the internal model with donustur, then displayed with formatla.
-
Transform function call
const hava = ____(yanit);
Show answer
const hava = donustur(yanit);
-
Integration parts
- ApiYanit
- API data type
- donustur
- Transform step
- formatla
- Display step
- yanit
- Raw API data
Next lesson: Challenge 1: Classes
