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" {
// 添加具体的描述内容
};
复制代码
常规的类型描述
-
module
模块描述 声明这个是一个模块文件,模块里面使用export抛出相应的内容
-
namespace
定义命名空间,通常用的很少
-
interface
定义接口类型,这点一般配合class使用
- class
定义class类型
- type
定义基础类型变量
- keyof
指定定义变量的非基础类型
interface Person {
// some props
}
type name = keyof Person
复制代码
- global
这个属性用来定义全局变量的申明的变量可以直接调用,这点用来某些直接绑定再window下的变量
declare global {
$:any
}
复制代码
可以从这里查询到@type包查询,已经被编写的文件声明可以直接下载