如何使用 vue + typescript 编写页面 （typescript进阶-兼容篇）

typescript 混用js

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

通用兼容性解决方案

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

// 当常规的导入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" {
    // 添加具体的描述内容
};
复制代码

常规的类型描述

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简单语法篇）