如何使用 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" {
    // 添加具体的描述内容
};
复制代码

常规的类型描述

1. module

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

2. namespace

   定义命名空间，一般用的不多

3. interface

定义接口类型，这点通常配合class使用

4. class

定义class类型

5. type

定义基础类型变量

6. keyof

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

interface Person { 
    // some props
}
type name = keyof Person
复制代码

7. global

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

declare global {
    $:any
}
复制代码

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

如何使用 vue + typescript 编写页面 （typescript简单语法篇）