---
url: >-
  https://lit-ui-router.dev/reference/lit-ui-router/types/TypedLitStateDeclaration.md
---
[lit-ui-router](../index.md) / TypedLitStateDeclaration

# Interface: TypedLitStateDeclaration\<T>

Defined in: [packages/lit-ui-router/src/interface.ts:555](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/interface.ts#L555)

A [LitStateDeclaration](LitStateDeclaration.md) for state tables registered with
`ui-router-registry`, whose components may call typed targets for states in
the same table.

Checking such a table against [LitStateDeclaration](LitStateDeclaration.md) infers each
component's `render()` or template body, which reads the registry, which
reads the table: TypeScript reports the table as circular (TS7022). This type
checks components by [TypedLitViewComponent](TypedLitViewComponent.md) instead. Classes clear on
every supported TypeScript; template functions clear on TypeScript 5.5 and
later, and earlier compilers still need an explicit return type on them.

Checking by public members also admits a LitElement class from a second
copy of lit, which `<ui-view>` cannot render; development builds warn.

## Example

```ts
import { LitElement } from 'lit';
import type { TypedLitStateDeclaration } from 'lit-ui-router';

class ContactView extends LitElement {}

const contactState = {
  name: 'contacts.contact',
  url: '/:contactId',
  component: ContactView,
} as const satisfies TypedLitStateDeclaration;
```

## Extends

* [`StateDeclaration`](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html)

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
|  `T` *extends* [`DefaultResolvesType`](DefaultResolvesType.md) | [`DefaultResolvesType`](DefaultResolvesType.md) |

## Properties

| Property | Type | Description | Overrides | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `component?` | [`TypedLitViewDeclaration`](TypedLitViewDeclaration.md)<`T`> | The Lit component to render for this state. | - | [packages/lit-ui-router/src/interface.ts:559](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/interface.ts#L559) |
|  `views?` | { \[`key`: `string`]: [`TypedLitViewDeclaration`](TypedLitViewDeclaration.md)<`T`>; } | An optional object used to define multiple named views. | `StateDeclaration.views` | [packages/lit-ui-router/src/interface.ts:562](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/interface.ts#L562) |