The concept of nesting partial types in Typescript

Question

The concept of nesting partial types in Typescript

Struggling to type partial objects from GraphQL queries, especially with an object that looks like this...

// TypeScript types

interface Foo {
  bar: Bar
}

interface Bar {
  a: number,
  b: number
}

// GraphQL query

foo {
  bar {
    a
    // 'b' property is missing
  }
}

Trying to figure out how to properly type the response without violating the declaration of Foo, since using Pick on the Bar property doesn't seem ideal. Any suggestions on how to handle complex objects like Foo and Bar in GraphQL results?

typescript types graphql

Answer 1

Answer №1

For generating types, it is advisable to utilize an existing package that provides this functionality. One such tool is the gql code generator

If you prefer not to use a package, another method to handle this issue is by creating partial types within the entire object structure.

interface Car {
    engine: Engine;
}

interface Engine {
    cylinders: number;
    horsepower: number;
}

type Partial<T extends object> = {
    [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K] 
}

const partialCar: Partial<Car> = {
    engine: {
        horsepower: 400
    }
}

Answer 2

For generating types, it is advisable to utilize an existing package that provides this functionality. One such tool is the gql code generator

If you prefer not to use a package, another method to handle this issue is by creating partial types within the entire object structure.

interface Car {
    engine: Engine;
}

interface Engine {
    cylinders: number;
    horsepower: number;
}

type Partial<T extends object> = {
    [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K] 
}

const partialCar: Partial<Car> = {
    engine: {
        horsepower: 400
    }
}

The concept of nesting partial types in Typescript

Answer №1

Similar questions

My function won't get called when utilizing Angular

Strange Node.js: I always avoid utilizing `require()`, yet encountered an unexpected error

Angular : Is toFixed() functioning properly with one value but not with the other one?

Creation of Card Component with React Material-UI

Is there a missing .fillGeometry in the Figma plugin VectorNode?

The function, stored as state within a context provider, is experiencing only one update

Activate the event when the radio button is changed

Angular File Upload Button Tutorial

A guide to creating a TypeScript redux middleware class

Find a string that matches an element in a list

How should we provide the search query and options when using fuse.js in an Angular application?

Guide to Validating Fields in Angular's Reactive Forms After Using patchValue

establish the data type for the key values when using Object.entries in TypeScript

Tips for troubleshooting a Typescript application built with Angular 2

Is it possible to easily organize a TypeScript dictionary in a straightforward manner?

Connecting conversations in react

The process of removing and appending a child element using WebDriverIO

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

The data type 'Observable<any>' cannot be assigned to the type 'StoresSummaryResults'. The property 'Data' is not present in the 'Observable<any>' type

React Hook Form: Reset function triggers changes across all controllers on the page