Typescript 实战 --- ES6与CommonJS的模块系统

Posted rogerwu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Typescript 实战 --- ES6与CommonJS的模块系统相关的知识,希望对你有一定的参考价值。

1、ES6模块系统

1-1、export 导出

(1)、单独导出

// a.ts

export let a = 1;

 

(2)、批量导出

// a.ts

let b = 2;
let c = 3;

export { b, c };

 

(3)、导出接口

// a.ts

export interface Info {
  name: string;
  age: number;
}

 

(4)、导出函数

// a.ts

export function f() {
  console.log(‘function f‘);
}

 

(5)、导出时 起别名

// a.ts

function g() {
  console.log(‘function g‘);
}

export { g as G }

 

(6)、默认导出,无需函数名

// a.ts

export default function() {
  console.log(‘default function‘);
}

 

(7)、导出常量

// b.ts

export const str = ‘hello‘;

 

(8)、引入外部模块,重新导出

// a.ts

export { str as hello } from ‘./b‘;

 

1-2、import 导入

(1)、批量导入

import { a, b, c } from ‘./a‘;

console.log(‘a, b, c: ‘, a, b, c);   // a, b, c:  1 2 3

 

(2)、导入接口

import { Info } from ‘./a‘;

let jim: Info = {
  name: ‘Jim Green‘,
  age: 12
}

console.log(‘jim‘, jim);   // jim { name: ‘Jim Green‘, age: 12 }

 

(3)、导入时 起别名

import { f as foo } from ‘./a‘;

foo();   // function f

 

(4)、导入模块中的所有成员,绑定在All上

import * as All from ‘./a‘;

console.log(All.G());   // function g
console.log(All.g());   // 类型“typeof import("e:/study/ts-demo/es6/a")”上不存在属性“g”

 

(5)、不加 {},导入默认

import myFunction from ‘./a‘;

myFunction();   // default function

 

2、CommonJS 模块系统

2-1、exports 导出

(1)、module.exports 整体导出

// a-node.ts

let a = {
  x: 2,
  y: 3
};

module.exports = a;

 

(2)、exports 导出多个变量

// b-node.ts

exports.c = 3;
exports.d = 4;

 

2-2、require 导入

let a1 = require(‘./a-node‘);
let b1 = require(‘./b-node‘);

console.log(a1);   // {x: 2, y: 3}
console.log(b1);   // {c: 3, d: 4}

 

以上是关于Typescript 实战 --- ES6与CommonJS的模块系统的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript

「 直播预告」:新功能ES6 Classes和TypeScript支持

使用 Angular 1 应用程序在 Typescript 中管理 ES6/2015 Promise

TypeScript入门与区块链项目实战(TypeScript Quickly)阅读记录

好书推荐TypeScript的入门指南 | 《TypeScript入门与实战》

好书推荐TypeScript的入门指南 | 《TypeScript入门与实战》