目录
模块的概念
Export 语法(default)
Export 语法(non-default)
import 别名
Type Export语法【TS】
模块相关配置项:module【tsconfig.json】
模块相关配置项:moduleResolution
小节总结
模块的概念
【程序包,最基本的封装单元,最基本的单位就是文件,如果没有export,那么ts不会把你当作是一个模块】
- 模块是一个程序的集合(函数、变量、Class等)
- 模块是可见域的分离:模块内的成员仅仅在包内可见,包外成员无法访问
- 模块可以主动Export【输出,暴露出】成员:例如用`import/export`语法。
Export 语法(default)
// @filename:hello.js
export default function helloWorld() {
console.log("Hello, world!");
}
引用上面暴漏出的方法
import hello from './hello.js'
hello()
Export 语法(non-default)
// @filename: matchs.js
export var pi = 3.14;
export let squareTwo = 1.41;
export const phi = 1.61;
export class RandomNumberGenerator {}
export function absolute(num: number) {
if (num < 0) return num * -1;
return num;
}
引用上面的文件中暴漏的一些方法
import { pi ,phi, absolute } from "./maths.js";
console.log(pi,phi);
console.log(absolute(phi))
import 别名
import{ pi as pai } from './maths.js';
console.log(pai)
Type Export语法【TS】
// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number}
export interface Dog {}
使用上面暴漏出的方法
import {Cat} from './animal.ts' // 一样用
import type {Cat} from './animal.ts'
// 如果Cat是个实际类,也可以这样引用,但是不能new Cat
模块相关配置项:module【tsconfig.json】
- ES6
- ES2015
- ES2020
- ESNext 【最新版本ES】
- UMD/AMD/Commonjs/SYSTEM
模块相关配置项:moduleResolution
- node【通常用这个查找顺序的方法】
- classic【查找模块的方法顺序】
小节总结
- 为什么抽象模块?隔离和封装
1.隔离,让外部看不到模块内部的成员,避免大量成员的全局冲突
2.避免让用户使用起来感到复杂,觉得这个模块很复杂,开箱即用,封装就是把功能封装进去
- 模块解析通常用node还classic? node【node不是默认项,需要设置一下】
// @filename: tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"lib" : ["DOM", "ESNext"],
"moduleResolution": "node",
"esModuleInterop": true
},
"include": ["src/**/*.ts"]
}