Typescript基础语法（四）

模块化

模块化是指将复杂的程序拆解为多个独⽴的⽂件单元，每个⽂件被称为⼀个模块。在 TypeScript 中，默认情况下，每个模块都拥有⾃⼰的作⽤域，这意味着在⼀个模块中声明的任何内容（如变量、函数、类等）在该模块外部是不可⻅的。为了在⼀个模块中使⽤其他模块的内容，必须对这些内容进⾏导⼊、导出。

导出

导出需要使用export关键字，语法如下：

export function hello() {
    console.log('hello');
}

export const str = 'hello';

const num = 1;

导入

导⼊须使⽤ import 关键字，语法如下

import { hello, str } from './moduleA';

hello();
console.log(str);

避免命名冲突

有多种方式可以用来解决命名冲突，下面逐一介绍

1、导入重命名

import { hello as helloFromA, str as strFromA } from "./moduleA";
import { hello as helloFromC, str as strFromC } from "./moduleC";

helloFromA();
console.log(strFromA);

helloFromC();
console.log(strFromC);

2\创建模块对象

上述导⼊重命名的⽅式能够很好的解决命名冲突的问题，但是当冲突内容较多时，这种写法会⽐较冗⻓。除了导⼊重命名外，还可以将某个模块的内容统⼀导⼊到⼀个模块对象上，这样就能简洁有效的解决命名冲突的问题了，具体语法如下

import * as A from "./moduleA";
import * as C from "./moduleC";

A.hello();
console.log(A.str);

C.hello();
console.log(C.str);

默认导⼊导出

除了上述导⼊导出的语法之外，还有⼀种语法，叫做默认导⼊导出，这种语法相对简洁⼀些。

• 默认导出

默认导出允许⼀个模块指定⼀个（最多⼀个）默认的导出项，语法如下

export default function hello(){
console.log('moduleA');
}

• 默认导⼊

由于每个模块最多有⼀个默认导出，因此默认导⼊⽆需关注导⼊项的原始名称，并且⽆需使⽤ {} 。

import helloFromA from "./moduleA";

由于默认导⼊时⽆需关注导⼊项的名称，所以默认导出⽀持匿名内容，⽐如匿名函数，语法如下

export default function () {
    console.log('moduleB');
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/591868.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！