---
title: "Configuration TypeScript"
headingIds:
  [
    "typescript-setup",
    "tsconfig-json",
    "deno",
    "vite-esbuild",
    "precompile-plugin-recommended-for-production",
    "attribute-types",
    "where-to-next",
  ]
---

# Configuration TypeScript

Configurez le compilateur pour utiliser le runtime JSX de Vincle.

## tsconfig.json

Utilisez `jsx: "react-jsx"` et `jsxImportSource: "@vincle/core"`. Les autres options dépendent de votre application et de votre environnement d’exécution.

```json title="tsconfig.json"
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@vincle/core"
  }
}
```

## Deno

Deno lit les options JSX de `deno.json`. Déclarez également le package npm dans les imports de votre projet.

```json title="deno.json"
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:@vincle/core"
  },
  "imports": {
    "@vincle/core": "npm:@vincle/core"
  }
}
```

## Vite / esbuild

Vite et esbuild peuvent compiler le JSX avec le même `jsxImportSource`. Aucun runtime React n’est nécessaire.

```ts
// vite.config.ts
export default defineConfig({
  esbuild: { jsx: "automatic", jsxImportSource: "@vincle/core" },
});
```

### Plugin de précompilation (recommandé en production)

En production, le [plugin de précompilation](/fr/integration/precompile) transforme les parties statiques en modèles HTML et conserve les contrôles nécessaires au runtime.

```ts
import precompile from "@vincle/precompile/vite";

export default defineConfig({
  esbuild: { jsx: "automatic", jsxImportSource: "@vincle/core" },
  plugins: [precompile()],
});
```

## Types des attributs

Vincle fournit les types des attributs HTML et SVG, des styles et des événements sous forme de chaînes. Les intégrations ajoutent leurs propres types sans modifier Core.

## Pour continuer

Essayez le [premier rendu](/fr/guide/getting-started/first-render), puis explorez les [éléments et attributs](/fr/guide/jsx/elements-attributes).