vue 3 typescript: global type is not defined inside component

Viewed 658

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"
  ]
}
0 Answers
Related