CodeBlanks Logo Icon CodeBlanks
Login Register

Optional properties

Learn optional properties with ?.

Optional properties

Some properties may not always be present. You make them optional by placing ? after the property name. An optional property may or may not be present in the object.

let kisi: { ad: string; tel?: string } = {
  ad: "Ali"
};  // tel missing, valid

With ? a property becomes optional and can be omitted.

Accessing optional properties

When you access an optional property, its value may be undefined if not set. It is safe to check whether it is defined before using it.

let kisi: { ad: string; tel?: string } = {
  ad: "Ali"
};
console.log(kisi.tel);  // undefined

Optional properties may have the value undefined.

Practice Object with an optional property

Declare a variable named kisi with type { ad: string; tel?: string } and value { ad: "Can", tel: "555" }. Print the value of kisi.tel with console.log.

Starter code

index.ts
// kisi adında bir nesne tanımla
// ad özelliği zorunlu dize, tel özelliği isteğe bağlı dize olsun
// ad değeri "Can", tel değeri "555" olsun
// kisi.tel değerini yazdır

Sample solution

index.ts
let kisi: { ad: string; tel?: string } = { ad: "Can", tel: "555" };
console.log(kisi.tel);

Expected output

555

Questions and answers

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

1 What does <code>tel?: string</code> mean?

  • tel property cannot be assigned
  • tel property is optional and may be absent Correct answer
  • tel property is of type number
  • tel property must be a string

Explanation: The <code>?</code> mark makes a property optional; <code>tel?: string</code> means the <code>tel</code> property may or may not be present.

2 Make the property optional

Question 
let urun: { ad: string; indirim____: number } = { ad: "kalem" };
Answer 
let urun: { ad: string; indirim?: number } = { ad: "kalem" };

Explanation: Since the value does not include <code>indirim</code>, the property must be optional; the <code>?</code> mark enables this and allows the missing property.

3 Optional property concepts

Term Meaning
tel?: string Optional string property
tel: string Required string property
? (özellik adından sonra) Makes a property optional
Optional property Property may be absent

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