TypeScript-命名空间补充

经过上一篇 TypeScript-声明安装 的介绍之后,就可以轻易的安装第三方库的声明文件了,然后到此为止 TS 的基础内容博主就已经介绍的差不多了,本文主要的内容就是在额外补充一下命名空间的一个小小知识点和内容,不管三七二十一,先来编写一下命名空间的代码:

创建一个 test.ts 也就是命名空间的代码:

namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export const LettersValidator = (value) => {
        return lettersRegexp.test(value);
    }
}

然后在 index.ts 当中通过 /// <reference path="test.ts" /> 进行导入使用:

/// <reference path="../lib/test.ts" />
console.log(Validation.LettersValidator("123"));
console.log(Validation.LettersValidator(123));

在之前博主介绍的是通过在 cmd 当中手动的进行打包的,通过 tsc --outFile,webpack 是不能帮助我们进行打包的,我们先来看看通过 devServer 运行的效果:

image-20211207162217387

发现已经报错了,说明打包不了,默认情况下是不会帮你进行合并的如果你想让它帮你合并需要修改 tsconfig.json 才可以帮你进行合并,主要修改如下几个 key:

  • module: 最终输出代码采用哪种格式,默认为 commonjs,这个时候呢,就需要修改为 amd 或者 system 才可以
  • outFile: 合并之后的内容输出到哪个文件
  • outDir: 合并之后的文件输出到哪个目录

关于 outDir 与 outFile 只需要参考 webpack 的输出目录进行配置即可:

image-20211207163021400

再次通过 devServer 运行:

image-20211207163113498

好了已经解决了合并的问题,现在开始 webpack 就会自动的帮我们进行合并了,这个就是本文主要要介绍的内容🐤

posted @ 2021-12-07 15:15  BNTang  阅读(77)  评论(0编辑  收藏  举报