Import syntax variations in Typescript - Step-by-Step Execution

Concept Flow - Import syntax variations

Start

↓

Choose import type

↓

Default

↓

Import default

↓

Use imported

↓

End

This flow shows how TypeScript imports can be default, named, or namespace style, then used in code.

Execution Sample

Typescript

import React from 'react';
import { useState } from 'react';
import * as Utils from './utils';

This code imports React as default, useState as named, and all exports from utils as namespace.

Execution Table

Step	Import Statement	Import Type	Imported Identifier	Source Module	Usage Example
1	import React from 'react';	Default	React	'react'	React.createElement(...)
2	import { useState } from 'react';	Named	useState	'react'	const [state, setState] = useState()
3	import * as Utils from './utils';	Namespace	Utils	'./utils'	Utils.helperFunction()
4	End of imports	-	-	-	-

💡 All import statements processed, ready to use imported identifiers.

Variable Tracker

Identifier	Start	After Import
React	undefined	object (default export from 'react')
useState	undefined	function (named export from 'react')
Utils	undefined	object (all exports from './utils')

Key Moments - 3 Insights

Why can't I use curly braces with default imports?

Default imports do not use curly braces because they import the single default export. Named imports use curly braces as shown in step 2 of the execution_table.

What does the * as alias syntax do?

It imports all exports from the module as properties of the alias object, shown in step 3 of the execution_table where Utils is the alias.

Can I mix default and named imports in one statement?

Yes, you can combine them like: import React, { useState } from 'react'; but each import type has its own syntax as shown in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what type of import is used for 'useState'?

A Default import

B Named import

C Namespace import

D Side-effect import

💡 Hint

Check the 'Import Type' column for step 2 in the execution_table.

At which step does the code import everything from a module as an object?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the 'Namespace' import type in the execution_table.

If you want to import only the default export and a named export together, how would the import statement look?

A import React, { useState } from 'react';

B import { React, useState } from 'react';

C import React from 'react';

D import * as React from 'react';

💡 Hint

Refer to key_moments explanation about mixing default and named imports.

Concept Snapshot

Import syntax variations in TypeScript:
- Default import: import React from 'module';
- Named import: import { name } from 'module';
- Namespace import: import * as alias from 'module';
- Can combine default and named: import React, { useState } from 'module';
- Use imported identifiers directly in code.

Full Transcript

This visual execution shows how TypeScript handles different import styles. First, default imports bring in the main export without braces. Named imports use braces to pick specific exports. Namespace imports gather all exports under one alias. The execution table traces each import statement, showing the type, identifier, and usage. Variable tracker shows how identifiers start undefined and become linked to module exports after import. Key moments clarify common confusions like why default imports don't use braces and how namespace imports work. The quiz tests understanding of import types and syntax combinations. This helps beginners see how imports load and become usable in code.