使用 typescript 开发 vue 组件来支持代码提示

1.使用 .d.ts 文件

• 第一种在page.json文件里面定义字段 “types”

{
  "types": "./types/src/index.d.ts"
}

• 第二种配合 volar 来定以 一般适合大型组件库

volar文档 这是摘抄的部分说明

Local components, Built-in components, native HTML elements Type-Checking is available with no configuration.
For Global components, you need to define GlobalComponents interface, for example:

naive-ui 内部生成 volar文件脚本

生成的代码大概是这样的(xxx.d.ts)

declare module 'vue' {
  export interface GlobalComponents {
    CountTo: typeof import('azhen-test')['CountTo']
  }
}

export {
  
}

使用的时候要在 tsconfig.json 里面把 xxx.d.ts 引入 (在viteconfig里面导入没有用,viteconfig里面的include只有vite.config.ts)

 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["azhen-test/dist/CountTo"]
  },

2.web-types (因为webstorm不支持ts提示哈哈)

文档
生成文档的插件
navige ui 代码里面的一个脚本