React-jsonschema-form: How to pass schema with typescript?

[reggi]

I've been hammering the docs, trying to find out why I'm getting this issue up front.

How can I pass in a json schema without getting an initial type error?

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<FormProps<unknown>>): Form<unknown>', gave the following error.
    Type '{ title: string; description: string; type: string; required: string[]; properties: { firstName: { type: string; title: string; default: string; }; lastName: { type: string; title: string; }; telephone: { type: string; title: string; minLength: number; }; }; }' is not assignable to type 'JSONSchema7'.
      Types of property 'type' are incompatible.
        Type 'string' is not assignable to type '"string" | "number" | "boolean" | "object" | "integer" | "array" | "null" | JSONSchema7TypeName[] | undefined'.
  Overload 2 of 2, '(props: FormProps<unknown>, context?: any): Form<unknown>', gave the following error.
    Type '{ title: string; description: string; type: string; required: string[]; properties: { firstName: { type: string; title: string; default: string; }; lastName: { type: string; title: string; }; telephone: { type: string; title: string; minLength: number; }; }; }' is not assignable to type 'JSONSchema7'.ts(2769)
index.d.ts(44, 9): The expected type comes from property 'schema' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<unknown>> & Readonly<FormProps<unknown>> & Readonly<{ children?: ReactNode; }>'
index.d.ts(44, 9): The expected type comes from property 'schema' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<unknown>> & Readonly<FormProps<unknown>> & Readonly<{ children?: ReactNode; }>'

With as const:

(JSX attribute) schema: JSONSchema7
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<FormProps<unknown>>): Form<unknown>', gave the following error.
    Type '{ readonly title: "A registration form"; readonly description: "A simple form example."; readonly type: "object"; readonly required: readonly ["firstName", "lastName"]; readonly properties: { readonly firstName: { ...; }; readonly lastName: { ...; }; readonly telephone: { ...; }; }; }' is not assignable to type 'JSONSchema7'.
      Types of property 'required' are incompatible.
        The type 'readonly ["firstName", "lastName"]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.
  Overload 2 of 2, '(props: FormProps<unknown>, context?: any): Form<unknown>', gave the following error.
    Type '{ readonly title: "A registration form"; readonly description: "A simple form example."; readonly type: "object"; readonly required: readonly ["firstName", "lastName"]; readonly properties: { readonly firstName: { ...; }; readonly lastName: { ...; }; readonly telephone: { ...; }; }; }' is not assignable to type 'JSONSchema7'.ts(2769)
index.d.ts(44, 9): The expected type comes from property 'schema' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<unknown>> & Readonly<FormProps<unknown>> & Readonly<{ children?: ReactNode; }>'
index.d.ts(44, 9): The expected type comes from property 'schema' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<unknown>> & Readonly<FormProps<unknown>> & Readonly<{ children?: ReactNode; }>'

[epicfaace]

What's the actual value of your schema?

[reggi]

Hey @epicfaace

I pulled something from the docs:

const schema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name",
      "default": "Chuck"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    }
  }
}

[reggi]

I'm using a fresh create-react-app with typescript flag

[abdvl]

You can try this

import { JSONSchema7 } from "json-schema";
....
 schema={schema as JSONSchema7}

[matthias-ccri]

To add to the previous comment, for complete type checking, you'd want to do this:

const schema: JSONSchema7 = { ... };
....
schema={schema}

[reggi]

@matthias-ccri That works!

One thing, is that it would be nice to not have to depend on json-schema directly. Is it possible to request this makes its way into the index.d.ts file?

export type Schema = JSONSchema7
// or
export type JSONSchema7 = JSONSchema7

I could do this:

const inputSchema: FormProps<any>['schema'] = {

Just a thought, not necessary.

[amitvchaudhary]

Just use this:

const schema: any = {}

[Miciurash]

The fix that worked for me in 3 steps:

1. import JSONSchema7 to the .ts/.tsx file

import { JSONSchema7 } from "json-schema";

1. make the constant/variable type of JSONSchema7

const jsonSchema: JSONSchema7 = {
  "title": "Let's get started",
  "description": "",
  "type": "object",
  "required": [
    "firstName",
    "lastName",
    "email",
    "password",
    "passwordcheck"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "email": {
      "type": "string",
      "title": "Email"
    },
    "password": {
      "type": "string",
      "title": "Password",
      "minLength": 6
    },
    "passwordcheck": {
      "type": "string",
      "title": "Password",
      "minLength": 6
    }
  }
}

1. embed the form with schema defined

 <Form 
    schema={jsonSchema} 
    uiSchema={uiSchema} 
    formData={formData} 
    liveValidate />