当我尝试解构 object 时出现 typescript 错误

Question

I made a react app with create-react-app typescript template. I made a simple card component, and I tried to destructuring an object but i have the following error: enter image description here

this is my tsconfig file

 { "compilerOptions": { "target":"ES2020", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module":"ES2020", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ], "exclude": ["node_modules"] }

Answer 1

default is a reserved keyword used in switch statements. Any other name will be fine.

interface CardProps {
    default: 'test';
    defaults: 'test';
}

declare const props: CardProps;

const { default } = props; // KO
const { defaults } = props; // OK

See other reserved keywords .