Import syntax variations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this import usage?

Given the following TypeScript module and import statements, what will be the output when running console.log?

Typescript

/* module.ts */
export const value = 42;
export default function greet() { return 'Hello'; }

/* main.ts */
import greet, { value } from './module';
console.log(greet(), value);

A SyntaxError

B "undefined 42"

C "Hello undefined"

D "Hello 42"

💡 Hint

Default exports can be imported with any name, named exports must match exactly.

The default export is the function greet, so calling greet() returns 'Hello'. The named export 'value' is 42. So console.log prints 'Hello 42'.

❓ Predict Output

intermediate

What error occurs with this import statement?

Consider this import statement in TypeScript:

import { default as greet } from './module';

where module.ts has a default export function. What happens when you run this?

Typescript

/* module.ts */
export default function greet() { return 'Hi'; }

/* main.ts */
import { default as greet } from './module';
console.log(greet());

A SyntaxError: Unexpected token 'default'

B Runs and prints 'Hi'

C TypeError: greet is not a function

D Module not found error

💡 Hint

Default exports cannot be imported inside curly braces as 'default'.

You cannot import the default export using curly braces with the name 'default'. This causes a syntax error.

❓ Predict Output

advanced

What is the output of this namespace import?

Given module.ts exports multiple named constants, what does this code print?

import * as mod from './module';
console.log(mod.a, mod.b);

Typescript

/* module.ts */
export const a = 1;
export const b = 2;

/* main.ts */
import * as mod from './module';
console.log(mod.a, mod.b);

A SyntaxError

B undefined undefined

C 1 2

D TypeError: mod.a is not a function

💡 Hint

Namespace import collects all named exports as properties.

The namespace import 'mod' contains all named exports as properties. So mod.a is 1 and mod.b is 2.

❓ Predict Output

advanced

What is the output when importing a type only?

Given this code, what will be printed?

import type { User } from './types';
const user: User = { name: 'Alice' };
console.log(typeof user);

Typescript

/* types.ts */
export interface User { name: string; }

/* main.ts */
import type { User } from './types';
const user: User = { name: 'Alice' };
console.log(typeof user);

A "object"

B TypeError

C "undefined"

D "User"

💡 Hint

Type imports are erased at runtime, so user is a normal object.

The 'import type' is erased during compilation. The variable 'user' is a normal object, so typeof user is 'object'.

🧠 Conceptual

expert

Which import syntax correctly imports a default export and renames it?

You have a module with a default export function. Which import statement correctly imports it and renames it to myFunc?

A import { default as myFunc } from './module';

B import myFunc from './module';

C import * as myFunc from './module';

D import { myFunc } from './module';

💡 Hint

Default exports are imported without curly braces and can be renamed by the import name.

The correct syntax to import a default export and rename it is simply to import it without braces and give it the desired name. Option B is invalid syntax, B imports the whole module as an object, D looks for a named export 'myFunc' which does not exist.