JS类型提示

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 }

• 类型提示