Struggling to accurately import JSON with TypeScript typings

Question

Struggling to accurately import JSON with TypeScript typings

I am facing a challenge with the file test.json that I want to import in a typed form.

{
  "items": [
    {
      "kind": "youtube#video",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/WnVAkK876rA/default.jpg",
          "width": 120,
          "height": 90
        }
      }
    },
    {
      "kind": "youtube#video",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/jhTpc7nFtfI/default.jpg",
          "width": 120,
          "height": 90
        },
        "maxres": {
          "url": "https://i.ytimg.com/vi/jhTpc7nFtfI/maxresdefault.jpg",
          "width": 1280,
          "height": 720
        }
      }
    }
  ]
}

This code snippet is from my App.tsx:

import { TestData } from './Types';
import * as testData from './test.json'
const ttt: TestData = testData;

This relates to Types.ts

export interface TestData {
  items: TestDataPiece[]
}

export interface TestDataPiece {
  kind: string,
  thumbnails: {[key: string]: {
    url: string,
    width: number,
    height: number
  }}
}

In the tsconfig.json, I have set

"resolveJsonModule": true

. However, an error occurred:

[tsl] ERROR in C:\Users\home\IdeaProjects\yt-glasat\src\App.tsx(11,7)
      TS2322: Type '{ items: ({ kind: string; thumbnails: { default: { url: string; width: number; height: number; }; maxres?: undefined; }; } | { kind: string; thumbnails: { default: { url: string; width: number; height: number; }; maxres: { ...; }; }; })[]; }' is not assignable to type 'TestData'.
  Types of property 'items' are incompatible.
    Type '({ kind: string; thumbnails: { default: { url: string; width: number; height: number; }; maxres?: undefined; }; } | { kind: string; thumbnails: { default: { url: string; width: number; height: number; }; maxres: { ...; }; }; })[]' is not ...

typescript

Answer 1

Answer №1

The issue lies in the fact that the data's inferred type contains a maxres property that is marked as optional, resulting in a type of

{url: string; width: number; height: number} | undefined

. However, your thumbnail object type does not permit undefined values for objects with the index signature.

To resolve this error, you have a few options:

Ensure that all JSON objects include a maxres property;
Permit undefined on thumbnail objects;
Utilize a type assertion during assignment, potentially coupled with a runtime check.

If option #1 is not feasible and you prefer to avoid option #2, then a type assertion like this may be necessary:

const ttt = testData as TestData;

Type assertions should generally be used as a last resort. You can enhance this approach by implementing a runtime check to validate that testData conforms to the interface using either a type guard function or a type assertion function.

For example:

function assertIsValidTestData(data: any): asserts data is TestData {
    if (!Array.isArray(data) ||
        data.some(element => {
            return typeof element !== "object" ||
                   typeof element.kind !== "string" ||
                   typeof element.thumbnails !== "object" ||
                   Object.values(element.thumbnails).some(thumbnail => {
                       return typeof thumbnail !== "object" ||
                              typeof thumbnail.url !== "string" ||
                              typeof thumbnail.width !== "number" ||
                              typeof thumbnail.height !== "number";
                   })
        })) {
        throw new Error(`Test data is not valid`);
    }
}

Then proceed with:

assertIsValidTestData(testData);
const ttt: TestData = testData;

Answer 2

The issue lies in the fact that the data's inferred type contains a maxres property that is marked as optional, resulting in a type of

{url: string; width: number; height: number} | undefined

. However, your thumbnail object type does not permit undefined values for objects with the index signature.

To resolve this error, you have a few options:

Ensure that all JSON objects include a maxres property;
Permit undefined on thumbnail objects;
Utilize a type assertion during assignment, potentially coupled with a runtime check.

If option #1 is not feasible and you prefer to avoid option #2, then a type assertion like this may be necessary:

const ttt = testData as TestData;

Type assertions should generally be used as a last resort. You can enhance this approach by implementing a runtime check to validate that testData conforms to the interface using either a type guard function or a type assertion function.

For example:

function assertIsValidTestData(data: any): asserts data is TestData {
    if (!Array.isArray(data) ||
        data.some(element => {
            return typeof element !== "object" ||
                   typeof element.kind !== "string" ||
                   typeof element.thumbnails !== "object" ||
                   Object.values(element.thumbnails).some(thumbnail => {
                       return typeof thumbnail !== "object" ||
                              typeof thumbnail.url !== "string" ||
                              typeof thumbnail.width !== "number" ||
                              typeof thumbnail.height !== "number";
                   })
        })) {
        throw new Error(`Test data is not valid`);
    }
}

Then proceed with:

assertIsValidTestData(testData);
const ttt: TestData = testData;

Answer 3

Answer №2

To solve your problem, you can utilize a type assertion like this:

const newData = myData as MyDataType;

Answer 4

To solve your problem, you can utilize a type assertion like this:

const newData = myData as MyDataType;

Struggling to accurately import JSON with TypeScript typings

Answer №1

Answer №2

Similar questions

What is the best way to generate a dynamically interpolated string in JavaScript?

Categorize messages based on the date they were last read in Angular

Can a generic type be utilized to instantiate an object?

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

Indeed / Applying dynamic keys for validation with Formik

Solving the issue of "Property does not exist on type 'never'" in a program involves identifying the root cause of

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

Empty spaces are mandatory here

Setting up APIGateway for CORS with the CDK: A Step-by-Step Guide

Experiencing difficulty in transferring array information from a parent component to a child component within an

Validating patterns in Angular without using a form

Is there a way to correct Typescript's misunderstanding of the interface from a JSON file that has been imported?

Retrieve all records from the database using a Sequelize query that fall within the timeframe specified by the start

Mastering regular expressions in TypeScript

Vue 3 - Child Component Script Not Updating with Reactive Prop Changes

An issue has occurred: Unable to locate a supporting object 'No result' of type 'string'. NgFor is only compatible with binding to Iterables like Arrays

Encountering an issue when attempting to upgrade to Angular 9: Error arising in metadata creation for exported symbol

Fulfill the promise once all map requests have been completed

What is the cause of the display name missing in the Material-UI Typescript ListItemLink example when using React.forwardRef?

If the parameter type is "never", the ReturnType will be "any"