Why typed classes matter in Typescript - Quick Recap

Recall & Review

beginner

What is a typed class in TypeScript?

A typed class in TypeScript is a class where properties and methods have explicit types, helping catch errors early and improving code clarity.

beginner

How do typed classes help prevent bugs?

Typed classes check that values assigned to properties or passed to methods match expected types, reducing mistakes like assigning a number where a string is expected.

beginner

Why does using typed classes improve code readability?

Typed classes make it clear what kind of data each property or method uses, so other developers (or you later) can understand the code quickly without guessing.

intermediate

What role do typed classes play in IDE support?

Typed classes enable better editor features like auto-completion, error highlighting, and refactoring tools, making coding faster and safer.

intermediate

Can typed classes help with future code maintenance? How?

Yes, typed classes make it easier to update and fix code later because types act like a contract, showing what data is expected and preventing accidental changes.

What is the main benefit of using typed classes in TypeScript?

A Remove the need for classes

B Make the code run faster

C Catch errors early by enforcing data types

D Automatically generate UI components

Typed classes help catch errors early by checking that data matches expected types.

How do typed classes improve collaboration in a team?

A By allowing any data type anywhere

B By hiding implementation details

C By removing the need for comments

D By making data types clear and consistent

Typed classes make data types clear, so team members understand how to use classes correctly.

Which of these is NOT a direct advantage of typed classes?

A Faster runtime performance

B Early error detection

C Improved IDE support

D Better code readability

Typed classes improve development experience but do not directly make code run faster.

What happens if you assign a wrong type to a typed class property?

A TypeScript shows an error during development

B The program crashes at runtime

C The value is automatically converted

D Nothing, it works fine

TypeScript catches type mismatches during development, preventing errors before running the code.

Why are typed classes helpful for code maintenance?

A They make code shorter

B They provide clear expectations for data types

C They remove the need for testing

D They allow dynamic typing

Typed classes act like a contract, making it easier to maintain and update code safely.

Explain in your own words why typed classes matter in TypeScript.

Think about how types help you and others understand and avoid mistakes.

Describe how typed classes can help when you come back to your code after some time.

Consider how types act like labels that remind you what each part expects.

Practice

1. Why are typed classes important in TypeScript?

easy

A. They make the code run faster at runtime.

B. They allow writing code without any rules.

C. They help catch errors before running the code.

D. They remove the need for functions.

Solution

1. Step 1: Understand typed classes role

   Typed classes define what kind of data each property should hold, helping catch mistakes early.

2. Step 2: Identify the benefit

   This early error detection happens before running the program, improving code safety.

3. Final Answer:

   They help catch errors before running the code. -> Option C

4. Quick Check:

   Typed classes catch errors early = B [OK]

Hint: Typed classes catch mistakes early, not speed up runtime [OK]

Common Mistakes:

• Thinking typed classes speed up code execution
• Believing typed classes remove the need for functions
• Assuming typed classes allow ignoring data rules

2. Which of the following is the correct way to declare a typed class property in TypeScript?

easy

A. class User { name = string; }

B. class User { name: string; }

C. class User { string name; }

D. class User { name -> string; }

Solution

1. Step 1: Recall TypeScript property syntax

   In TypeScript, properties are declared with a colon between name and type, like name: string;.

2. Step 2: Check each option

   class User { name: string; } uses correct syntax. Options A, B, and C use invalid syntax.

3. Final Answer:

   class User { name: string; } -> Option B

4. Quick Check:

   Property declaration uses colon = D [OK]

Hint: Use colon between property and type in classes [OK]

Common Mistakes:

• Using equals sign instead of colon for type
• Placing type before property name
• Using arrows or other symbols instead of colon

3. What will be the output of this TypeScript code?

class Product {
  name: string;
  price: number;
  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }
  display() {
    return `${this.name} costs $${this.price}`;
  }
}
const item = new Product('Book', 15);
console.log(item.display());

medium

A. Book costs $15

B. Book costs $15.00

C. undefined costs $15

D. Error: price is not a string

Solution

1. Step 1: Understand class and constructor

   The constructor sets name to 'Book' and price to 15.

2. Step 2: Check display method output

   The display method returns a string combining name and price exactly as "Book costs $15".

3. Final Answer:

   Book costs $15 -> Option A

4. Quick Check:

   Display method returns formatted string = C [OK]

Hint: Check constructor values and string template output [OK]

Common Mistakes:

• Expecting price to show decimals automatically
• Confusing undefined property values
• Thinking type mismatch causes runtime error here

4. Identify the error in this TypeScript class and fix it:

class Person {
  age: number;
  constructor(age: string) {
    this.age = age;
  }
}

medium

A. Change constructor parameter type to number

B. Change property type to string

C. Remove type annotations completely

D. No error, code is correct

Solution

1. Step 1: Compare property and constructor types

   The property age is a number, but constructor expects a string parameter.

2. Step 2: Fix type mismatch

   Change constructor parameter type to number to match property type.

3. Final Answer:

   Change constructor parameter type to number -> Option A

4. Quick Check:

   Property and parameter types must match = A [OK]

Hint: Match constructor parameter types with property types [OK]

Common Mistakes:

• Ignoring type mismatch between property and parameter
• Changing property type unnecessarily
• Assuming no error when types differ

5. You want to create a typed class in TypeScript that holds a list of users with their names and ages. Which approach best ensures type safety and easy maintenance?

hard

A. Use a class with properties typed as strings only.

B. Use a class with any type for properties to allow flexibility.

C. Use plain JavaScript objects without types for faster coding.

D. Use a class with typed properties and an array of user objects typed with an interface.

Solution

1. Step 1: Consider type safety and maintenance

   Typed properties and interfaces help catch errors and make code clear for teamwork.

2. Step 2: Evaluate options

   A class with typed properties and an array of user objects typed with an interface ensures safety and clarity. Other options sacrifice safety or clarity.

3. Final Answer:

   Use a class with typed properties and an array of user objects typed with an interface. -> Option D

4. Quick Check:

   Typed classes + interfaces = best practice [OK]

Hint: Combine typed classes with interfaces for clear, safe code [OK]

Common Mistakes:

• Using any type loses type safety
• Ignoring interfaces reduces code clarity
• Typing all properties as strings limits data accuracy