typescript中的模块

介绍

从ECMAScript 2015开始,JavaScript引入了模块的概念。TypeScript也沿用这个概念。

模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一。

模块是自声明的;两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于Node.js的 CommonJS和服务于Web应用的Require.js。

TypeScript与ECMAScript 2015一样,任何包含顶级import或者export的文件都被当成一个模块。相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的(因此对模块也是可见的)。

概念

我们把一些公共的功能单独抽离成一个文件作为一个模块

模块里面的变量、函数、类等默认是私有的,如果我们要在外部访问里面的数据(变量、函数、类)

我们需要通过export暴露模块里面的数据(变量、函数、类等)

暴露之后我们通过import引入模块就可以用模块里面暴露的数据(变量、函数、类等)

我们新建一个文件db.ts

export function get():any[]{
    console.log("123")
    return [
        {title:123},
        {title:123},

    ]
}

在1.ts中标引入这个文件

import {get} from "./modules/db"
get()

外部使用模块中的方法,必须引入,否则报错

也可以用as设置别名

import {get as post} from "./modules/db"
post()

默认导出

每个模块都可以有一个default导出。 默认导出使用 default关键字标记;并且一个模块只能够有一个default导出。 需要使用一种特殊的导入形式来导入 default导出。

 function get():any[]{
    console.log("123")
    return [
        {title:123},
        {title:123},

    ]
}
export default get

引入的默认导出的文件不需要花括号{},

import get from "./modules/db"
get()

 

posted @ 2021-11-06 16:05  keyeking  阅读(90)  评论(0编辑  收藏  举报