preact · Preact Docs
Preact TypeScript
Teaches how to configure TypeScript for Preact projects, including tsconfig.json settings for classic and automatic JSX transforms, and provides patterns for typing components, hooks, refs, context, and extending JSX...
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact TypeScript
Teaches how to configure TypeScript for Preact projects, including tsconfig.json settings for classic and automatic JSX transforms, and provides patterns for typing components, hooks, refs, context, and extending JSX...
When To Use
Use when configuring a tsconfig.json for Preact JSX transpilation or when implementing type definitions for Preact components, hooks, and custom HTML attributes.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-typescript-workflow-guide.md | A comprehensive guide covering essentials, debugging, testing, and advanced usage of Preact with TypeScript. | Questions about a comprehensive guide covering essentials, debugging, testing, and advanced usage of Preact with TypeScript. |
examples/preact-typescript-tsconfig-compiler-options.text | A configuration snippet for tsconfig.json defining jsxFactory and jsxFragmentFactory for Preact compatibility. | Exact payloads, commands, or snippets shown in A configuration snippet for tsconfig.json defining jsxFactory and jsxFragmentFactory for Preact compatibility. |
examples/preact-typescript-compiler-options-configuration.text | A TypeScript configuration snippet demonstrating the jsx and jsxImportSource settings required for Preact automatic transform. | Exact payloads, commands, or snippets shown in A TypeScript configuration snippet demonstrating the jsx and jsxImportSource settings required for Preact automatic t... |
examples/preact-typescript-tsconfig-configuration.text | A JSON configuration file defining compiler options for using Preact with TypeScript, including jsxFactory and jsxFragmentFactory settings. | Exact payloads, commands, or snippets shown in A JSON configuration file defining compiler options for using Preact with TypeScript, including jsxFactory and jsxFra... |
examples/preact-typescript-babel-configuration.text | A Babel configuration object demonstrating how to set up the TypeScript preset and JSX pragma for Preact. | Exact payloads, commands, or snippets shown in A Babel configuration object demonstrating how to set up the TypeScript preset and JSX pragma for Preact. |
examples/preact-typescript-tsconfig-compiler-options-2.text | A JSON configuration snippet for tsconfig.json defining compiler options and path aliases for Preact compatibility. | Exact payloads, commands, or snippets shown in A JSON configuration snippet for tsconfig.json defining compiler options and path aliases for Preact compatibility. |
examples/preact-typescript-component-props-interface.text | A TypeScript interface and functional component implementation demonstrating how to define and use props in Preact. | Exact payloads, commands, or snippets shown in A TypeScript interface and functional component implementation demonstrating how to define and use props in Preact. |
examples/preact-typescript-component-props-interface-2.text | A TypeScript example demonstrating how to define and use an interface for component props in Preact. | Exact payloads, commands, or snippets shown in A TypeScript example demonstrating how to define and use an interface for component props in Preact. |
examples/preact-typescript-function-component.text | A code example demonstrating how to define a functional component using Preact and TypeScript interfaces. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define a functional component using Preact and TypeScript interfaces. |
examples/preact-typescript-component-props-interface-3.text | A TypeScript example demonstrating how to define component props using an interface and the ComponentChildren type in Preact. | Exact payloads, commands, or snippets shown in A TypeScript example demonstrating how to define component props using an interface and the ComponentChildren type in... |
examples/preact-typescript-component-props-state.text | A TypeScript implementation of a Preact class component demonstrating how to define interfaces for props and state. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a Preact class component demonstrating how to define interfaces for props and state. |
examples/preact-typescript-component-children-interface.text | A TypeScript interface and functional component demonstrating the use of ComponentChildren for prop typing in Preact. | Exact payloads, commands, or snippets shown in A TypeScript interface and functional component demonstrating the use of ComponentChildren for prop typing in Preact. |
examples/preact-typescript-component-props-interface-4.text | An example demonstrating how to extend HTML attributes using interfaces to define custom component props in TypeScript. | Exact payloads, commands, or snippets shown in An example demonstrating how to extend HTML attributes using interfaces to define custom component props in TypeScript. |
examples/preact-typescript-targetedmouseevent-component.text | A TypeScript code example demonstrating the use of the TargetedMouseEvent type within a Preact component class. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating the use of the TargetedMouseEvent type within a Preact component class. |
examples/preact-typescript-component-class.text | A code example demonstrating how to define a functional or class-based component using TypeScript within a Preact application. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define a functional or class-based component using TypeScript within a Preact app... |
examples/preact-typescript-component-ref-type-error.text | A TypeScript example demonstrating a type mismatch error when using createRef with a Preact component. | Exact payloads, commands, or snippets shown in A TypeScript example demonstrating a type mismatch error when using createRef with a Preact component. |
examples/preact-typescript-context-type-definition.text | A code example demonstrating how to define and use TypeScript types with Preact's createContext function. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define and use TypeScript types with Preact's createContext function. |
examples/preact-typescript-component-type-error.text | A TypeScript code example demonstrating a type error when a component attempts to access an undefined theme variable. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating a type error when a component attempts to access an undefined theme variable. |
examples/preact-typescript-context-api.text | A TypeScript implementation demonstrating how to use the Context API within a Preact application. | Exact payloads, commands, or snippets shown in A TypeScript implementation demonstrating how to use the Context API within a Preact application. |
examples/preact-typescript-context-interface.text | A TypeScript implementation demonstrating how to define interfaces and use createContext within a Preact application. | Exact payloads, commands, or snippets shown in A TypeScript implementation demonstrating how to define interfaces and use createContext within a Preact application. |
examples/preact-typescript-counter-component.text | A TypeScript implementation of a counter component using the useState hook in Preact. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a counter component using the useState hook in Preact. |
examples/preact-typescript-useeffect-cleanup-function.text | A TypeScript example demonstrating the correct implementation of a cleanup function within a useEffect hook to prevent memory leaks when adding event listeners. | Exact payloads, commands, or snippets shown in A TypeScript example demonstrating the correct implementation of a cleanup function within a useEffect hook to preven... |
examples/preact-typescript-context-api-2.text | A code example demonstrating how to use the Preact Context API with TypeScript type definitions. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the Preact Context API with TypeScript type definitions. |
examples/preact-typescript-use-ref-html-input-element.text | A TypeScript example demonstrating how to use the useRef hook with an HTMLInputElement in a Preact component. | Exact payloads, commands, or snippets shown in A TypeScript example demonstrating how to use the useRef hook with an HTMLInputElement in a Preact component. |
examples/preact-typescript-reducer-state-action-types.text | A TypeScript implementation defining state and action interfaces for a Preact reducer function. | Exact payloads, commands, or snippets shown in A TypeScript implementation defining state and action interfaces for a Preact reducer function. |
examples/preact-typescript-preact-docs-usereducer-typescript.text | A TypeScript implementation of the useReducer hook demonstrating state and action type definitions in a Preact component. | Exact payloads, commands, or snippets shown in A TypeScript implementation of the useReducer hook demonstrating state and action type definitions in a Preact compon... |
examples/preact-typescript-jsx-intrinsic-elements-error.text | A code snippet demonstrating a TypeScript error when using an undefined property on JSX.IntrinsicElements in a Preact component. | Exact payloads, commands, or snippets shown in A code snippet demonstrating a TypeScript error when using an undefined property on JSX.IntrinsicElements in a Preact... |
examples/preact-typescript-global-dts-jsx-intrinsic-elements.text | A global declaration file defining custom JSX intrinsic elements for Preact using TypeScript. | Exact payloads, commands, or snippets shown in A global declaration file defining custom JSX intrinsic elements for Preact using TypeScript. |
examples/preact-typescript-component-props-error.text | A code snippet demonstrating a TypeScript error when passing custom props to a standard HTML element in Preact. | Exact payloads, commands, or snippets shown in A code snippet demonstrating a TypeScript error when passing custom props to a standard HTML element in Preact. |
examples/preact-typescript-global-d-ts-jsx-namespace-extension.text | A global declaration file extending the preact JSX namespace to include custom HTML attributes for TypeScript support. | Exact payloads, commands, or snippets shown in A global declaration file extending the preact JSX namespace to include custom HTML attributes for TypeScript support. |
examples/preact-typescript-global-d-ts-jsx-augmentation.text | A global declaration file demonstrating how to augment the preact JSX namespace to include custom HTML attributes in TypeScript. | Exact payloads, commands, or snippets shown in A global declaration file demonstrating how to augment the preact JSX namespace to include custom HTML attributes in... |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/typescript