模块导出
模块导出 通过 export / export default 进行导出文件中数据和方法。
// util.ts
export const token = "asdasjkh3242341asd"
export function getBasicData(){ console.log("获取基础数据")}
export type receiveData = { code:Number, data:Object,}
export type axiosParams = { methods: String, url:String, params: any}
export default { baseInfo:{ id:22, name:"基础信息" } }
复制代码
模块导入
export default
这种方式导出的数据，使用模块时 通过以下方式导入使用
import util from "./util"
util.token
util.getBasicData()
复制代码
export
这种方式导出的数据，使用模块时 通过以下方式导入使用
import {token,getBasicData } from "./util"
token
getBasicData
复制代码
as 别名
当页面中有和导入的数据重名时，通过 as 定义一个别名 使用。
import util,{token,getBasicData as getData} from "./util"
getData()
复制代码
* as name
还可以将模块中所有对象 放入一个命名空间，然后调用使用
import * as app from "./util"
console.log(app.token)
app.getBasicData()
复制代码
TypeScript 导入玩法
当导入 type 时，它有 3 种导入方法，使用哪种都可以，看自己喜好。ta 模块文件
export type ReceiveData = { code:Number, data:Object,}
export type AxiosParams = { methods: String, url:String, params: any}
export interface GPT { say:Function, name:String, draw:Function}
export interface AUTOGPt extends GPT{ auto:Function}
export interface AI extends GPT {}
复制代码
第一种
通过 type { type1,type2 } 导入使用，这种导入方式可以很清晰的知道导入了哪些 type
import type {ReceiveData,AxiosParams} from "./util"
复制代码
第二种
直接 通过 import {} from '模块' 导入,缺点是不好分辨哪个是 type
import {ReceiveData,AxiosParams} from "./util"
复制代码
第三种
TypeScript 4.5 还允许单个导入以 type 为前缀，以指示导入的引用是类型：
import {type ReceiveData, type AxiosParams} from "./util"
复制代码
体验一下模块的乐趣
//模块 util.ts 文件
export type ReceiveData = { code:Number, data:Object,}
export type AxiosParams = { methods: String, url:String, params: any}
export interface GPT { say:Function, name:String, draw:Function}
export interface AUTOGPt extends GPT{ auto:Function}
export interface AI extends AUTOGPt {}
复制代码
import {type ReceiveData, type AxiosParams} from "./util"
import * as app from "./util"
const axiosParams: AxiosParams = { methods:"GET", url: "api/getAllData", params:{ limit:10, page:2 }}
const aiX : app.AI = { say:function(){ console.log("我具有 问答功能") }, name:"我是AI 超神", draw:function(){ console.log("我具有 绘画功能") }, auto:function(){ console.log("我具有 自动工作功能") }}
复制代码
上面代码中，第一个文件是我们定义的模块，定义了 两个 type 三个interface, 在第二个文件中，我们导入模块，使用类型标注，这样可以很好的得知我们的数据结构是什么。
Common.js 导入导出
CommonJS 是 npm 上大多数模块的格式。
导出
通过 module.exports 导出模块数据
const loginStatus = false
function getUserInfo(){ console.log("获取用户基本信息")}
module.exports = { loginStatus, getUserInfo}
复制代码
导入
通过 require(模块文件位置) 导入
//第一种导入方式const basic = require('./basic')//第二种导入方式const {loginStatus,getUserInfo} = require('./basic')
console.log(basic.loginStatus)
复制代码
TypeScript 模块解析原理
:::successhttps://www.typescriptlang.org/docs/handbook/module-resolution.html:::
评论