npm里众多.d.ts文件是如何生成的

JavaScript013

npm里众多.d.ts文件是如何生成的,第1张

d.ts文件是由TypeScript编译器生成的,这些文件包含了JavaScript中可用的接口和对象的定义,以及它们之间的关系。TypeScript编译器可以根据JavaScript代码自动生成.d.ts文件,也可以根据用户自定义的.d.ts文件生成JavaScript代码。

通常,在项目中引用js库分两种情况:一种是通过npm install ${name} --save 安装在node_modules目录下,package.json中的dependencies会配置正式环境所依赖的库。另外一种就是直接将.js文件放在src目录下,通过相对路径的方式直接引用。对于第一种情况:例如:weixin-js-sdk,在项目路径下,cnpm install weixin-js-sdk --save, 安装成功以后,查看package.json下的dependencies会增加一行weixin-js-sdk的版本信息。在使用的时候导入 import * as WeiXin from 'weixin-js-sdk'对于第二种情况:通过相对路径引用一个.js文件,那么需要在tsconfig.json中的compilerOptions中配置"allowJs": true,然后在使用的时候直接import,例如:import * as Swiper from './lib/swiper/swiper.min.js'上面两种情况是在没有.d.ts声明文件的情况下对于有些三方库,例如bootstrap,jquery等许多常用的都有声明文件,直接导入就可以,例如jquery:1. cnpm install jquery --save 安装jquery依赖包到node_modules目录下2. npm install @types/jquery --save-dev 安装类型描述文件到node_modules目录下,只安装到开发环境3. 修改angular-cli.json文件,增加styles(引入css的路径)和scripts(引入js的路径) "scripts": ["../node_modules/jquery/dist/jquery.js"]4. 修改tsconfig.app.json文件,添加到types数组 "types": ["jquery"],然后就可以使用$语法了

Typescript (以下简称:ts) 有一个好处是,你可以将 ts 代码生成CommonJs规范、AMD规范,而这二者的规范中,且无法兼容,所以就有了 export =,将二者给统一,以至于让ts支持以上规范。

declare module "swiper" {

const swiper: {

new (element: Element | string, options?: SwiperOptions): Swiper

}

export = swiper

}

如果在CommonJS规范中:

const Swiper = require('swiper')

或者AMD规范中:

require(['swiper'], function(Swiper) {

})

当然,如果你的 @types 不需要支持上面两种规范,那就不需要 export =,因为对于 ts 而言,你只需要这样:

import { Swiper } from 'swiper'