TypeScript-first philosophy in NestJS - Performance & Optimization

Performance: TypeScript-first philosophy

MEDIUM IMPACT

This affects the development speed and runtime type safety, indirectly influencing bundle size and error detection before runtime.

Defining API contracts and data models in a NestJS backend

NestJS

import { ApiProperty } from '@nestjs/swagger';

class User {
  @ApiProperty()
  id: number;

  @ApiProperty()
  name: string;

  @ApiProperty()
  email: string;
}

TypeScript types with decorators enable compile-time validation and automatic API documentation generation.

📈 Performance GainReduces runtime errors and improves developer productivity; no added bundle size or render blocking.

Defining API contracts and data models in a NestJS backend

NestJS

class User {
  id: any;
  name: any;
  email: any;
}

// No TypeScript types or decorators used

Lack of TypeScript types and decorators leads to missing compile-time checks and potential runtime errors.

📉 Performance CostIncreases debugging time and risk of runtime failures; no direct impact on browser rendering.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No TypeScript types	N/A	N/A	N/A	[!] OK but risky
TypeScript-first with decorators	N/A	N/A	N/A	[OK] Good for development

Rendering Pipeline

TypeScript-first philosophy mainly affects the development and build process, not the browser rendering pipeline directly.

⚠️ BottleneckNo direct bottleneck in rendering pipeline; potential build time increase if types are complex.

Optimization Tips

1TypeScript-first improves developer productivity and reduces runtime errors.

2It does not directly impact browser rendering or Core Web Vitals.

3Keep types simple to avoid longer build times.

Performance Quiz - 3 Questions

How does using a TypeScript-first approach in NestJS affect runtime performance in the browser?

A It significantly decreases page load time by optimizing DOM operations.

B It reduces runtime errors but does not directly affect browser rendering speed.

C It increases reflows by adding extra JavaScript code.

D It blocks rendering until all types are checked at runtime.

DevTools: Network

How to check: Check the size of the JavaScript bundles to ensure TypeScript compilation does not add unnecessary code.

What to look for: Look for minimal bundle size increase and absence of runtime errors in the Console panel.

Practice

1. What is the main benefit of the TypeScript-first philosophy in NestJS?

easy

A. It makes the app run faster at runtime.

B. It removes the need for any testing.

C. It helps catch errors early by using types.

D. It allows writing code without any types.

Solution

1. Step 1: Understand TypeScript's role

   TypeScript adds types to JavaScript, which helps find mistakes before running the code.

2. Step 2: Connect to NestJS philosophy

   NestJS uses TypeScript-first to improve code safety and clarity by leveraging types.

3. Final Answer:

   It helps catch errors early by using types. -> Option C

4. Quick Check:

   TypeScript-first = catch errors early [OK]

Hint: TypeScript-first means using types to find errors early [OK]

Common Mistakes:

• Thinking it makes runtime faster
• Believing it removes need for tests
• Assuming it means no types needed

2. Which of the following is the correct way to define a typed controller method in NestJS using TypeScript-first philosophy?

easy

A. async getUser(): Promise<User> { return this.userService.find(); }

B. async getUser() { return this.userService.find(); }

C. async getUser(): any { return this.userService.find(); }

D. async getUser(): string { return this.userService.find(); }

Solution

1. Step 1: Check method return type

   TypeScript-first means explicitly typing the return value, here Promise<User>.

2. Step 2: Compare options

   async getUser(): Promise<User> { return this.userService.find(); } uses correct typing; others omit or use wrong types like any or string.

3. Final Answer:

   async getUser(): Promise<User> { return this.userService.find(); } -> Option A

4. Quick Check:

   Explicit return type = async getUser(): Promise<User> { return this.userService.find(); } [OK]

Hint: Always specify method return types explicitly [OK]

Common Mistakes:

• Omitting return type annotation
• Using 'any' instead of specific types
• Using wrong return types like string

3. Given this NestJS service method using TypeScript-first philosophy:

async findUser(id: number): Promise {
  const user = await this.userRepository.findOneBy({ id });
  return user ?? null;
}

What is the type of the value returned when no user is found?

medium

A. undefined

B. an empty object {}

C. throws an error

D. null

Solution

1. Step 1: Analyze return statement

   The method returns user ?? null, which means if user is nullish, return null.

2. Step 2: Understand nullish coalescing

   If findOneBy returns undefined, the expression returns null explicitly.

3. Final Answer:

   null -> Option D

4. Quick Check:

   Nullish coalescing returns null if no user [OK]

Hint: ?? operator returns right side if left is null or undefined [OK]

Common Mistakes:

• Assuming undefined is returned
• Thinking an error is thrown
• Expecting empty object instead of null

4. Identify the error in this NestJS controller method using TypeScript-first philosophy:

@Get(':id')
async getUser(@Param('id') id: string): Promise<User> {
  return this.userService.findUser(id);
}

medium

A. The method should not be async if it returns a Promise.

B. The return type should be Promise if user might not exist.

C. The parameter id should be typed as number not string.

D. The decorator @Get is missing a path.

Solution

1. Step 1: Check return type correctness

   If findUser can return null when user not found, the controller must reflect that in its return type.

2. Step 2: Compare options

   The return type should be Promise if user might not exist. correctly points out the return type should allow null. The parameter id should be typed as number not string. is not always true because id can be string if parsed later.

3. Final Answer:

   The return type should be Promise if user might not exist. -> Option B

4. Quick Check:

   Return type must match possible null values [OK]

Hint: Return types must include null if possible [OK]

Common Mistakes:

• Ignoring possible null return
• Thinking async keyword is wrong here
• Assuming @Get needs path always

5. You want to create a NestJS DTO (Data Transfer Object) that enforces a required name string and an optional age number using TypeScript-first philosophy. Which of these is the best TypeScript definition?

hard

A. export class CreateUserDto { name: string; age?: number; }

B. export interface CreateUserDto { name?: string; age: number; }

C. export type CreateUserDto = { name?: string; age?: number; };

D. export class CreateUserDto { name?: string; age: number; }

Solution

1. Step 1: Identify required and optional properties

   The name must be required (no question mark), age optional (with question mark).

2. Step 2: Match with options

   export class CreateUserDto { name: string; age?: number; } correctly defines name as required and age as optional in a class, which is standard for NestJS DTOs.

3. Final Answer:

   export class CreateUserDto { name: string; age?: number; } -> Option A

4. Quick Check:

   Required name, optional age = export class CreateUserDto { name: string; age?: number; } [OK]

Hint: Use '?' for optional properties, omit for required [OK]

Common Mistakes:

• Marking required fields as optional
• Using interface instead of class for DTO
• Making optional fields required