Type-only imports and exports in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with type-only import?

Consider the following TypeScript files. What will be the output when compiled and run with Node.js (ignoring type-only imports)?

Typescript

/* types.ts */
export type User = { name: string; age: number };

/* main.ts */
import type { User } from './types';

const user: User = { name: 'Alice', age: 30 };
console.log(user.name);

A Alice

B undefined

C Compilation error due to type-only import

D Runtime error: User is not defined

💡 Hint

Type-only imports are removed from the compiled JavaScript code.

Type-only imports are used only during compilation for type checking and do not appear in the output JavaScript. The variable 'user' is defined with the type User, but the type is erased at runtime. The console.log prints 'Alice' as expected.

❓ Predict Output

intermediate

What error does this code raise due to incorrect type-only export?

Examine this TypeScript code snippet. What error will occur during compilation?

Typescript

/* data.ts */
const data = { id: 1, value: 'test' };
export type Data = typeof data;
export default data;

/* index.ts */
import data, { type Data } from './data';

const newData: Data = { id: 2, value: 'hello' };
console.log(newData);

A Error: Default import 'data' is not a constructor

B Runtime error: newData is undefined

C Error: Cannot use type-only export 'Data' as a value

D No error, outputs { id: 2, value: 'hello' }

💡 Hint

Type-only exports can be imported with 'type' keyword and used for typing only.

The code correctly imports the default value 'data' and the type 'Data' separately. The type-only import is erased at runtime, so no error occurs. The console.log prints the newData object.

❓ Predict Output

advanced

What is the output of this code mixing type-only and value imports?

Analyze this TypeScript code. What will be printed to the console?

Typescript

/* shapes.ts */
export type Circle = { radius: number };
export const PI = 3.14;

/* app.ts */
import type { Circle } from './shapes';
import { PI } from './shapes';

const circle: Circle = { radius: 5 };
console.log(PI * circle.radius * circle.radius);

A Compilation error: Cannot mix type-only and value imports

B NaN

C 78.5

D Runtime error: PI is undefined

💡 Hint

Type-only imports do not affect runtime, value imports do.

The value PI is imported normally and used in the calculation. The type Circle is imported only for type checking and removed at runtime. The calculation outputs 78.5.

❓ Predict Output

advanced

What error occurs when using a type-only import as a value?

What happens when you try to use a type-only import as a value in this code?

Typescript

/* models.ts */
export type Product = { id: number; name: string };

/* index.ts */
import type { Product } from './models';

const p = Product;
console.log(p);

A Compilation error: 'Product' only refers to a type but is used as a value here

B Runtime error: Product is undefined

C Outputs the type definition of Product

D No error, outputs the Product object

💡 Hint

Type-only imports cannot be used as values at runtime.

Since 'Product' is imported only as a type, it does not exist at runtime. Using it as a value causes a compilation error.

🧠 Conceptual

expert

Which statement about type-only imports and exports is true?

Select the correct statement about TypeScript's type-only imports and exports.

A Type-only imports allow importing runtime values without type information.

B Using 'import type' ensures the imported entity is removed from the JavaScript output.

C Type-only imports are included in the compiled JavaScript output as variables.

D Type-only exports can be imported without the 'type' keyword and used as runtime values.

💡 Hint

Think about what happens to type-only imports during compilation.

The 'import type' syntax tells TypeScript to import only the type information and remove it from the emitted JavaScript code, so it does not exist at runtime.