Default generic types in Typescript - Mini Project: Build & Apply

Using Default Generic Types in TypeScript

📖 Scenario: Imagine you are creating a simple container that can hold a value of any type. Sometimes, you want it to hold a string by default if no type is specified.

🎯 Goal: Build a generic Box type with a default type of string. Then create boxes with and without specifying the type.

📋 What You'll Learn

Create a generic type called Box with a default type parameter T = string

Create a variable stringBox of type Box without specifying the type parameter

Create a variable numberBox of type Box<number> specifying the type parameter

Assign appropriate values to stringBox and numberBox

Print the values of stringBox and numberBox

💡 Why This Matters

🌍 Real World

Default generic types help create flexible and reusable code components that work well with common default types, reducing the need to always specify types explicitly.

💼 Career

Understanding default generic types is useful for writing clean, maintainable TypeScript code in professional software development, especially in libraries and frameworks.

1

Create the generic Box type with default string

Create a generic type called Box with a type parameter T that defaults to string. It should have one property value of type T.

Typescript

# Your code here

Hint

Use type Box<T = string> = { value: T } to set a default generic type.

2

Create stringBox and numberBox variables

Create a variable called stringBox of type Box without specifying the type parameter. Also create a variable called numberBox of type Box<number> specifying the type parameter.

Typescript

type Box = {
  value: T
}
# Your code here

Hint

Declare stringBox as Box and numberBox as Box<number>.

3

Assign values to stringBox and numberBox

Assign the string 'hello' to stringBox.value and the number 42 to numberBox.value.

Typescript

type Box = {
  value: T
}

let stringBox: Box
let numberBox: Box
# Your code here

Hint

Assign objects with value properties matching the types.

4

Print the values of stringBox and numberBox

Write two console.log statements to print stringBox.value and numberBox.value.

Typescript

type Box = {
  value: T
}

let stringBox: Box
let numberBox: Box

stringBox = { value: 'hello' }
numberBox = { value: 42 }
# Your code here

Hint

Use console.log(stringBox.value) and console.log(numberBox.value).

Practice

1.

What is the main purpose of default generic types in TypeScript?

easy

A. To provide a fallback type when no type argument is specified

B. To enforce a specific type always

C. To disable generics in a function

D. To convert types to strings automatically

Solution

1. Step 1: Understand generic types

   Generic types allow functions or classes to work with any type specified by the user.

2. Step 2: Role of default generic types

   Default generic types provide a fallback type if the user does not specify one explicitly.

3. Final Answer:

   To provide a fallback type when no type argument is specified -> Option A

4. Quick Check:

   Default generic types = fallback type [OK]

Hint: Defaults fill in missing generic types automatically [OK]

Common Mistakes:

• Thinking default generics enforce a fixed type
• Confusing default generics with type conversion
• Believing default generics disable generics

2.

Which of the following is the correct syntax to set a default generic type T to string in a function?

function example<T = string>()

easy

A. function example<T extends string>()

B. function example<T: string>()

C. function example<T = string>()

D. function example<T? = string>()

Solution

1. Step 1: Recall TypeScript generic syntax

   Default generic types use the equals sign (=) to assign a fallback type.

2. Step 2: Analyze options

   function example<T = string>() uses <T = string> which is correct syntax for default generic types.

3. Final Answer:

   function example<T = string>() -> Option C

4. Quick Check:

   Default generic syntax uses = [OK]

Hint: Use = to assign default generic types [OK]

Common Mistakes:

• Using colon (:) instead of equals (=)
• Adding question mark (?) incorrectly
• Confusing extends with default assignment

3.

What will be the output of the following TypeScript code?

function wrap<T = number>(value: T): T[] {
  return [value];
}

const result = wrap('hello');
console.log(result);

medium

A. ["number"]

B. ["hello"]

C. ["value"]

D. Type error

Solution

1. Step 1: Understand default generic type usage

   The function wrap has a default generic type T = number, but the caller passes a string 'hello', so T becomes string.

2. Step 2: Analyze function output

   The function returns an array containing the passed value, so it returns ["hello"].

3. Final Answer:

   ["hello"] -> Option B

4. Quick Check:

   Explicit type overrides default generic [OK]

Hint: Passed type overrides default generic type [OK]

Common Mistakes:

• Assuming default generic always applies
• Expecting a type error for different type
• Confusing value with type name

4.

Identify the error in this TypeScript code using default generic types:

function identity<T = number>(arg: T): T {
  return arg.length;
}

medium

A. Property 'length' may not exist on type 'T'

B. No error, code is correct

C. Return type should be number, not T

D. Default generic type cannot be 'number'

Solution

1. Step 1: Analyze the generic type and usage

   The generic type T defaults to number, but number does not have a length property.

2. Step 2: Identify the error

   Accessing arg.length causes a TypeScript error because length may not exist on type T.

3. Final Answer:

   Property 'length' may not exist on type 'T' -> Option A

4. Quick Check:

   Accessing unknown properties on generic types causes errors [OK]

Hint: Check if generic type supports accessed properties [OK]

Common Mistakes:

• Ignoring property existence on generic types
• Thinking default generic restricts properties
• Assuming no error if default is number

5.

Given this generic function with a default type, how can you call it to get an array of booleans?

function createArray<T = string>(length: number, value: T): T[] {
  return Array(length).fill(value);
}

Choose the correct call:

hard

A. createArray<boolean>(true, 3)

B. createArray(3, 'true')

C. createArray<number>(3, true)

D. createArray<boolean>(3, true)

Solution

1. Step 1: Understand default generic and call signature

   The function defaults T to string, but to get an array of booleans, we must specify T = boolean.

2. Step 2: Analyze options

   createArray<boolean>(3, true) explicitly sets T to boolean and passes true as value, which matches the type.

3. Final Answer:

   createArray<boolean>(3, true) -> Option D

4. Quick Check:

   Specify generic type to override default [OK]

Hint: Specify generic type to override default generic [OK]

Common Mistakes:

• Relying on default generic without specifying type
• Passing arguments in wrong order
• Mismatching generic type and value type