TS模块的导入导出

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

TS 中的模块

• TS模块的设计理念可以更换的组织代码
• 两个模块之间的关系通过文件级别使用import和export建立的
• 模块使用模块加载器去导入其他的模块，在运行时，模块加载器的作用是在执行此模块前去查找并执行这个模块所有依赖，js模块加载器服务于node.js的Commonjs和服务Web应用的Require.js
• 模块导出使用关键字 export 关键字，语法格式如下 // 文件名 SomeInterface.ts export interface SomeInterface{ // 代码部分 } 要在另一个文件使用模块需要使用import 关键字来导入 import someInterface = require('/SomeInterface')

JS中模块

默认导入和大导出 注意点：这里导入导出的名字，可以不一致

export default test
import oo from './test'

按需导入导出 注意点：按需导入导出时名字必须一致

export xxx;
import {xxx} from '路径'

Node.js中的模块

默认导出

exports.xxx=xxx;
const xxx=require('path');
const {xx,xx} = require('path')

按需导出

module.exports.xxx=xxx;
const xxx=require('path');
const {xx,xx}=require('path')

TS中的模块

默认情况下JS是不兼容上面两种方式的混合使用的，但是TS中对他们做了综合处理

案例 创建一个test.ts,export 导出一个接口

export interface IPerson {
    name: string,
    age: number,
    show:()=>void
}

  

在另一个文件里import test = require("./test");导入这个接口，然后定一个类实现这个接口，接着用这个类创建一个实例，这个实例上有name和age属性，也有show方法。所以这个案例非常成功，require导入的是一个命名空间。命名空间里的一个属性是IPerson

import test = require("./test");


class UserInfo implements test.IPerson {
    name: string = 'saobang';
    age: number=1212;
    show() {
        console.log("okkkkkk")
    }
}

const user = new UserInfo();
console.log(user.name)
console.log(user.age)
user.show()

另一种也支持，下面的导入导出也是正常的，没有什么问题。也是比较常用的方法

export const obj = {
    name: "使得帮"
}

导入

import { obj } from './test'
console.log(obj)