uniapp typescript 代码提示如何实现

在使用uniapp开发时，如何配置TypeScript以获得更好的代码提示？目前我的项目虽然引入了TypeScript，但编辑器（如HBuilderX或VSCode）对uniapp的API和组件提示不全，比如uni.request或自定义组件属性没有智能提示。请问需要安装哪些类型声明文件，或者是否需要特殊配置tsconfig.json？官方文档提到的@dcloudio/types是否必须？能否提供具体操作步骤？

2 回复

在uni-app中使用TypeScript，需安装@dcloudio/types包，并在tsconfig.json中配置类型声明。同时安装uni-app的VSCode插件，即可获得代码提示。


在 UniApp 中使用 TypeScript 实现代码提示，主要通过以下步骤配置：

  1. 安装 TypeScript 依赖
    在项目根目录执行：

    npm install -D typescript [@types](/user/types)/wechat-miniprogram

  2. 创建 tsconfig.json
    在项目根目录创建配置文件，内容示例：

    {
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["esnext", "dom"],
    "types": ["[@types](/user/types)/wechat-miniprogram"],
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

  3. 配置 Vue 文件类型支持
    在 shims-uni.d.ts 中声明 Vue 文件类型（如无此文件则创建）：

    declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

  4. IDE 设置

    • VS Code：安装 Volar 扩展，确保 Vue 文件获得 TypeScript 支持。
    • WebStorm：在设置中启用 TypeScript 编译器，并勾选 Recompile on changes。

  5. UniApp API 提示
    通过 uni 命名空间直接获得官方 API 的智能提示（需安装 [@types](/user/types)/wechat-miniprogram）。

完成配置后，编写代码时将自动获得类型检查和智能提示，例如：

uni.showToast({
  title: 'Hello',  // 输入时自动提示参数
  icon: 'success'
})

注意：若使用 HBuilderX，需在项目 manifest.json 中开启 “TypeScript” 支持，并确保编译器版本支持 TS。

回到顶部