Can't use "type" and "color" in defineProps typescript
Link to minimal reproduction
Steps to reproduce
- Create vue app using yarn create vite
- Create component with interface props using "type" and "color"
What is expected?
No ts error appeared
What is actually happening?
TS error :
Property 'classes' does not exist on type 'never'.
The intersection '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ variant: "filled" | "outlined" | "text"; color?: "primary" | "secondary" | "tertiary" | "error" | undefined; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10...' was reduced to 'never' because property 'color' has conflicting types in some constituents.ts(2339)
System Info
System:
OS: Windows 10 10.0.22000
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
Memory: 5.18 GB / 15.69 GB
Binaries:
Node: 16.14.2 - C:\laragon\bin\nodejs\node-v16\node.EXE
Yarn: 1.22.15 - C:\laragon\bin\nodejs\node-v16\yarn.CMD
npm: 8.5.0 - C:\laragon\bin\nodejs\node-v16\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.39)
Internet Explorer: 11.0.22000.120
npmPackages:
vue: ^3.2.25 => 3.2.33
Any additional comments?
If i change the props interface for other name like 'variant' or 'tone' it's work as usually
Other Info
package.json
{
"name": "nui-testing",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@typescript-eslint/parser": "^5.23.0",
"@vitejs/plugin-vue": "^2.3.3",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^8.7.1",
"sass": "^1.51.0",
"typescript": "^4.5.4",
"vite": "^2.9.9",
"vue-eslint-parser": "^9.0.1",
"vue-tsc": "^0.34.7"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true,
"declaration": true,
"outDir": "dist"
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
The props doc link.
type: Can be one of the following native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, any custom constructor function or an array of those. In development mode, Vue will check if a prop's value matches the declared type, and will throw a warning if it doesn't. See Prop Validation for more details.