VUE 3打字稿:在组件内未定义全局类型
首先要知道的是,我正在使用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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论