# Making a custom UISchema type Scoped in TypeScript

**URL:** <https://jsonforms.discourse.group/t/making-a-custom-uischema-type-scoped-in-typescript/2778>\
**Category:** General\
**Created:** [September 22, 2025, 10:24pm UTC](https://jsonforms.discourse.group/t/making-a-custom-uischema-type-scoped-in-typescript/2778 "2025-09-22T22:24:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![J5live](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/j5live/32/1320_2.png) [@J5live](https://jsonforms.discourse.group/u/J5live)\
**Post date:** [September 22, 2025, 10:24pm UTC](https://jsonforms.discourse.group/t/making-a-custom-uischema-type-scoped-in-typescript/2778/1 "2025-09-22T22:24:32Z")

</div>

Hi, I am creating custom components to match our usages using uiTypeIs tester.

```typescript
export const autocompleteJsonFormControlTester = rankWith(
  3,
  uiTypeIs("AutocompleteControl")
);

```

It all works but the typescript typing highlights an error when specifying the scope property passed to a UISchemaElement parameter. I see from the typing that the “ControlElement” type extends “Scoped”. How do I add my typescript type for AutocompleteControl to the JSONForms type so it knows that AutocompleteControl is Scoped?

 ![Screenshot 2025-09-22 at 6.24.21 PM](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/e/ed569770b5d93a309796f67fb8e4b31179b14464.png)

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [September 23, 2025, 7:48am UTC](https://jsonforms.discourse.group/t/making-a-custom-uischema-type-scoped-in-typescript/2778/2 "2025-09-23T07:48:08Z")

</div>

Hi @J5live ,

The issue stems from the definition of the `UISchemaElement` type:

```typescript
/**
 * A union of all available UI schema elements.
 * This includes all layout elements, control elements, label elements,
 * group elements, category elements and categorization elements.
 */
export type UISchemaElement = BaseUISchemaElement | ControlElement | Layout | LabelElement | GroupLayout | Category | Categorization | VerticalLayout | HorizontalLayout;

```

This marks your `scope` as an unknown property.

## Solution 1: Cast to appropriate type

You should be able to define an interface like this for an autocomplete control.

```typescript
import { BaseUISchemaElement, Scoped } from '@jsonforms/core';

interface AutocompleteControl extends BaseUISchemaElement, Scoped {
  type: 'Autocomplete';
}

```

You then need to explicitly cast your element to this type. Then it is recognized as a UISchemaElement because BaseUISchemaElement is allowed.

You can also directly cast you element to BaseUISchemaElement.

## Solution 2: Use a UISchema option to identify the control in your tester

Each Control element can have arbitrary options like so:

```typescript
{
  type: "Control",
  scope: "#/properties/users",
  options: {
    customAutocomplete: true
  }
}

```

Then, in your tester you can check this:

```auto
export const autocompleteJsonFormControlTester = rankWith(
  3,
  optionIs("customAutocomplete", true)
);

```

**I would recommend solution 2.**

---

<div class="post-metadata">

**Author:** ![J5live](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/j5live/32/1320_2.png) [@J5live](https://jsonforms.discourse.group/u/J5live)\
**Post date:** [September 23, 2025, 1:58pm UTC](https://jsonforms.discourse.group/t/making-a-custom-uischema-type-scoped-in-typescript/2778/3 "2025-09-23T13:58:14Z")

</div>

We are going with solution 1 because we are incontrol of the schema. In the case of strings that represent money or dates we will use format in the data schema but for controls with data contracts we prefer to be explicit. For instance our autocompletes are backed by standard search URLs for selections that are passed in an options property.

In any case this works, It is mostly a concern for tests and not tripping our build linters. In the majority of cases the schemas will come in as JSON from the server. It would be nice if there was a documented way to just extend UISchemaElement using declare module, but I haven’t been able to figure out the right way to describe it so that the JSONForms interface accepts the new type. Note I used this for brevity:

```typescript
export interface AutocompleteControlElement extends Omit<ControlElement, 'type'> {
  type: 'AutocompleteControl';
}

```

This way you only have one import and are a bit shielded from future versions extending Control with other interfaces.