Typescript prop errors

Running into some type issues but a basic button that has props passed through

I’m using the default next.js typescript configuration

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

[kyh]

Using type instead of an interface works

[good-idea]

This appears to be an issue with newer versions of Typescript (4.5+) - I’m not seeing this error on 4.3.2. TS 4.5 has a new feature, “Template String Types as Discriminants”, so it’s now parsing this:

declare type TransientProps = Record<`$${string}`, any>;

In a smarter way. Unfortunately, for those of us using interfaces, those aren’t working because interfaces cannot extend records with templated keys. Immediate solutions are:

• convert your props interfaces to types
• extend your interfaces with TransientProps

Solutions for the lib:

• Update the definition of TransientProps to:

  declare type TransientProps = Record<`$${string}` | string, any>;
  

  (adding that | string to the key)
• Or, just remove the TransientProps definition completely:
  • From a type-checking point of view, does this achieve anything special?