TS复习---------模块

TS复习---------模块

目录

[TOC]

概念

模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的

“内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”

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

ES6模块

分开导入导出

导出

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加 export 关键字来导出。

export xxx;
 
export yyy;

可以只使用一个 export 导出

export {xxx, yyy, zzz};

导入之后又全部导出

export * from "./StringValidator"; // exports interface StringValidator
export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator
export * from "./ZipCodeValidator";  // exports class ZipCodeValidator

导入

通过 import 和 {} 实现按需导入：

 
import {xxx, yyy, zzz} from "path";

可以对导入内容重命名

// @filename: a.ts（与 hello.ts同级）
// 仅引入a,c,fn 并重命名a和fn
import { a as A, c, fn as FN } from "./hello";
console.log(A, c);
FN(1);

具有副作用的导入模块

import "./my-module.js";

将整个模块导入到一个变量，并通过它来访问模块的导出部分

import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

默认导入导出

导出

每个模块都可以有一个 default 导出。 默认导出使用 default 关键字标记；并且一个模块只能够有一个 default 导出。

export default function (s: string) {
    return s.length === 5 && numberRegexp.test(s);
}
// 默认导出的东西是不用命名的

导入

import validate from "./StaticZipCodeValidator";
// 引入时直接给default给个命名
 
let strings = ["Hello", "98052", "101"];
 
// Use function validate
strings.forEach(s => {
  console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`);
});

TS特定的语法

类型 可以使用与 JavaScript 值相同的语法进行导出和导入：

TypeScript 用两个概念扩展了 import 语法，用于声明一个 类型的导入 ：

// @filename: hello.ts
export type Cat = {};
export interface Dog {}
 
// @filename: a.ts（与 hello.ts同级）
import { Cat, Dog } from "./hello";
let a: Cat, b: Dog;

TypeScript 4.5 还允许以 type 为前缀的 单个导入 ，以表明导入的引用是一个类型：

// @filename: hello.ts
export type Cat = {};
export interface Dog {}
export const createCatName = () => "fluffy";
 
// @filename: a.ts（与 hello.ts同级）
// 表明Cat和Dog为类型
import { createCatName, type Cat, type Dog } from "./hello";
type Animals = Cat | Dog;
const name = createCatName();
 

export = 与 import = require() ：

export = 语法指定了一个从模块导出的单一对象，这可以是一个类，接口，命名空间，函数，或枚举，当使用 export = 导出一个模块时，必须使用 TypeScript 特定的 import module=require("module") 来导入模块：

// @filename: hello.ts
const a = "hello";
export = a;
 
 
// @filename: a.ts（与 hello.ts同级）
import H = require("./hello");
console.log(H); // hello

CommonJS语法

通过在一个全局调用的 module 上设置 exports 属性来 导出 ：

// @filename: hello.ts
function absolute(num: number) {
    return num;
}
const a = 3;
let b = 4;
var c = 5;
 
module.exports = {
    a,
    b,
    newC: c, // 将c以newC的名称导出
    d: 12, // 直接导出一个值
    fn: absolute, // 将absolute以fn的名称导出
};

通过 require 语句导入：

// @filename: a.ts（与 hello.ts同级）
const m = require("./hello");
console.log(m.a, m.b, m.newC, m.fn(1));
 
// @filename: a.ts（与 hello.ts同级）
const { d, fn } = require("./hello");
console.log(d, fn(1));