The issue with type checking being disrupted when importing from a TypeScript file

Question

The issue with type checking being disrupted when importing from a TypeScript file

I have a TypeScript file containing an openapi object schema constant:

export default {
  "title": "Draft",
  "description": "A new draft listing",
  "type": "object",
  "additionalProperties": false,
  "required": [
    "id"
  ],
  "properties": {
    "id": {
      "type": "string"
    }
  }
}

Now, I'm attempting to include this schema as a component in the general OpenAPI schema in another file:

import Draft from './__generated_schemas__/draft.js'

import { OpenAPIV3 } from 'openapi-types'

export const schema: OpenAPIV3.Document = {
  openapi: '3.1',
  info: {
    title: 'Properties API',
    version: '1.0.0',
    description:
      'Nice service description'
  },
  components: {
    schemas: {
      Draft
    }
  },
  paths: {}
}

However, TypeScript throws an error when I do this:

 packages/api/src/schema.ts(22,7): error TS2322: Type '{ title: string; description: string; type: string; additionalProperties: boolean; required: string[]; properties: { id: { type: string; }; }; }' is not assignable to type 'ReferenceObject | SchemaObject'.
   Type '{ title: string; description: string; type: string; additionalProperties: boolean; required: string[]; properties: { id: { type: string; }; }; }' is not assignable to type 'NonArraySchemaObject'.
     Types of property 'type' are incompatible.
       Type 'string' is not assignable to type 'NonArraySchemaObjectType | undefined'.

Interestingly, if I manually insert the JSON from the TypeScript file into the OpenAPI schema, everything works fine:

export const schema: OpenAPIV3.Document = {
  openapi: '3.1',
  info: {
    title: 'Properties API',
    version: '1.0.0',
    description:
      'Nice service description'
  },
  components: {
    schemas: {
      Draft: {
        "title": "Draft",
        "description": "A new draft listing",
        "type": "object",
        "additionalProperties": false,
        "required": [
          "id"
        ],
        "properties": {
          "id": {
            "type": "string"
          }
        }
      }
    }
  }

Any insight on why TypeScript type checking fails in the former case? The object schema and overall OpenAPI schema seem correct to me...

typescript import typechecking

Answer 1

Answer №1

In my opinion, the crucial information lies within the final line:

The 'string' type cannot be assigned to the 'NonArraySchemaObjectType | undefined' type.

Although I am not entirely certain about what exactly the NonArraySchemaObjectType represents, you would need to refer to the typings for a clear understanding. My speculation is that it comprises a union type of various constant strings like: 'number' | 'string' | 'boolean'.

When utilizing a separate file devoid of any typings, typescript will make assumptions concerning each type.

For instance, if you input:

export default {
  "title": "Draft",
  "description": "A new draft listing",
  "type": "object",
  ...
}

This will yield a typing similar to:

{ 
  title: string, 
  description: string, 
  type: string, 
  ...
}

However, simply having type as a regular string is not sufficient; you want it to be of a specific type: NonArraySchemaObjectType. Due to the absence of any typing clues, typescript perceives this as identical to title or description.

The reason why it functions in the same file is because you specify at object creation: OpenAPIV3.Document.

Please consider reviewing the following example:

let aString = "a"; // type is string
let aType = "a" as const; // type is "a"

type unionType = "a" | "b";

const ex1: { value: unionType } = {
    value: aType // ok, since "a" fits in "a" | "b"
};

const ex2: { value: unionType } = {
    value: "a" // ok, since typescript interprets that the "a" you typed here could be of type unionType
};

const ex3: { value: unionType } = {
    value: aString // Error, because you're assigning a string, which could be something else than "a" or "b"
};

Answer 2

In my opinion, the crucial information lies within the final line:

The 'string' type cannot be assigned to the 'NonArraySchemaObjectType | undefined' type.

Although I am not entirely certain about what exactly the NonArraySchemaObjectType represents, you would need to refer to the typings for a clear understanding. My speculation is that it comprises a union type of various constant strings like: 'number' | 'string' | 'boolean'.

When utilizing a separate file devoid of any typings, typescript will make assumptions concerning each type.

For instance, if you input:

export default {
  "title": "Draft",
  "description": "A new draft listing",
  "type": "object",
  ...
}

This will yield a typing similar to:

{ 
  title: string, 
  description: string, 
  type: string, 
  ...
}

However, simply having type as a regular string is not sufficient; you want it to be of a specific type: NonArraySchemaObjectType. Due to the absence of any typing clues, typescript perceives this as identical to title or description.

The reason why it functions in the same file is because you specify at object creation: OpenAPIV3.Document.

Please consider reviewing the following example:

let aString = "a"; // type is string
let aType = "a" as const; // type is "a"

type unionType = "a" | "b";

const ex1: { value: unionType } = {
    value: aType // ok, since "a" fits in "a" | "b"
};

const ex2: { value: unionType } = {
    value: "a" // ok, since typescript interprets that the "a" you typed here could be of type unionType
};

const ex3: { value: unionType } = {
    value: aString // Error, because you're assigning a string, which could be something else than "a" or "b"
};

The issue with type checking being disrupted when importing from a TypeScript file

Answer №1

Similar questions

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

Having trouble updating properties of child components in Angular

Identifying the End of an HTML Video in Angular 2

Importing Typescript modules by specifying their namespace instead of using a function

How can I convert the >= value into an ASCII character within a TypeScript file?

Creating a new item in Angular 2 using user input

The type of a reference variable in a type definition of another variable

Concealing applicationId and clientToken in Datadog

The parameter of type 'void' cannot be assigned to the parameter of type 'PathParams'

Unlock the power of Env variables on both server and client components with Next.js! Learn how to seamlessly integrate these

Analyzing memory consumption by an individual function in a Node.js environment

When using primeng, it is necessary to place the hyphen on the parent node when selecting a child element

``There seems to be an issue with retrieving and displaying data in Ionic2 when using nav

Ways to stop dialog from disappearing in Reactjs

Error is being thrown due to defining a variable after it has already been declared and

React: Issue with input values not correctly updating across multiple fields when changing state toggles

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

Exploring TypeScript: Understanding how to define Object types with variable properties names

Why is the useContext array appearing empty when accessed in a function within the same context, despite being pre-populated?

Refresh Ionic 2 Platform