ts中使用模块化 看这一篇就够了

28 阅读1分钟

模块化

本节课相关配置:

配置名称含义
module设置编译结果中使用的模块化标准
moduleResolution设置解析模块的模式
noImplicitUseStrict编译结果中不包含"use strict"
removeComments编译结果移除注释
noEmitOnError错误时不生成编译结果
esModuleInterop启用es模块化交互非es模块导出

前端领域中的模块化标准:ES6、commonjs、amd、umd、system、esnext

TS中如何书写模块化语句 编译结果??

TS中如何书写模块化语句

TS中,导入和导出模块,统一使用ES6的模块化标准

编译结果中的模块化

可配置

TS中的模块化在编译结果中:

  • 如果编译结果的模块化标准是ES6: 没有区别
  • 如果编译结果的模块化标准是commonjs:导出的声明会变成exports的属性,默认的导出会变成exports的default属性;

如何在TS中书写commonjs模块化代码

导出:export = xxx

导入:import xxx = require("xxx")

模块解析

模块解析:应该从什么位置寻找模块

TS中,有两种模块解析策略

  • classic:经典

  • node:node解析策略(唯一的变化,是将js替换为ts)

    • 相对路径require("./xxx")
    • 非相对模块require("xxx")

案例代码

import fs from "fs"; //module.exports={}
fs.readFileSync("./") 

import myModule from "./myModule"

import myModule = require("./myModule")

林
export const name = "kevin";

export function sum(a: number, b: number) {
    return a + b; 
} 

export default function(){
    console.log("hello my module!");
}

export default {
    name: "kevin",
    sum(a: number, b: number) {
        return a + b;
    }
}

export = {
    name: "kevin",
    sum(a: number, b: number) {
        return a + b;
    }
}