1 xxx.d.ts 声明文件
解决在ts文件中使用js文件没有类型声明的问题
1.1 Common.js
模块类型声明文件
-
目录结构
src
test
test.js
test.d.ts
common.js
jsconfig.json
-
函数文件声明
// test.js
// commonjs 导出一个模块
module.exports = {
getUser: (id) => ({id,message:'test success'})
}
// 导出单个function
// module.export = (id) => ({id,message:'test success'})
- 类型文件声明
// test.d.ts
declare function getUser(id: number): { id: number; name: string }
// 导出模块声明
export = {
getUser
}
// 导出单个声明
// export = getUser
- 使用
// common.js
const User = require('./test/test')
// 结构形式
// const { getUser } = require('./test/test')
user.getUser(1) // { id: 1, message: 'test success' }
// getUser(1) // { id: 1, message: 'test success' }
- 类型提示
- 在
ts
文件中使用js
文件,解决没有类型声明问题
1.2 ES6
模块类型声明文件
目录结构
-
src
test
test.js
test.d.ts
common.js
-
jsconfig.json
-
函数文件声明
// test.js
// es6 默认导出一个对象
export default = {
test: (id) => ({id,message:'test success'})
}
// es6 默认导出单个
// export default function test(id){
// return {
// id,
// message: 'test success'
// }
// }
// 导出单个function
// export function test(id){
// return { id, message: 'test success' }
// }
// 接收 结构形式
// import { test } from './test/tets'
// 接收 将内部所有的单个导出 as 作为一个对象
// import * as Test from './test/test'
- 类型文件声明
// test.d.ts
declare function test(id: number): { id: number; name: string }
// 导出模块声明
export {
test
}
// 导出单个声明
// export test
- 使用
// common.js
const Test = require('./test/test')
Test.test(1) // { id: 1, message: 'test success' }
- 类型提示
2.jsdoc
类型注解
- 直接书写
/**
* 获取用户信息
*
* @param {number} id
* @return {{id: number, message: string}}
*/
function getUser(id) {
return {
id,
message: 'test success'
}
}
- 类型提示
- 参考[JSDoc 介绍 - JSDoc 入门 - JSDoc 中文文档 ] - 手册网 (shouce.ren)
3. 给类型文件添加注释
- 以
ES6
模块声明文件为例
/**
* 测试
*
* @param {*} id
* @return {*} {{ id: number; message: string }}
*/
declare function test(id: number): { id: number; message: string }
export { test }
- 类型提示