CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Utility types

Write a flexible form type with utility types.

Summary - Utility types

Utility types build new types from existing ones. Partial makes all properties optional, Required makes them required. Pick selects properties, Omit removes them. Record sets up a key-value mapping. Together they let you write flexible form types.

type FormAlan = Pick<Uye, "ad" | "eposta">;
type Guncelleme = Partial<FormAlan>;

Practice Flexible form type

Define interface Uye with ad: string, eposta: string and yas: number. Define type FormTip as Pick<Uye, "ad" | "eposta">. Define type FormGuncelle as Partial<FormTip>. Write function guncelle(u: FormGuncelle): void whose body prints u.ad with console.log if present. Call guncelle({ ad: "Mert" }).

Starter code

index.ts
// Uye arayüzünü ad, eposta, yas ile tanımla
// FormTip türü Uye'dan ad ve eposta özelliklerini alsın
// FormGuncelle türü FormTip'in tüm özelliklerini isteğe_optional yapsın
// guncelle fonksiyonu FormGuncelle parametre alsın
// gövdede u.ad varsa console.log ile yazdır
// { ad: "Mert" } ile çağır

Sample solution

index.ts
interface Uye {
  ad: string;
  eposta: string;
  yas: number;
}
type FormTip = Pick<Uye, "ad" | "eposta">;
type FormGuncelle = Partial<FormTip>;
function guncelle(u: FormGuncelle): void {
  if (u.ad) {
    console.log(u.ad);
  }
}
guncelle({ ad: "Mert" });

Expected output

Mert

Questions and answers

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

1 Which combination takes only <code>ad</code> and <code>eposta</code> from a form and makes them optional?

  • Omit<Partial<Uye>, "eposta">>
  • Partial<Pick<Uye, "ad" | "eposta">> Correct answer
  • Required<Omit<Uye, "ad">>
  • Pick<Record<string, number>, "ad">>

Explanation: First Pick selects ad and eposta, then Partial makes both optional. The others either keep the wrong fields or do not make them optional.

2 Form update type

Question 
interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = ____<Pick<Uye, "ad" | "eposta">>;
Answer 
interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = Partial<Pick<Uye, "ad" | "eposta">>;

Explanation: To make all selected fields optional you use Partial. Required does the opposite; Omit removes; Record sets up a mapping.

3 Match utility types

Term Meaning
Partial<T> All properties optional
Required<T> All properties required
Pick<T, K> Selects properties in K
Omit<T, K> Removes properties in K

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