“This is the first day of my participation in the August More Text Challenge.

import side effect

Some modules have global state that is established for use by other modules. These modules do not have any export syntax or are used without caring about the export content in the module. In this case, you can use the following syntax:

import './index.ts'
Copy the code

import types

Import types can be used to import types and can be guaranteed to be completely cleaned up after compilation.

You can improve compilation tools such as Babel’s compilation behavior by using the isolatedModules option (too hard to translate…)

TS 3.8 release note: import types

re-export

Export. / XXXX. * from "ts"Copy the code

export = & import = require()

Export = Specifies an object to export from the module. This object can be a class, interface, namespace, function, or enumeration type.

For objects exported using export = import Module = require(“module”)

module.ts

class Module {}
export = Module
Copy the code

index.ts

import Module = require("./module")
Copy the code

Dynamic loading

Use require(” XXX “) directly, preferably using typeof XXX to ensure the typeof the imported object

Ambient Modules

Use the declare Module “XXX” syntax in ts/ D.ts files to define modules. Then use the import syntax to “defer declaration”

declare module "url" { export interface Url { protocol? : string; hostname? : string; pathname? : string; } export function parse(urlStr: string, parseQueryString? , slashesDenoteHost?) : Url; } declare module "path" { export function normalize(p: string): string; export function join(... paths: any[]): string; export var sep: string; }Copy the code

Use /// to import the declaration file, and then import the required module type.

If you import directly, the path module is imported as well

/// <reference path="node.d.ts"/>
import * as URL from "url";
let myUrl = URL.parse("http://www.typescriptlang.org");
Copy the code

Shorthand ambient modules

If you don’t want to define the contents of a new module immediately when writing it, you can use the following method

declare module "xxxx";
Copy the code

Can be used as an “existing” module

declare module "xxxx"

import x, {y} from "xxxx"
Copy the code

Wildcard module declarations

Some module loaders can load non-JS files. This particular loading behavior can be indicated by prefixes and postfixes.

declare module "*! text" { const content: string; export default content; } declare module "json! *" { const value: any; export default value; }Copy the code

The import

import fileContent from "./xyz.txt! text"; import data from "json! http://example.com/data.json"; console.log(data, fileContent);Copy the code

The exported content should be close to the top level

Avoid deep nesting, such as exporting namespaces and static methods of classes.

If only one method or variable is exported, export Default is used.

If you want to export multiple objects. So put them together for top level.

export calss testC {}
export function testF {}
Copy the code

Re-export to extend

It is sometimes encountered that extend is a module. At this point, extend the imported classes in a new Module and then export them. To ensure that consumers have no perception.

cal.ts

export class cal {}
Copy the code

extend.ts

import { cal } from "./cal.ts"
class calEx extends cal {}

export { calEx as cal }
Copy the code

consume.ts

import { cal } from "extend.ts"

const c = new cal()
Copy the code

Do not use namespaces in modules

Namespaces are designed to solve the problem of variable name conflicts in global declarations. In a module, there is no case where two objects have the same name.

Red Flag Danger signals

1. The file has only one top-level declaration: export namespace Foo {… }. Instead of using namespaces, move the contents of the namespace to the top level.

2. Multiple files have the same export namespace Foo{… }. These namespaces are not merged