Skip to main content

Type declaration module

Modules​

namespace is almost deprecated. it appeared before ESModule system is accepted.
Instead, Use module system with export/import (ESModule) or exports, require (CommonJS)

Why to use module?​

Separate and organize the javascript & typescript code
In origin, javascript is used for only browser.
At first, you need to understand Global scope what it is.

Global scope​

You must have ever seen <script> in html , in javascript, you can declare function and use it without separating module, namespace.

name.js only has name variable.

// This is global scope
const name = 'vladimir'

In html file, name is shared all over since it's global scope

index.html​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
variable `name` has global scope
<script src="name.js"></script>
<script src="printName.js"></script>
<script src="printName2.js"></script>
</body>
</html>

File list​

File list

Result​

console output: Print result

If you redeclare name in another js it must be fail. Suppose redeclare it in printName

printName.js​

// redeclaration
const name = 'vladimir'
console.log('Test1 js file name : ', name)

This code error occurs

Uncaught SyntaxError: Identifier 'name' has already been declared (at printName.js:1:1)

Fail result

How to resolve it?​

Use module export/import . It is declaration that "This file is module". not of global scope one.

Module system between Node.js and browser

Module system

Node.js uses CommonJS from starting with require/exports.
However, the browser doesn't support CommonJS module. At first, use <script> (standard script) without module system.
and now Support modern module system with import/export
Let's see how to use it.

HTML Tag​

<body>
    <script type="module" src="./dist/index.js"></script>
</body>

But maybe meet errors since there's CORS policy of browser.

Get file:///Users~~~/dist/index.js net::ERR_FAILED

You need to pay attention to local testing
if you try to load the HTML file locally (i.e. with a file:// URL),
you'll run into CORS errors due to JavaScript module security requirements.
- MDN docs

tsconfig.json​

{
  "module": "ES6"  
}

This means that We're serving anything and trying to use file protocol.

# From this, html file served from the server (HTTP) instead of `file`
$ yarn install lite-server
$ yarn start
tip

Use modern ES Module using tsconfig and script with module property and server. Or use bundle library like browserify

import 'type' only​

  • Just import type this is helpful when I want to refer to just type not the module with actual code.
  • Reduce the size of compiled file since it must be removed completely when transpiling.

Example​

export type Item = 'HP' | 'MP'

export class ItemKing {
    name: string
}

Reference​