Practise generic functions and classes, constraints, keyof, utility types and mapped types. Every solution has been type-checked in strict mode and run, and shows its real output.
Review first: Generics, Generic Constraints and Defaults, keyof, typeof and Indexed Access, Utility Types, Mapped Types
Write last<T>(items: readonly T[]): T | undefined and show that it returns a number for a number array and a string for a string array.
items.at(-1) returns the last item or undefined.
function last<T>(items: readonly T[]): T | undefined {
return items.at(-1);
}
const n = last([1, 2, 3]);
const s = last(["html", "css"]);
console.log((n ?? 0) * 10, s?.toUpperCase());30 CSSWrite a Queue<T> class with enqueue(item: T), dequeue(): T | undefined and a size getter. Use a Queue<string> for three customers and serve the first one.
Store the items in a private T[]; shift() removes the first item.
class Queue<T> {
#items: T[] = [];
enqueue(item: T): void {
this.#items.push(item);
}
dequeue(): T | undefined {
return this.#items.shift();
}
get size(): number {
return this.#items.length;
}
}
const line = new Queue<string>();
line.enqueue("Asha");
line.enqueue("Ravi");
line.enqueue("Meera");
console.log(line.dequeue(), line.size);Asha 2Write pluck<T, K extends keyof T>(items: T[], key: K): T[K][] and use it to get the names and the prices from a product list.
items.map((item) => item[key]).
function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
return items.map((item) => item[key]);
}
const products = [
{ name: "Pen", price: 20 },
{ name: "Bag", price: 1500 },
];
console.log(pluck(products, "name"), pluck(products, "price"));[ 'Pen', 'Bag' ] [ 20, 1500 ]Given interface User { id: number; name: string; email: string; role: "admin" | "member" }, write update(user: User, changes: Partial<Omit<User, "id">>): User so the id can never be changed, and test it.
Spread the user, then the changes.
interface User {
id: number;
name: string;
email: string;
role: "admin" | "member";
}
function update(user: User, changes: Partial<Omit<User, "id">>): User {
return { ...user, ...changes };
}
const asha: User = { id: 1, name: "Asha", email: "asha@example.com", role: "member" };
console.log(update(asha, { role: "admin" }));{ id: 1, name: 'Asha', email: 'asha@example.com', role: 'admin' }Write groupBy<T, K extends string>(items: T[], getKey: (item: T) => K): Partial<Record<K, T[]>> and group a list of tasks by their status.
Start with an empty object and push each item into the array for its key, creating the array with ??=.
function groupBy<T, K extends string>(items: T[], getKey: (item: T) => K): Partial<Record<K, T[]>> {
const groups: Partial<Record<K, T[]>> = {};
for (const item of items) {
(groups[getKey(item)] ??= []).push(item);
}
return groups;
}
type Task = { title: string; status: "todo" | "done" };
const tasks: Task[] = [
{ title: "Learn generics", status: "done" },
{ title: "Practice", status: "todo" },
{ title: "Read utility types", status: "done" },
];
const byStatus = groupBy(tasks, (t) => t.status);
console.log(byStatus.done?.map((t) => t.title), byStatus.todo?.length);[ 'Learn generics', 'Read utility types' ] 1Write a mapped type Validation<T> that maps every property of T to string | null (an error message or null), and use it to validate a sign-up object where the email must contain "@" and the age must be at least 18.
type Validation<T> = { [K in keyof T]: string | null }.
type Validation<T> = { [K in keyof T]: string | null };
interface Signup {
email: string;
age: number;
}
function validate(s: Signup): Validation<Signup> {
return {
email: s.email.includes("@") ? null : "Email is not valid",
age: s.age >= 18 ? null : "Must be 18 or older",
};
}
console.log(validate({ email: "asha.example.com", age: 21 }));{ email: 'Email is not valid', age: null }