``` ## The Problem Now because [I'm using Next.js and TypeScript with Preact](https://github.com/developit/nextjs-preact-demo), I use Preact with a React alias - basically lying to TypeScript that we are using React so we benefit from it's mature tooling across VS Code and Next.js. However React doesn't use `class` for classes, it uses `className`! (At least until [React Fire](https://github.com/facebook/react/issues/13525) lands.) So I have two choices: - either go through and rename every `class` to `className` - like a heathen - every time I use Tailwind - or try to use `class` as Preact lets me do The problem goes back to what I stated above: we lied to TypeScript that we're using React, so it's not going to let us use `class`: This: ```jsx

Does this work?

``` Leads to: ``` (JSX attribute) class: string Type '{ children: string; href: string; class: string; }' is not assignable to type 'DetailedHTMLProps, HTMLAnchorElement>'. Property 'class' does not exist on type 'DetailedHTMLProps, HTMLAnchorElement>'.ts(2322) Peek Problem No quick fixes available ``` Oh no! No quick fixes available?? Lies. ## The Quick Fix Here's the fix. Add a [TypeScript ambient declaration](https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules) - basically a `anyname.d.ts` file anywhere in your project, assuming default `tsconfig` settings and add this: ```ts // anyname.d.ts - place this anywhere in your project declare namespace React { interface HTMLAttributes { // Preact supports using "class" instead of "classname" - need to teach typescript class?: string; } } ``` And now I can write `class` in my React code! **If that's all you came to this blogpost for, then we're done**. I'm just going to discuss how I made my way to this solution as an intermediate TypeScript user, since this is a learning opportunity for broader TypeScript use. > ⚠️ If you're also using Tailwind with Next.js, there is one more issue to resolve - disabling the styled-jsx plugin. More details here: https://github.com/zeit/next.js/issues/11675 ## Appendix: Declaration Merging to Patch Definitions One thing I solidified when I read [Boris Cherny's TypeScript book](https://mobile.twitter.com/swyx/status/1135525665971695617) is the power of [Declaration Merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) to fix issues with official typings. I even included this as part of [the Troubleshooting Handbook in the React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#troubleshooting-handbook-bugs-in-official-typings). But I'd only patched libraries before, never patched something in the core behavior of JSX itself. When I googled how to do this, I found [this unhelpful Stackoverflow answer](https://stackoverflow.com/questions/51835611/specify-specific-props-and-accept-general-html-props-in-typescript-react-app) and eventually this [Stackoverflow answer](https://stackoverflow.com/questions/40093655/how-do-i-add-attributes-to-existing-html-elements-in-typescript-jsx): ```ts declare module 'react' { interface HTMLProps { block?:string; element?:string; modifiers?:string; } } ``` But when I tried it, it didn't work. I ultimately resorted to looking up [the React typings in DefinitelyTyped itself](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts), and realizing that React was exported as a `namespace`. Since Namespaces are a more arcane feature of TypeScript, I've never really used them in application code. But it was enough to go on - I swapped `declare module 'react'` with `declare namespace React` and prayed that declaration merging worked. It did. And now you know too.