npm 组件没有types_如何使用 vue + typescript 编写页面 （typescript进阶-npm兼容篇）

typescript 混用js

当我们引用了一个js编写的模块时会报错，这时候，如果不在引入的index文件里面添加.d.ts描述文件，那么这个模块就没法在语义上一致通过.

通用兼容性解决方案

假设导入一个JS的模块A，并且这个模块是由npm下载的

> npm install A;

复制代码

这时候在ts中使用时发生以下错误：

// 当常规的导入A时，会发生以下错误

/*无法找到模块“A”的声明文件。“D:/XXXX/XXXX/node_modules/xxxx/index.min.js”隐式拥有 "any" 类型。

Try `npm install @types/A` if it exists or add a new declaration (.d.ts) file containing

`declare module 'A';`ts(7016) */

import A from 'A'

复制代码

这时候如果有提供模块的描述文件就最好了,可以直接按照提示下载 npm install @types/A.不过很可惜,大部分都是没有编写声明文件的.但是又需要使用到这个模块时,应该怎么做.

自定义描述文件

在项目的【根目录】下定义【模块相同的名称】的描述文件A.d.ts,在描述文件内编写模块声明描述

// A.d.ts

declare module '*';

复制代码

这样属于一劳永逸的描述,但是无法描述到具体模块内容,因此这种方式仅仅引入的组件没有任何操作时,比如引入的是第三方开发的vue组件,可以用这种方式偷懒.

但是有时候这种方式定义了依旧会报错，就需要用到下面的方式

// A.d.ts

declare module 'A';

复制代码

详细描述文件

// A.d.ts

declare module "A" {

// 添加具体的描述内容

};

复制代码

常规的类型描述

module

模块描述 声明这个是一个模块文件，模块里面使用export抛出相应的内容

namespace

定义命名空间，通常用的很少

interface

定义接口类型，这点一般配合class使用

class

定义class类型

type

定义基础类型变量

keyof

指定定义变量的非基础类型

interface Person {

// some props

}

type name = keyof Person

复制代码global

这个属性用来定义全局变量的申明的变量可以直接调用，这点用来某些直接绑定再window下的变量

declare global {

$:any

}

复制代码

可以从这里查询到@type包查询，已经被编写的文件声明可以直接下载