TypeScript-声明安装和TypeScript-命名空间补充

本篇文章主要介绍的内容就是声明的安装，其实在编写声明文件的时候又分为好几种，如果你导入的第三方的某个库是一个全局的库的话，那么什么叫全局的库呢，就是这个库当中的所有功能都是绑定到一个全局对象上的这种就称之为全局的库，这种时候就可以参照 TS 官方提供的全局编写模板来进行编写：

image-20211207144956960

如果你导入的这个库可以通过 import 或者 require 来进行使用的话也就是模块化的库，就可以参考下面的几个模板进行编写：

image-20211207145247120

但是呢，在绝大多数的情况下，我们都是不用自己去编写的，对于常用的第三方库, 其实已经有大神帮我们编写好了对应的声明文件，所以在企业开发中, 如果我们需要使用一些第三方 JS 库的时候我们只需要安装别人写好的声明文件即可。

TS 声明文件的规范: @types/xxx 例如: 想要安装 jQuery 的声明文件, 那么只需要 npm install @types/jquery 即可：

那么这里博主就来简单的演示一下 jquery 的声明文件吧，首先安装需要使用的库这里我需要使用 jQuery 我就安装 jQuery：

npm install jquery --save

然后 index.ts 当中导入 jQuery 打印了一下：

const jQuery = require('jquery');
console.log(jQuery);

image-20211207150231117

但是我在使用 jQuery 其它方法的时候发现没有提示：

image-20211207150318749

那么这个时候就需要安装一下它所对应的声明文件即可：

npm install @types/jquery

然后在编写发现就有对应的提示内容了：

image-20211207150437688

最终 index.ts 内容如下：

const jquery = require('jquery');
console.log(jquery(".main").width());
console.log(jquery(".main").height());

image-20211207150541769

经过上一篇 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 就会自动的帮我们进行合并了，这个就是本文主要要介绍的内容🐤

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

输入图片说明