8. TS 的模块化使用一、模块化概念 1. 前端领域的模块化前端领域中有哪些模块化标准：ES6、commonjs、a

前端领域中有哪些模块化标准：ES6、commonjs、amd、umd、system、esnext(这个还没有正式成为模块化标准)

那么这么多模块化标准，我们在 TS 中所讨论的是 ES6 和 commonjs

TS中，导入和导出模块化，同样适用 ES6 的模块化标准,如下例子

导出：

//myModule.ts文件
export function sum(a:number,b:number):number{
    return a+b
}
export const name="井底的蜗牛"

导入：

//index.ts 文件
import {name, sum} from "./myModule";
console.log(sum(3,4))
console.log(name)

注意项 1： 在导入的时候，文件名字不要加后缀名import myModule from "./myModule.ts";因为在编译结果中是没有 ts 文件的你加入 ts 后缀编译后根本找不到该文件这样必定报错,

注意项 2：当 export 单个单个导出的时候，import 导入的时候需添加花括号{ }

导出：

//myModule.ts文件
function sum(a:number,b:number):number{
    return a+b
}
const name:string="井底的蜗牛2"
 
// 导出多个对象
export {sum, name}

导入：

//index.ts 文件
import {name, sum} from "./myModule";
console.log(sum(3,4))
console.log(name)

export 导出修改对象名通过【as】关键字来修改

导出并修改对象名：

//myModule.ts文件
function sum(a:number,b:number):number{
    return a+b
}
const name:string="井底的蜗牛2"
 
// 导出多个对象
export {sum as getSum, name}

导入使用修改后的对象名:

//index.ts 文件
import {name, getSum} from "./myModule";
console.log(getSum(3, 10))
console.log(name)

注意: 用 export default 批量导出的时候， import 导入的时候不能写{} 花括号，应用一个变量表达包含所有导出的对象模块\

因为对于 export default 其输出的本来就只有一个接口，提供的是模块的默认接口，自然不需要使用大括号包裹。

批量导出：

//myModule.ts文件
function getSum (a:number,b:number):number{
    return a+b
}
const name:string="井底的蜗牛2"
 
export default {
    getSum, 
    name,
}

导入：

//index.ts 文件
import A  from "./myModule";
console.log(A.getSum(3, 10))
console.log(A.name)

8. TS 的模块化使用