Breaking News: Grepper is joining You.com. Read the official announcement!

Adding typegaurds to TS Unions

Embarrassed Echidna answered on June 28, 2022 Popularity 1/10 Helpfulness 1/10

answer Adding typegaurds to TS Unions

Adding typegaurds to TS Unions

Comment

import React from 'react';

interface Props1 {
  nameA: string;
  nameB?: string;
}

interface Props2 {
  nameB: string;
}

type Props = Props1 | Props2

const hasProperty = <T extends object>(obj: T, prop: string) => 
    Object.hasOwnProperty.call(obj, prop);

const isA = (props: Props): props is Props1 => 
    hasProperty(props,'nameA');
const isB = (props: Props): props is Props2 => 
    !hasProperty(props,'nameA') && hasProperty(props,'nameB');


const Comp: React.VFC<Props> = (props) => {

  if(isA(props)){
    const y = props; // Props1
  }

   if(isB(props)){
    const y = props; // Props2
  }


  return null
}

  const result1 = <Comp nameB="b" /> // ok
  const result2 = <Comp nameA="a" /> // ok

  // error,  'nameB' is missing in type '{}' but required in type 'Props2'
  const result3 = <Comp />

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: catchts.com

Tags: typescript unions

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Embarrassed Echidna

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Adding typegaurds to TS Unions

Contents

More Related Answers

Adding typegaurds to TS Unions

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.