CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge 4: Mini app

Solve a task testing the full intermediate level.

Mini app challenge

This challenge tests the entire intermediate level. You will combine interfaces for data models, generic functions, access modifiers, and display functions to build a working mini application. Each part carries its own responsibility and together they form a type-safe, working application.

Practice Generic first element helper

Define a Urun interface: ad: string, fiyat: number. The ilk generic function should be <T>(arr: T[]): T | undefined and return arr[0]. The urunler array should contain two Urun objects: { ad: "kalem", fiyat: 5 } and { ad: "defter", fiyat: 10 }. Assign the result of ilk(urunler) to ilkUrun and print ilkUrun.ad.

Starter code

index.ts
// Urun interface tanimla
// ilk generic fonksiyonu yaz
// urunler dizisi olustur
// ilk ile ilk urunu al
// ad yazdir

Sample solution

index.ts
interface Urun { ad: string; fiyat: number; }
function ilk<T>(arr: T[]): T | undefined {
  return arr[0];
}
const urunler: Urun[] = [
  { ad: "kalem", fiyat: 5 },
  { ad: "defter", fiyat: 10 }
];
const ilkUrun = ilk(urunler);
console.log(ilkUrun.ad);

Expected output

kalem

Practice Task filtering app

Define a Gorev interface: ad: string, tamamlandi: boolean. The filtrele generic function should be <T>(arr: T[], kosul: (x: T) => boolean): T[]. Inside, declare an empty sonuc: T[] array, loop with for...of, if kosul(x) is true do sonuc.push(x), then return sonuc. The gorevler array should contain two Gorev objects: { ad: "a", tamamlandi: true } and { ad: "b", tamamlandi: false }. Assign the result of filtrele(gorevler, (g) => !g.tamamlandi) to aciklar and print aciklar.length.

Starter code

index.ts
// Gorev interface tanimla
// filtrele generic fonksiyonu yaz
// gorevler dizisi olustur
// tamamlanmamislari filtrele
// aciklar.length yazdir

Sample solution

index.ts
interface Gorev { ad: string; tamamlandi: boolean; }
function filtrele<T>(arr: T[], kosul: (x: T) => boolean): T[] {
  const sonuc: T[] = [];
  for (const x of arr) {
    if (kosul(x)) sonuc.push(x);
  }
  return sonuc;
}
const gorevler: Gorev[] = [
  { ad: "a", tamamlandi: true },
  { ad: "b", tamamlandi: false }
];
const aciklar = filtrele(gorevler, (g) => !g.tamamlandi);
console.log(aciklar.length);

Expected output

1

Questions and answers

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

1 What is the correct order of data model, generic function, and display steps in a mini app?

  • Only generic, rest not needed
  • Define model, write generic function, display Correct answer
  • Only display, model not needed
  • First display, then model, then generic

Explanation: Correct flow: first the data model is defined, then the generic function is written, and finally display is done.

2 Data model keyword

Question 
____ Gorev { ad: string; tamamlandi: boolean; }
Answer 
interface Gorev { ad: string; tamamlandi: boolean; }

Explanation: An interface is used to define an object structure; type is an alternative but requires different syntax.

3 Mini app parts

Term Meaning
interface Data model
generic Type-safe helper
extends Constraint
console.log Output

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