VUE 3打字稿:在组件内未定义全局类型

发布于 2025-01-31 04:02:16 字数 2381 浏览 0 评论 0原文

首先要知道的是,我正在使用Typescript进行Vuejs 3项目。
我在“ global.types.d.ts ”中定义了全局类型的“ tcolor”,它在所有 * .ts 文件中都适用于我,但是当我尝试使用它时在组件(设置脚本)中,我给了我这个错误:“ 错误'tcolor'未定义no-undef ”:

global.types.d.t.ts

declare type TColor = {
  readonly primary: string;
  readonly secondary: string;
  readonly success: string;
  readonly error: string;
  readonly warning: string;
  readonly dark: string;
  readonly accent: string;
};


import { InjectionKey } from "vue";

// theme symbols
export const S_THEME_COLORS: InjectionKey<TColor> = Symbol("colors");


homeview.vue =&gt; 我在哪里遇到错误

<script setup lang="ts">
import { useThemeStore } from "@/store/modules/common/theme";
import { inject } from "vue";
import { S_THEME_COLORS } from "@/utils/constants/injectable.symbols.constant";

const themeStore = useThemeStore();

// injected dependencies
const { primary, secondary } = inject(S_THEME_COLORS) as TColor; // <-- the error here ('TColor' is not defined no-undef)
console.log(primary);
</script>



tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "typeRoots": [
      "src/types/**/*",
      "src/utils/types/**/*",
      "src/utils/types/*.d.ts"
    ],
    "paths": {
      "@/*": [
        "src/*",
        "src/utils/types/*.d.ts"
      ],
      "@root/*": [
        "/*"
      ],
      "*": [
        "src/utils/types/*.d.ts"
      ]
    },
    "lib": [
      "es6",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
, "src/utils/types/pinia.adaptors.types.d.ts"  ],
  "exclude": [
    "node_modules"
  ]
}

first thing to know is that i'm working on vuejs 3 project with typescript.
i defined a global type 'TColor' in "global.types.d.ts" and it works for me inside all *.ts files but when i try to use it inside a component (setup script) is gives me this error: "error 'TColor' is not defined no-undef":

global.types.d.ts

declare type TColor = {
  readonly primary: string;
  readonly secondary: string;
  readonly success: string;
  readonly error: string;
  readonly warning: string;
  readonly dark: string;
  readonly accent: string;
};

injectable.symbols.constant.ts here it works fine

import { InjectionKey } from "vue";

// theme symbols
export const S_THEME_COLORS: InjectionKey<TColor> = Symbol("colors");


HomeView.vue => where i'm getting the error

<script setup lang="ts">
import { useThemeStore } from "@/store/modules/common/theme";
import { inject } from "vue";
import { S_THEME_COLORS } from "@/utils/constants/injectable.symbols.constant";

const themeStore = useThemeStore();

// injected dependencies
const { primary, secondary } = inject(S_THEME_COLORS) as TColor; // <-- the error here ('TColor' is not defined no-undef)
console.log(primary);
</script>

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "typeRoots": [
      "src/types/**/*",
      "src/utils/types/**/*",
      "src/utils/types/*.d.ts"
    ],
    "paths": {
      "@/*": [
        "src/*",
        "src/utils/types/*.d.ts"
      ],
      "@root/*": [
        "/*"
      ],
      "*": [
        "src/utils/types/*.d.ts"
      ]
    },
    "lib": [
      "es6",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
, "src/utils/types/pinia.adaptors.types.d.ts"  ],
  "exclude": [
    "node_modules"
  ]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文