Conditional type/interface attribute typing

Question

Conditional type/interface attribute typing

Below are the interfaces I am working with:

interface Movie {
  id: number;
  title: string;
}

interface Show {
  title: string;
  ids: {
    trakt: number;
    imdb: string;
    tmdb?: number;
  };
}

interface Props {
  data: Movie | Show;
  inCountdown: boolean;
  mediaType: "movie" | "tv"
}

If the media type is set to "movie", then the data object will always be of type Movie. I want my code to understand this without requiring explicit casting or using as.

I would like to avoid doing something like this, if possible:

let docId = "";
if (mediaType === "movie") {
  docId = (data as Movie).id.toString();
}

How can I structure this interface so that I can use

let mediaType = "movie"
let data = {id: 1, title: "Dune"}
let docId = "";

if (mediaType === "movie") {
  docId = data.id.toString();
}
if (mediaType === "tv") {
  docId = data.show.ids.trakt.toString();
}

without encountering errors or warnings such as

Property 'show' does not exist on type '{ id: number; title: string; }'

?

Here's a functional demo.

typescript

Answer 1

Answer №1

To ensure that illegal states are unrepresentable, consider creating a union type instead of a product type.

interface Movie {
  id: number;
  title: string;
}

interface Show {
  title: string;
  ids: {
    trakt: number;
    imdb: string;
    tmdb?: number;
  };
}


interface MovieProps {
  data: Movie;
  inCountdown: boolean;
  mediaType: "movie"
}

interface ShowProps {
  data: Show;
  inCountdown: boolean;
  mediaType: "tv"
}

type Props = MovieProps | ShowProps

const Component=(props:Props)=>{
  if(props.mediaType==='tv'){
    props.data // Show
  } else{
    props.data // Movie
  }
}

Playground

Answer 2

To ensure that illegal states are unrepresentable, consider creating a union type instead of a product type.

interface Movie {
  id: number;
  title: string;
}

interface Show {
  title: string;
  ids: {
    trakt: number;
    imdb: string;
    tmdb?: number;
  };
}


interface MovieProps {
  data: Movie;
  inCountdown: boolean;
  mediaType: "movie"
}

interface ShowProps {
  data: Show;
  inCountdown: boolean;
  mediaType: "tv"
}

type Props = MovieProps | ShowProps

const Component=(props:Props)=>{
  if(props.mediaType==='tv'){
    props.data // Show
  } else{
    props.data // Movie
  }
}

Playground

Answer 3

Answer №2

The concept of conditional types in Typescript differs from narrowing the type. In this scenario, we specifically narrow down the type that we require.

In your particular example, it is essential to verify if any required key name exists in the data object. This process leads to a narrowing down of the data object's type to the necessary type.

You can perform key checks (or property name checks) on an object using the 'in' operator. Refer to the functional example provided below.

let mediaType = "movie";
let data = {id: 1, title: "Dune"};
let docId = "";


function fn(myData: Props['data']){
  if (mediaType === "movie" && 'id' in myData) {
    docId = myData.id.toString(); // this method avoids the need for typecasting
  }
  
  if(mediaType === "tv" && 'ids' in myData){  
    docId = myData.ids.trakt.toString();
  }
}

fn(data);

Playground

Demo:

interface Movie {
  id: number;
  title: string;
}

interface Show {
  title: string;
  ids: {
    trakt: number;
    imdb: string;
    tmdb?: number;
  };
}

interface Props {
  data: Movie | Show;
  inCountdown: boolean;
  mediaType: "movie" | "tv"
}

let mediaType = "movie";
let data = {id: 1, title: "Dune"};
let docId = "";


function fn(data1: Props['data']){
  if (mediaType === "movie" && 'id' in data1) {
    docId = data1.id.toString();
  }
  
  if(mediaType === "tv" && 'ids' in data1){  
    docId = data1.ids.trakt.toString();
  }
}

fn(data);

Answer 4

The concept of conditional types in Typescript differs from narrowing the type. In this scenario, we specifically narrow down the type that we require.

In your particular example, it is essential to verify if any required key name exists in the data object. This process leads to a narrowing down of the data object's type to the necessary type.

You can perform key checks (or property name checks) on an object using the 'in' operator. Refer to the functional example provided below.

let mediaType = "movie";
let data = {id: 1, title: "Dune"};
let docId = "";


function fn(myData: Props['data']){
  if (mediaType === "movie" && 'id' in myData) {
    docId = myData.id.toString(); // this method avoids the need for typecasting
  }
  
  if(mediaType === "tv" && 'ids' in myData){  
    docId = myData.ids.trakt.toString();
  }
}

fn(data);

Playground

Demo:

interface Movie {
  id: number;
  title: string;
}

interface Show {
  title: string;
  ids: {
    trakt: number;
    imdb: string;
    tmdb?: number;
  };
}

interface Props {
  data: Movie | Show;
  inCountdown: boolean;
  mediaType: "movie" | "tv"
}

let mediaType = "movie";
let data = {id: 1, title: "Dune"};
let docId = "";


function fn(data1: Props['data']){
  if (mediaType === "movie" && 'id' in data1) {
    docId = data1.id.toString();
  }
  
  if(mediaType === "tv" && 'ids' in data1){  
    docId = data1.ids.trakt.toString();
  }
}

fn(data);

Conditional type/interface attribute typing

Answer №1

Answer №2

Similar questions

Typescript's identification of a dispute between RequireJS and NodeJS definitions

In the application I'm developing, I'm utilizing React alongside TypeScript, making use of the useContext and useReducer hooks. However, I've encountered an issue where the dispatch function is not being

Utilizing the React TypeScript useContext hook with useReducer for state management

Is it possible to enhance an interface by integrating the characteristics of a constant?

display a dual-column list using ngFor in Angular

Navigating through the exported components of a module without explicit type declarations

The NGINX reverse proxy fails to forward requests to an Express application

Determine the sum of exported identifiers based on ESLint rules

Tips for efficiently handling state across various forms in separate components using only one save button within a React-Redux application

Implementing the 'keepAlive' feature in Axios with NodeJS

Discovering and Implementing Background Color Adjustments for Recently Modified or Added Rows with Errors or Blank Cells in a dx-data-grid

What is the best way to overload a function based on the shape of the argument object in

`Typescript does not adhere to the specified type when used inside a for loop with a local

As I attempt to log in, the GitHub API is sending back a message stating that authentication

Error message 'Module not found' occurring while utilizing dynamic import

Coding with Angular 4 in JavaScript

Ways to compel string type or disregard type?

The command "ng test" threw an error due to an unexpected token 'const' being encountered

Unable to trigger an event from an asynchronous method in TypeScript

What's the best way to maintain the return type of a function as Promise<MyObject[]> when using forEach method?