Type alias vs inline types in Typescript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function using type alias vs inline type

What is the output of this TypeScript code when calling printUserInfo(user)?

Typescript

type User = { name: string; age: number };

const user: User = { name: "Alice", age: 30 };

function printUserInfo(u: User) {
  console.log(`Name: ${u.name}, Age: ${u.age}`);
}

printUserInfo(user);

A Name: undefined, Age: undefined

B Name: Alice, Age: undefined

C Name: Alice, Age: 30

D Name: undefined, Age: 30

💡 Hint

Check how the type alias User is used to type the variable and function parameter.

The type alias User defines the shape of the object. The variable user matches this shape, so the function prints the correct values.

❓ Predict Output

intermediate

Output difference between inline type and type alias

What will this code output when calling printUserInfo(user)?

Typescript

const user = { name: "Bob", age: 25 };

function printUserInfo(u: { name: string; age: number }) {
  console.log(`Name: ${u.name}, Age: ${u.age}`);
}

printUserInfo(user);

A Name: Bob, Age: 25

B Name: undefined, Age: undefined

C Name: Bob, Age: undefined

D Name: undefined, Age: 25

💡 Hint

Inline types work the same as type aliases for typing function parameters.

The inline type defines the expected shape directly in the function parameter. The object matches this shape, so the output is correct.

🔧 Debug

advanced

Why does this code cause a TypeScript error?

This code causes a TypeScript error. What is the reason?

Typescript

type Person = { name: string; age: number };

const person: Person = { name: "Eve" };

function greet(p: Person) {
  console.log(`Hello, ${p.name}`);
}

greet(person);

A The variable 'person' is not declared with 'const'.

B The function parameter 'p' is missing the 'age' property.

C Type alias 'Person' cannot be used for object typing.

D Missing property 'age' in the object assigned to 'person'.

💡 Hint

Check if the object matches all properties defined in the type alias.

The object assigned to 'person' lacks the required 'age' property, causing a TypeScript error.

🧠 Conceptual

advanced

Difference between type alias and inline type in function parameters

Which statement best describes the difference between using a type alias and an inline type for function parameters in TypeScript?

A Type aliases cannot be used for function parameters, only inline types can.

B Type aliases improve code readability and reusability, while inline types are defined directly and used once.

C Inline types automatically infer types from variables, type aliases do not.

D Inline types are faster at runtime than type aliases.

💡 Hint

Think about how type aliases help organize code.

Type aliases let you name a type and reuse it, making code cleaner. Inline types are written directly where needed and are not reusable.

📝 Syntax

expert

Which option causes a syntax error?

Which of the following TypeScript snippets causes a syntax error?

A

type User = { name: string; age: number }
const user: User = { name: "Sam", age: 40 };

B

function greet(user: { name: string; age: number }) {
  console.log(user.name);
}

C

type User = { name: string; age: number };
const user: User = { name: "Sam", age: 40 };

D const user: { name: string; age: number } = { name: "Sam", age: 40 };

💡 Hint

Check for missing semicolons or braces in type alias declarations.

Option A is missing a semicolon in the type alias declaration, causing a syntax error.

Practice

1. What is the main advantage of using a type alias in TypeScript compared to inline types?

easy

A. It makes the code run faster at runtime.

B. It automatically checks for runtime errors.

C. It allows reusing the same type definition multiple times with a clear name.

D. It removes the need to write types altogether.

Solution

1. Step 1: Understand what a type alias does

   A type alias gives a name to a type, so you can use it repeatedly without rewriting the full type.

2. Step 2: Compare with inline types

   Inline types are written directly where needed and are not reusable by name, making code less clear if repeated.

3. Final Answer:

   It allows reusing the same type definition multiple times with a clear name. -> Option C

4. Quick Check:

   Type alias = reusable named type [OK]

Hint: Type alias = named reusable type, inline = one-time use [OK]

Common Mistakes:

• Thinking type aliases affect runtime speed
• Confusing type aliases with runtime error checking
• Believing type aliases remove the need for types

2. Which of the following is the correct syntax to define a type alias for an object with a name string and age number?

easy

A. type Person = { name: string; age: number };

B. alias Person = { name: string; age: number };

C. type Person := { name: string; age: number };

D. define Person = { name: string; age: number };

Solution

1. Step 1: Recall TypeScript type alias syntax

   The correct syntax uses the keyword type, followed by the alias name, an equals sign, and the type definition.

2. Step 2: Check each option

   Only type Person = { name: string; age: number }; matches the correct syntax exactly. Others use invalid keywords or symbols.

3. Final Answer:

   type Person = { name: string; age: number }; -> Option A

4. Quick Check:

   Correct alias syntax = type Name = Type [OK]

Hint: Type alias syntax always starts with 'type' keyword [OK]

Common Mistakes:

• Using 'alias' instead of 'type'
• Using ':=' instead of '='
• Using 'define' keyword which is invalid

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

type Point = { x: number; y: number };

const p1: Point = { x: 5, y: 10 };
const p2: { x: number; y: number } = { x: 5, y: 10 };

console.log(p1.x === p2.x && p1.y === p2.y);

medium

A. undefined

B. false

C. Type error at compile time

D. true

Solution

1. Step 1: Understand type alias and inline type usage

   Both p1 and p2 have the same shape: objects with x and y numbers.

2. Step 2: Compare the values

   Both objects have x: 5 and y: 10, so the comparison p1.x === p2.x && p1.y === p2.y is true.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Same shape objects compare equal values = true [OK]

Hint: Type alias or inline same shape means same type [OK]

Common Mistakes:

• Thinking type alias creates different runtime objects
• Expecting compile error due to inline vs alias
• Confusing object reference equality with value equality

4. Identify the error in this TypeScript code snippet:

type User = { id: number; name: string };

const user: User = { id: 1, name: 'Alice', age: 30 };

medium

A. The property 'name' should be a number, not a string.

B. Extra property 'age' is not allowed in the object assigned to type User.

C. Type alias cannot be used for object types.

D. Missing semicolon after type alias definition.

Solution

1. Step 1: Check the type alias definition

   The type alias User expects an object with only id and name properties.

2. Step 2: Check the assigned object

   The object has an extra property age which is not defined in User, causing a TypeScript error.

3. Final Answer:

   Extra property 'age' is not allowed in the object assigned to type User. -> Option B

4. Quick Check:

   Extra properties not in type cause error [OK]

Hint: Object must match type exactly; no extra properties [OK]

Common Mistakes:

• Ignoring extra properties in object literals
• Thinking semicolon is mandatory after type alias
• Confusing property types in the alias

5. You want to define a reusable type for a product with id (number), name (string), and an optional description (string). Which approach is best and why?

Options:
A) Use a type alias for the product type and reuse it.
B) Use inline types everywhere the product is used.
C) Use a class instead of a type alias.
D) Use a union type of string and number for all properties.

hard

A. Use a type alias for the product type and reuse it.

B. Use inline types everywhere the product is used.

C. Use a class instead of a type alias.

D. Use a union type of string and number for all properties.

Solution

1. Step 1: Consider reusability and clarity

   A product type is used multiple times, so naming it with a type alias improves clarity and reuse.

2. Step 2: Evaluate other options

   Inline types cause repetition and clutter. Classes add runtime overhead and are not necessary here. Union types for all properties are incorrect and confusing.

3. Final Answer:

   Use a type alias for the product type and reuse it. -> Option A

4. Quick Check:

   Reusable complex types = type alias [OK]

Hint: Use type alias for reusable complex types [OK]

Common Mistakes:

• Using inline types repeatedly causing duplication
• Confusing classes with type aliases
• Misusing union types for unrelated properties