6、ypescript模块

2.模块管理

我们先定义一个组件，你叫一个文件也好，一个模块也好不用管它叫啥，反正就这么个玩意，就叫mod1.ts

各个文件里面代码是这样子的：

//mod1.ts
//我定义了一个a 并导出
export let a = 12;

//app.ts
//因为我定义的是a 所以导入的名字也必须跟mod1.ts里面的一致，也得是a还得用花括号括起来，另外mod1路径用./同级 mod1不用加后缀
import {a} from './mod1'
console.log(a);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="app.js"></script>  
</body>
</html>

index.html注意一下几点：

1.script type="module" 必须写
2.要扔到body里面
3.要想支持import和export 必须用服务器环境类似这样 http://localhost/HelloWorld/，可以随便装个wamp之类的然后扔到www文件夹下
4.这些都记不住也没事按照我说的做即可，我只是说明mod1.ts和app.ts里面的内容，这两个文件内容是核心

vscode终端输入：

tsc --module ES2015 app.ts

这个命令也不用记，就是为了让程序跑起来，我们继续核心，修改下mod1.ts

export let a = 12; //mod1.ts//我定义了一个a 并导出export let a = 12;

每次改东西tsc 太费劲，我们用监视命令，依然不用记，只看文件中源码即可，用了这个命令你就不用管tsc了，改动自动变

tsc  --w --module ES2015 app.ts mod1.ts

修改mod1.ts

export let a = 12;
export let b = 5;
export let c = 8;

修改app.ts

import {a,b,c} from './mod1'
console.log(a,b,c);

浏览器控制台，出现 12,5,8,大家看从mod1里面导入了三个mod1中导出的， a,b,c等导出的名字太多了记不住怎么办？我也不想去mod1.ts里面去找导出的叫什么名字，那就不记了，直接修改app.ts，这样都被我放到了arrAbc数组里

import * as arrAbc from './mod1'
console.log(arrAbc.a,arrAbc.b,arrAbc.c);//12,5,8

你说我想默认一个导出，也不想记名字，怎么办？

修改mod1.ts

let a = 666;
export default a;
export let b = 5;
export let c = 8;

修改，app.ts

// import * as arrAbc from './mod1'
// console.log(arrAbc.a,arrAbc.b,arrAbc.c);
import numA from './mod1'
import{b,c} from './mod1'
console.log(numA,b,c);

刷浏览器，出现666,12,5,8

总结一下：

1.通过 export default方式导入，在导入时不需要加 {} 在一个文件或模块中,名字随便起，比如numA
2.export default只能有一个 export default后面不能跟const或let的关键词
export default 一个文件只能有一个

对了，你不定义名字都没事，比如，修改mod1.ts

let a = 666;
export default {
    "name":"大彬哥",
    "age":18
};
export let b = 5;
export let c = 8;

修改app.ts

import teacher from  './mod1'
console.log(teacher.name,teacher.age);

刷浏览器，结果就出来了，大彬哥 18，这种方式 vue中用的最多

2.类型定义（vue用到再说）

总结，到这里你就彻底明白了vue中 import了或者export 什么import * as 什么的。就有了写组件或者引用别人库的基础。有了这个基础我们就可以做应用题了，我们装上Vue最新版，看看还有啥用不明白的。

课程资料

加群号：613372914获取课程资料与交流相关问题