CodeBlanks Logo Icon CodeBlanks
Login Register

Data transform

Transform the API response into the internal model.

What is data transformation?

Converting raw data from the API into the application's internal model is called transformation. A function takes the API response type as a parameter and returns the internal model type. This keeps external data separate from internal data, and even if the API changes, the internal model stays stable.

function transform(r: ApiResponse): Weather {
  return { city: r.city, temperature: r.temperature, condition: "-" };
}

Field mapping in transformation

Inside the transform function, each field of the API response is copied to the corresponding field of the internal model. The r.city value is assigned to Weather.city. If the internal model contains a field not in the API, a default value is provided during transformation.

function transform(r: ApiResponse): Weather {
  return {
    city: r.city,
    temperature: r.temperature,
    condition: "unknown"
  };
}

Practice donustur function

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 }. Print the .sehir field of the result of calling donustur({ sehir: "Ankara", sicaklik: 18 }) with console.log.

Starter code

index.ts
// ApiYanit ve Hava interface tanımla
// donustur fonksiyonu ApiYanit alıp Hava dönsün
// sehir ve sicaklik kopyalansın
// donustur ile çağırıp sehir 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 };
}
const h = donustur({ sehir: "Ankara", sicaklik: 18 });
console.log(h.sehir);

Expected output

Ankara

Questions and answers

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

1 What is used to convert an API response to the internal model?

  • console.log
  • A transform function Correct answer
  • typeof operator
  • interface declaration

Explanation: A transform function takes the API response type and returns the internal model type; this keeps external and internal data separate.

2 Parameter variable access

Question 
function donustur(y: ApiYanit): Hava {
  return { sehir: ____.sehir, sicaklik: y.sicaklik };
}
Answer 
function donustur(y: ApiYanit): Hava {
  return { sehir: y.sehir, sicaklik: y.sicaklik };
}

Explanation: In the transform function the parameter variable is y; fields are accessed as y.sehir.

3 Transformation concepts

Term Meaning
donustur Transform function
map Array transform method
Hava Internal model type
ApiYanit External source type

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