CodeBlanks Logo Icon CodeBlanks
Login Register

API response type

Write the API response type with interface.

What is an API response type?

Data coming from a weather API usually has a fixed structure. You define this structure with an interface. Sometimes the API may omit some fields; in that case you mark those fields as optional. This way both real API data and incomplete responses are handled type-safely.

interface ApiResponse {
  city: string;
  temperature: number;
  humidity?: number;
}

Required and optional fields

Fields always present in an API response are required and declared with :. Fields that may sometimes be missing are made optional with ?. For example, city always arrives but humidity may be absent in some responses. This separation preserves data consistency.

interface ApiResponse {
  city: string;        // required
  temperature: number; // required
  humidity?: number;   // optional
}

Practice API response interface

Define an ApiYanit interface: sehir: string and sicaklik: number required, nem?: number optional. Create an ApiYanit object named y with only sehir: "İzmir" and sicaklik: 25. Print y.sehir with console.log.

Starter code

index.ts
// ApiYanit interface tanımla
// sehir ve sicaklik zorunlu, nem opsiyonel olsun
// y nesnesi oluştur, sadece sehir ve sicaklik ver
// y.sehir yazdır

Sample solution

index.ts
interface ApiYanit {
  sehir: string;
  sicaklik: number;
  nem?: number;
}
const y: ApiYanit = { sehir: "İzmir", sicaklik: 25 };
console.log(y.sehir);

Expected output

İzmir

Questions and answers

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

1 How is a field that may sometimes be absent in an API response marked?

  • With void
  • With the const keyword
  • With readonly
  • Made optional with ? Correct answer

Explanation: Optional fields are marked with ?; if the field is absent it is accepted as undefined and causes no compile error.

2 Optional field marker

Question 
interface ApiYanit {
  sehir: string;
  nem____: number;
}
Answer 
interface ApiYanit {
  sehir: string;
  nem?: number;
}

Explanation: To declare an optional field, a ? is placed after the field name; if absent, it is accepted as undefined.

3 API response concepts

Term Meaning
interface Structure definition
? Optional field marker
nem Humidity field
yanit API return 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