如何在TypeScript中使用JS类库

使用流程

1.首先要清除类库是什么类型,不同的类库有不同的使用方式

2.寻找声明文件

JS类库一般有三类:全局类库、模块类库、UMD库。例如,jQuery是一种UMD库,既可以通过全局方式来引用,也可以模块化引用。

声明文件

当我们要使用一个类库时,需要ts声明文件,对外暴露API,有时候声明文件在源码中,大部分是单独提供额外安装。比如jQuery需要额外安装类型声明包。

幸运的是,大部分的类库,TS社区都有声明文件。名称为@types/类库名,需要去这个网站搜一下http://microsoft.github.io/TypeSearch/

如果没有,需要自己去写一个,这也是为社区贡献的好机会。http://definitelytyped.org/guides/contributing.html这里提供了一些写声明文件的方法。在写ts声明文件的时候,暂时用不到的API可以可以不写。

下面我将演示,如何在ts文件中使用三种类库。首先准备三个js文件,分别表示全局类库、模块类库、UMD库。

// 全局类库  global-lib.js
function globalLib(options) {
   console.log(options);
}
globalLib.version = "1.0.0";
globalLib.doSomething = function () {
   console.log('globalLib do something');
};

// 模块类库  module-lib.js
const version = "1.0.0";
function doSomething() {
   console.log('moduleLib do something');
}
function moduleLib(options) {
   console.log(options);
}
moduleLib.version = version;
moduleLib.doSomething = doSomething;
module.exports = moduleLib;

// UMD库  umd-lib.js
(function (root, factory) {
   if(typeof define === "function" && define.amd)
   {
      define(factory);
   }else if(typeof module === "object" && module.exports)
   {
      module.exports = factory();
   }else
   {
      root.umdLib = factory();
   }
})(this, function () {
   return {
      version: "1.0.2",
      doSomething() {
         console.log('umdLib do something');
      }
   }
});

全局类库

  1. 在HTML文件<script>标签中引入该库
  2. 将写好的声明文件与js库放在同一文件夹下,命名相同,后缀名为.d.ts
  3. 此时可以在ts文件中使用全局API

如果此时编译器未报错,而浏览器报错not defined,可能是html中引入的路径是相对路径,改成绝对路径即可(以项目目录为根目录)。

声明文件global-lib.d.ts

declare function globalLib(options: globalLib.Options): void;
declare namespace globalLib{
   const version: string;
   function doSomething(): void;
   interface Options {
      [key: string]: any,
   }
}

在ts文件中使用该库:

globalLib({x:1});
globalLib.doSomething();

模块类库

  1. 将声明文件放在相同的目录下
  2. 在ts中引入

声明文件 module-lib.d.ts

declare function moduleLib(options: Options): void;
interface Options {
   [key: string]: any,
}
declare namespace moduleLib{
   const version: string;
   function doSomething(): void;
}
export = moduleLib; // 这样写兼容性更好

ts中使用类库

import moduleLib from './Libs/module-lib.js';
moduleLib.doSomething();

UMD类库

UMD库有两种使用方式:

  • 引入全局类库的方式
  • 模块类库引入的方式

其中,在使用全局类库的引入方式时,编译器会提示,不建议这样做,需要在tsconfig.json中打开allUmdGlobalAccess配置项可以消除提示。

声明文件 umd-lib.d.ts

declare namespace umdLib {
   const version: string;
   function doSomething(): void;
}
export as namespace umdLib // 专门为umd库准备的语句,不可缺少
export = umdLib

ts中使用UMD库(不再演示全局使用方式)

import umdLib from './Libs/umd-lib'
umdLib.doSomething();
console.log(umdLib.version);

例:在ts中使用jQuery(不演示全局引入方式)

先安装jquery及其声明文件

npm install -D jquery @types/jquery

使用:

import $ from 'jquery';
$(".app").css("color","red");

为类库添加插件

即为类库添加自定义的方法

其中UMD库和模块类库的添加插件方法一致。

// 为全局类库增添自定义方法
declare global {
   namespace globalLib {
      function myFunction(): void
   }
}
globalLib.myFunction = () =>{console.log("global插件")};

// 为模块类库添加自定义方法
declare module "./Libs/module-lib.js"{
   export function myFunction(): void;
} // 为module-lib类库声明myFunction方法
moduleLib.myFunction = () => {console.log("module插件")}; // 定义自定义方法

// 为UMD库添加自定义方法
declare module "./Libs/umd-lib.js"{
   export function myFunction(): void;
} // 为umd-lib类库声明myFunction方法
umdLib.myFunction = () => {console.log("umd插件")}; // 定义自定义方法

globalLib.myFunction();
moduleLib.myFunction();
umdLib.myFunction();

例如,为类库moment增添自定义方法(jQuery不可以,需要使用官方提供的API)

npm install -D moment @types/moment

import m from 'moment';
declare module 'moment'{
   export function myFunction(): void;
}
m.myFunction = () => {console.log("moment插件")};

m.myFunction();

 

转载于:https://www.cnblogs.com/V587Chinese/p/11519932.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 类型注释只能在 TypeScript 文件使用的原因是因为 TypeScript 是一种静态类型检查的编程语言,可以通过类型注释来提供代码的类型信息,从而在编译期间进行类型检查,减少运行时的错误。而 Vue 是一个基于 JavaScript 的框架,JavaScript 是一种动态类型的编程语言,没有编译阶段,所以无法进行静态类型检查。 然而,由于 Vue 在项目使用了许多特定的语法和生命周期,TypeScript 提供了一种使用类型注释来增强 Vue 代码的可读性和可维护性的方式。通过在 Vue 组件文件使用 TypeScript 的扩展语法,我们可以将类型注释应用于 Vue 组件的 prop、data、computed 等属性上。这样在开发过程,编辑器可以根据类型注释提供代码补全、错误检查等功能,从而提高开发效率和代码质量。 需要注意的是,为了使用 Vue 类型注释,我们需要在 TypeScript 文件引入 Vue 的类型声明文件,以使 TypeScript 理解 Vue 的特定语法和类型信息。同时,我们还需要在项目配置添加相应的 TypeScript 相关配置,以确保 TypeScript 在编译过程正确解析和处理 Vue 组件的类型注释。 总之,Vue 类型注释只能在 TypeScript 文件使用,是因为 TypeScript 提供了一种增强 Vue 代码的方式,通过类型注释来提供静态类型检查和代码补全等功能,从而提高项目的代码质量和开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值