Import syntax variations in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the default export from the module.

Typescript

import [1] from './module';

Drag options to blanks, or click blank then click option'

Adefault

B{ myDefault }

C* as myDefault

DmyDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces for default import

Using '*' import syntax for default import

To import the default export, use import myDefault from './module';.

2fill in blank

medium

Complete the code to import a named export called 'myFunc' from the module.

Typescript

import [1] from './module';

Drag options to blanks, or click blank then click option'

A{ myFunc }

BmyFunc

C* as myFunc

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting curly braces for named import

Using default import syntax for named export

Named exports must be imported using curly braces: import { myFunc } from './module';.

3fill in blank

hard

Fix the error in the import statement to import all exports as an object named 'utils'.

Typescript

import [1] from './utils';

Drag options to blanks, or click blank then click option'

A* as utils

B{ utils }

Cutils

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting '*' when importing all exports

Using curly braces incorrectly for namespace import

To import all exports as an object, use import * as utils from './utils';.

4fill in blank

hard

Fill both blanks to import the default export as 'main' and a named export 'helper' from the module.

Typescript

import [1], [2] from './module';

Drag options to blanks, or click blank then click option'

Amain

B{ helper }

Chelper

D{ main }

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces for default import

Omitting curly braces for named import

To import default and named exports together: import main, { helper } from './module';.

5fill in blank

hard

Fill all three blanks to import the default export as 'App', named exports 'useState' and 'useEffect' from 'react'.

Typescript

import [1], [2] from 'react';

// Use hooks like [3]() inside your component

Drag options to blanks, or click blank then click option'

AApp

B{ useState, useEffect }

CuseState

D{ App }

Attempts:

3 left

💡 Hint

Common Mistakes

Using braces for default import

Not importing named exports correctly

Using named exports without braces

Correct import syntax: import App, { useState, useEffect } from 'react'; and then use useState() in code.

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