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

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

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


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



但是呢,在绝大多数的情况下,我们都是不用自己去编写的,对于常用的第三方库, 其实已经有大神帮我们编写好了对应的声明文件,所以在企业开发中, 如果我们需要使用一些第三方 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);

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


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

npm install @types/jquery

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


最终 index.ts 内容如下:

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


经过上一篇 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 运行的效果:


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


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

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

再次通过 devServer 运行:

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



最后

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

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

相关文章
|
8月前
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
|
8月前
|
存储 文件存储
TypeScript-命名空间
TypeScript-命名空间
29 0
|
1月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
85 0
|
8月前
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
36 0
|
22天前
|
JavaScript Shell 资源调度
1.【TypeScript 教程】TypeScript 安装与使用
1.【TypeScript 教程】TypeScript 安装与使用
25 4
|
22天前
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
18 2
|
1月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
1月前
|
JavaScript 前端开发
TypeScript中使用命名空间组织代码:原理与实践
【4月更文挑战第23天】了解TypeScript的命名空间用于组织代码,防止命名冲突,提升可读性。通过`namespace`关键字定义,如`namespace MyNamespace {...}`。访问元素时需指明命名空间,如`MyNamespace.myFunction()`。可嵌套命名空间,但应避免过度使用导致复杂。考虑使用模块代替,保持命名空间简洁。命名空间是代码组织的有效工具,但需结合实际情况灵活选择。
|
1月前
|
资源调度 JavaScript 编译器
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
|
1月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
38 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)