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.

Practice

1. Which import syntax correctly imports the default export from a module named utils?

easy

A. import utils from './utils';

B. import { utils } from './utils';

C. import * as utils from './utils';

D. import utils = require('./utils');

Solution

1. Step 1: Understand default export import syntax

   The default export is imported without curly braces using import name from 'module'.

2. Step 2: Analyze each option

   import utils from './utils'; uses the correct syntax for default import. import { utils } from './utils'; uses curly braces which is for named exports. import * as utils from './utils'; imports everything as an object, not default. import utils = require('./utils'); is CommonJS style, not ES module syntax.

3. Final Answer:

   import utils from './utils'; -> Option A

4. Quick Check:

   Default import = import name from 'module' [OK]

Hint: Default imports have no braces, named imports do [OK]

Common Mistakes:

• Using curly braces for default imports
• Confusing * as import with default import
• Mixing CommonJS require syntax with ES modules

2. Which of the following is the correct syntax to import only the named export calculate from a module mathUtils?

easy

A. import calculate from './mathUtils';

B. import { calculate } from './mathUtils';

C. import * as calculate from './mathUtils';

D. import calculate = require('./mathUtils');

Solution

1. Step 1: Identify named export import syntax

   Named exports are imported using curly braces: import { name } from 'module'.

2. Step 2: Check each option

   import { calculate } from './mathUtils'; correctly imports the named export calculate. import calculate from './mathUtils'; is for default imports. import * as calculate from './mathUtils'; imports all exports as an object, not a single named export. import calculate = require('./mathUtils'); uses CommonJS syntax, not ES modules.

3. Final Answer:

   import { calculate } from './mathUtils'; -> Option B

4. Quick Check:

   Named import = import { name } from 'module' [OK]

Hint: Use curly braces for named imports only [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using * as import when only one named export is needed
• Confusing default and named import syntax

3. Given the following code, what will be the output?

import * as helpers from './helpers';

console.log(typeof helpers);
console.log(typeof helpers.formatDate);

Assume helpers exports a function named formatDate.

medium

A. "object" and "object"

B. "function" and "undefined"

C. "object" and "function"

D. "undefined" and "function"

Solution

1. Step 1: Understand import * as syntax

   Using import * as helpers imports all exports as an object named helpers.

2. Step 2: Determine types of helpers and helpers.formatDate

   helpers is an object, so typeof helpers is "object". formatDate is a function exported inside helpers, so typeof helpers.formatDate is "function".

3. Final Answer:

   "object" and "function" -> Option C

4. Quick Check:

   import * as = object, function inside = function [OK]

Hint: import * as creates an object with exported members [OK]

Common Mistakes:

• Thinking import * as imports a function directly
• Confusing typeof results for functions and objects
• Assuming default export with import * as syntax

4. Identify the error in this import statement:

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

medium

A. You cannot rename the default import using curly braces.

B. The syntax is correct; no error.

C. You must use import myFunc from './module'; for default imports.

D. Default imports must be imported with * as syntax.

Solution

1. Step 1: Understand default import syntax

   Default imports are imported without curly braces and can be renamed directly: import myFunc from 'module'.

2. Step 2: Analyze the given syntax

   The syntax import { default as myFunc } tries to rename the default export inside curly braces, which is invalid in ES module syntax.

3. Final Answer:

   You cannot rename the default import using curly braces. -> Option A

4. Quick Check:

   Default import no braces, no rename inside braces [OK]

Hint: Default imports never use curly braces [OK]

Common Mistakes:

• Trying to rename default import inside curly braces
• Confusing named export renaming with default import
• Assuming default import can be destructured

5. You want to import a named export parseData from dataUtils but avoid naming conflicts by renaming it to parse. Which is the correct import statement?

hard

A. import parse from './dataUtils';

B. import { parse as parseData } from './dataUtils';

C. import * as parse from './dataUtils';

D. import { parseData as parse } from './dataUtils';

Solution

1. Step 1: Understand renaming named imports

   You can rename named imports using import { originalName as newName }.

2. Step 2: Check each option

   import { parseData as parse } from './dataUtils'; correctly renames parseData to parse. import parse from './dataUtils'; imports default export, not named. import * as parse from './dataUtils'; imports all exports as an object named parse. import { parse as parseData } from './dataUtils'; tries to rename parse to parseData, which is reversed.

3. Final Answer:

   import { parseData as parse } from './dataUtils'; -> Option D

4. Quick Check:

   Rename named import with 'as' inside braces [OK]

Hint: Use 'as' inside braces to rename named imports [OK]

Common Mistakes:

• Using default import syntax for named exports
• Confusing rename direction in 'as' syntax
• Using * as when only one function is needed