3 min read views

Day27 :TypeScript Learning : Module

Before ES6, the common module concept was CommonJS, using require to import modules and exports to export modules.

typescript30tech

Day27 :TypeScript Learning : Module

Before ES6, the common module concept was CommonJS, using require to import modules and exports to export modules. With ES6, import and export were introduced for module management. TypeScript also supports this. Today, we will learn about ES Module Syntax, TypeScript's ES Module Syntax, and CommonJS Syntax.

If there are any mistakes, please feel free to leave comments. Thank you!

ES Module Syntax

export default

To export a single variable or function, you can use export default:

// @filename: hello.ts
export default function helloWorld() {
  console.log("Hello, world!");
}
import hello from "./hello.js";
hello();

export

If you want to export multiple variables or functions, you can use export:

// @filename: maths.ts
export var pi = 3.14;
export let squareTwo = 1.41;
export const phi = 1.61;
 
export class RandomNumberGenerator {}
 
export function absolute(num: number) {
  if (num < 0) return num * -1;
  return num;
}
import { pi, phi, absolute } from "./maths.js";
 
console.log(pi);
const absPhi = absolute(phi);

Additional Import Syntax

import `name` from
 
import {`name`} from

In addition to the two common import methods above, there are some additional import usages:

import can be renamed

Using the as keyword:

import { pi as π } from "./maths.js";
 
console.log(π);

mix and match into single import

// @filename: maths.ts
export const pi = 3.14;
export default class RandomNumberGenerator {}

Using , to combine:

// @filename: app.ts
import RNGen, { pi as π } from "./maths.js";
 
console.log(π);

* as name take all into a single namespace

Import everything * and name it math:

import * as math from "./maths.js";
 
console.log(math.pi);
const positivePhi = math.absolute(math.phi);

import "./file"

Directly import a file to execute:

// @filename: app.ts
import "./maths.js";
 
console.log("3.14");

TypeScript Specific ES Module Syntax

type and interface

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number };
 
export interface Dog {
  breeds: string[];
  yearOfBirth: number;
}
 
// @filename: app.ts
import { Cat, Dog } from "./animal.js";
type Animals = Cat | Dog;

import type

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number };
export type Dog = { breeds: string[]; yearOfBirth: number };
export const createCatName = () => "fluffy";
 
// @filename: valid.ts
import type { Cat, Dog } from "./animal.js";
export type Animals = Cat | Dog;
 
// @filename: app.ts
import type { createCatName } from "./animal.js";
const name = createCatName();

Inline type imports

// @filename: app.ts
import { createCatName, type Cat, type Dog } from "./animal.js";
 
export type Animals = Cat | Dog;
const name = createCatName();

CommonJS Syntax

module.exports

function absolute(num: number) {
  if (num < 0) return num * -1;
  return num;
}
 
module.exports = {
  pi: 3.14,
  squareTwo: 1.41,
  phi: 1.61,
  absolute,
};

require

const maths = require("maths");
maths.pi;

Destructuring

const { squareTwo } = require("maths");
squareTwo;

Thank you for reading! See you tomorrow!

References

https://www.typescriptlang.org/docs/handbook/2/modules.html

Related Posts

Comments