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.