CodeBlanks Logo Icon CodeBlanks
Login Register

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.

Practice 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.

Starter code

index.ts
// ApiYanit ve Hava interface tanımla
// donustur ve formatla fonksiyonları yaz
// yanit nesnesi oluştur
// donustur ile hava'ya çevir, formatla ile yazdır

Sample solution

index.ts
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));

Expected output

Antalya 30C

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 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 Correct answer

Explanation: Correct flow: API data is received, transformed to the internal model with donustur, then displayed with formatla.

2 Transform function call

Question 
const hava = ____(yanit);
Answer 
const hava = donustur(yanit);

Explanation: To convert raw API data to the internal model, the donustur function is called; formatla is only for display.

3 Integration parts

Term Meaning
ApiYanit API data type
donustur Transform step
formatla Display step
yanit Raw API data

All lessons in Intermediate

1 Classes

  1. Class basics
  2. Constructor and fields
  3. Methods
  4. Static members
  5. Summary - Classes

2 Access modifiers

  1. public
  2. private
  3. protected
  4. Parameter properties
  5. Summary - Access modifiers

3 Readonly properties

  1. readonly fields
  2. Readonly parameter
  3. Readonly vs const
  4. Summary - Readonly

4 Generics

  1. What is a generic?
  2. Generic functions
  3. Generic classes
  4. Multiple type parameters
  5. Summary - Generics

5 Generic constraints

  1. extends constraint
  2. keyof constraint
  3. Default type parameter
  4. Summary - Generic constraints

6 Utility types

  1. Partial
  2. Required and Pick
  3. Omit and Record
  4. Summary - Utility types

7 keyof and typeof

  1. keyof operator
  2. typeof operator
  3. Indexing with keyof
  4. Summary - keyof and typeof

8 Mapped types

  1. What is a mapped type?
  2. Readonly mapped type
  3. Optional mapped type
  4. Summary - Mapped types

9 Conditional types

  1. What is a conditional type?
  2. Distributive conditional
  3. Logic with conditional
  4. Summary - Conditional types

10 infer

  1. infer keyword
  2. Extracting from Promise
  3. Array element type
  4. Summary - infer

11 Decorators

  1. What is a decorator?
  2. Method decorator
  3. Property decorator
  4. Decorator factories
  5. Summary - Decorators

12 Modules

  1. export and import
  2. Default export
  3. Re-export
  4. Type-only import
  5. Summary - Modules

13 Namespaces

  1. What is a namespace?
  2. Nested namespace
  3. Namespace vs module
  4. Summary - Namespaces

14 Declaration files

  1. What is .d.ts?
  2. Ambient module
  3. Triple-slash directive
  4. Summary - Declaration files

15 Advanced classes

  1. abstract class
  2. implements
  3. Get and set
  4. Summary - Advanced classes

16 Type assertion

  1. as keyword
  2. angle bracket syntax
  3. Type assertion vs casting
  4. Casting from unknown
  5. Summary - Type assertion

17 Project: Library package

  1. Package design
  2. Exporting types
  3. Generic helpers
  4. Declaration file
  5. Integration

18 Project: Quiz app

  1. Question model
  2. Question pool
  3. Answer check
  4. Score calculation
  5. Integration

19 Project: Weather app

  1. Weather model
  2. API response type
  3. Data transform
  4. Display
  5. Integration

20 Intermediate final

  1. Challenge 1: Classes
  2. Challenge 2: Generics
  3. Challenge 3: Type systems
  4. Challenge 4: Mini app