# TypeScript

The components and utils are fully typed with TypeScript. If you are using TypeScript in your app, you can take advantage of the type definitions to ensure type safety and better DX.

## Getting started

1. Intial setup

   Follow the steps for setting up TypeScript in your app in [@soleil-se/build-app](/build/app/#typescript).

2. Update entry points

   Change the file extensions of the entry points in your config to `.ts`.

   * `config/config.js` → `config/config.ts`
   * `config/index.js` → `config/index.ts`
   * `config_global/config.js` → `config_global/config.ts`
   * `config_global/index.js` → `config_global/index.ts`

3. Start build script

   Start the build script as usual.

   ```sh
   npm run start
   ```

## Saved values

The saved values are passed to the component as the `values` prop. By default they are typed as `Record<string, unknown>`, but if you need to reference the values in your component, you should define a Props type and pass it to `createConfigApp` for better type safety.

**config.ts**

```ts
import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';


import App, { type Props } from './App.svelte';


createConfigApp<Props>(({ target, props }) => mount(App, { target, props }));
```

**App.svelte**

```svelte
<script lang="ts" module>
  export type Props = {
    values?: {
      text?: string;
    };
  };
</script>


<script lang="ts">
  import { Panel, InputField } from '@soleil-se/config-svelte';


  let { values }: Props = $props();


  console.log(values.text);
</script>


<Panel>
  <InputField name="text" label="Text" />
</Panel>
```

## Props

If you pass additional props from the server to the config app, you can also type those by adding them to the Props type.

**index.ts**

```ts
import router from '@sitevision/api/common/router';
import { createAppProps } from '@soleil-se/config-svelte/server';


import type { Props } from './App.svelte';


router.get('/', (req, res) => {
  const props: Props = {
    foo: 'bar',
    fizz: 'buzz',
  };
  createAppProps(props, res);
});
```

**config.ts**

```ts
import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';


import App, { type Props } from './App.svelte';


createConfigApp<Props>(({ target, props }) => mount(App, { target, props }));
```

**App.svelte**

```svelte
<script lang="ts" module>
  export type Props = {
    foo: string;
    fizz: string;
  };
</script>


<script lang="ts">
  import { Panel, InputField } from '@soleil-se/config-svelte';
  let { foo, fizz }: Props = $props();
</script>


<p>Foo: {foo}</p>
<p>Fizz: {fizz}</p>
<Panel>
  <InputField name="text" label="Text" />
</Panel>
```