## Why TypeScript? All Kinetik components are written in TypeScript and include full type definitions. This gives you: - **Autocomplete** - See all available props as you type - **Type checking** - Catch errors before runtime - **Documentation** - Hover over props to see descriptions - **Refactoring** - Safely rename and refactor with confidence TypeScript is optional but highly recommended. All components work with plain JavaScript too. ## Recommended Configuration Here's our recommended `tsconfig.json` for Next.js projects: ```json { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } ``` ## Key Settings Explained ### Strict Mode ```json "strict": true ``` We strongly recommend strict mode. It enables: - `strictNullChecks` - Catch potential null/undefined errors - `strictFunctionTypes` - Ensure function parameter types are correct - `noImplicitAny` - Require explicit types when TypeScript can't infer ### Path Aliases ```json "paths": { "@/*": ["./*"] } ``` This lets you import components with clean paths: ```tsx // Instead of this import { MagneticButton } from '../../../components/ui/MagneticButton' // You can write this import { MagneticButton } from '@/components/ui/MagneticButton' ``` ## Component Types All Kinetik components export their prop types. You can use them to type your own components: ```tsx import { MagneticButton } from '@/components/ui/MagneticButton' // The component already accepts these typed props Click me ``` ### Creating Wrapper Components When creating wrapper components, you can extend the original types: ```tsx import { ComponentProps } from 'react' import { MagneticButton } from '@/components/ui/MagneticButton' // Get props type from the component type ButtonProps = ComponentProps // Extend with your own props interface CustomButtonProps extends ButtonProps { loading?: boolean } export function CustomButton({ loading, children, ...props }: CustomButtonProps) { return ( {loading ? 'Loading...' : children} ) } ``` ## Framer Motion Types Kinetik heavily uses Framer Motion. Here are some useful types: ```tsx import { MotionValue, SpringOptions, Variants, HTMLMotionProps } from 'framer-motion' // Motion value type const x: MotionValue = useMotionValue(0) // Spring config type const springConfig: SpringOptions = { damping: 20, stiffness: 300 } // Animation variants type const variants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1 } } ``` ## Common Type Issues ### HTMLElement Refs When using refs with motion components: ```tsx // ❌ This won't work const ref = useRef(null) // ✅ Use HTMLDivElement for wrapper divs const ref = useRef(null) ``` ### Event Types For mouse events on motion components: ```tsx const handleMouseMove = (e: React.MouseEvent) => { // TypeScript knows e.currentTarget is HTMLDivElement const rect = e.currentTarget.getBoundingClientRect() } ``` Install the "TypeScript Hero" or "Auto Import" extension for automatic imports when using Kinetik components. ## Next Steps With TypeScript configured, you're ready to start building! Check out the [Animation Principles](/docs/core-concepts/animation-principles) to understand how Kinetik animations work.

TypeScript Setup

TypeScript Setup