CodeBlanks Logo Icon CodeBlanks
Login Register

Property types

Learn to type interface properties.

Property types

Each property in an interface has a type. You can use string, number, boolean, arrays, or even other interfaces. Properties are separated by semicolons.

interface Urun {
  ad: string;
  fiyat: number;
  stokta: boolean;
}

Each property determines the type of the object's corresponding value.

Optional and readonly in interfaces

Interfaces support optional (?) and readonly properties just like object types. Optional properties may be absent; readonly properties cannot be changed after creation.

interface Urun {
  readonly id: number;
  ad: string;
  etiketler?: string[];
}

An interface supports all features of object types.

Practice Interface with various property types

Define an interface named Urun with properties ad: string, fiyat: number, and stokta: boolean. Declare a variable named urun of type Urun with value { ad: "kalem", fiyat: 15, stokta: true }. Print the value of urun.fiyat with console.log.

Starter code

index.ts
// Urun adında bir interface tanımla
// ad (string), fiyat (number), stokta (boolean) özellikleri içersin
// urun değişkenini Urun türünde tanımla
// değer: ad "kalem", fiyat 15, stokta true
// urun.fiyat değerini yazdır

Sample solution

index.ts
interface Urun {
    ad: string;
    fiyat: number;
    stokta: boolean;
}
let urun: Urun = { ad: "kalem", fiyat: 15, stokta: true };
console.log(urun.fiyat);

Expected output

15

Questions and answers

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

1 In <code>interface Urun { ad: string; fiyat: number; stokta: boolean }</code>, what is the type of the <code>fiyat</code> property?

  • Urun
  • string
  • boolean
  • number Correct answer

Explanation: Since the interface definition writes <code>fiyat: number</code>, the type of the <code>fiyat</code> property is <code>number</code>.

2 Complete the property type

Question 
interface Urun {
  ad: string;
  fiyat: number;
  stokta: ____;
}
Answer 
interface Urun {
  ad: string;
  fiyat: number;
  stokta: boolean;
}

Explanation: The <code>stokta</code> property indicates whether a product is in stock; the correct type is <code>boolean</code>. <code>string</code> and <code>number</code> are wrong for a yes/no state, and <code>void</code> is not a property type.

3 Property types concepts

Term Meaning
ad: string (interface) String property
fiyat: number (interface) Number property
etiketler?: string[] Optional array property
readonly id: number Readonly property

All lessons in Beginner

1 TypeScript intro and setup

  1. What is TypeScript?
  2. Why TypeScript?
  3. tsc compiler
  4. tsconfig basics
  5. Summary - TypeScript basics

2 Primitive types

  1. string type
  2. number type
  3. boolean type
  4. let and const
  5. Summary - Primitive types

3 Arrays

  1. Array type
  2. Array methods
  3. readonly arrays
  4. Multidimensional arrays
  5. Summary - Arrays

4 Tuples

  1. What is a tuple?
  2. Tuple usage
  3. readonly tuple
  4. Summary - Tuple

5 Enums

  1. Numeric enum
  2. String enum
  3. const enum
  4. Enum members
  5. Summary - Enum

6 any, unknown, never

  1. any type
  2. unknown type
  3. never type
  4. void type
  5. Summary - Special types

7 Type annotation

  1. Variable annotation
  2. Parameter annotation
  3. Return type annotation
  4. Summary - Type annotation

8 Type inference

  1. Basic inference
  2. Inference with const
  3. Best common type
  4. Summary - Type inference

9 Objects

  1. Object type
  2. Optional properties
  3. Readonly properties
  4. Summary - Objects

10 Functions

  1. Function declaration
  2. Optional and default params
  3. Rest params
  4. Function overloads
  5. Summary - Functions

11 Arrow functions

  1. Arrow syntax
  2. this with arrow
  3. Arrow type
  4. Summary - Arrow functions

12 Interfaces

  1. What is an interface?
  2. Property types
  3. Interface vs type alias
  4. Summary - Interfaces

13 Type alias

  1. What is a type alias?
  2. Composition with alias
  3. Alias vs interface
  4. Summary - Type alias

14 Union and intersection

  1. Union types
  2. Intersection types
  3. Literal types
  4. Summary - Union & intersection

15 null and undefined

  1. null vs undefined
  2. Optional chaining
  3. Nullish coalescing
  4. Summary - null & undefined

16 Strict mode

  1. strict: true
  2. strictNullChecks
  3. strictFunctionTypes
  4. Summary - Strict mode

17 Project: Shopping cart

  1. Cart design
  2. Add product
  3. Total calculation
  4. Apply discount
  5. Integration

18 Project: Todo CLI

  1. Task model
  2. Add and list
  3. Completion
  4. Filtering
  5. Integration

19 Project: Library

  1. Book model
  2. Add and search
  3. Borrow
  4. Return
  5. Integration

20 Beginner final

  1. Challenge 1: Types
  2. Challenge 2: Functions
  3. Challenge 3: Unions
  4. Challenge 4: Mini app