type guard

• 공식 TS : https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions

• 추천글 : https://blog.logrocket.com/how-to-use-type-guards-typescript/

• StrictUnion 타입 관련 글 : https://stackoverflow.com/a/65805753

@@ in props

import React from 'react';
// interface Rectangle {
//   x: number
//   y: number
//   width: number
//   height: number
// }

// interface Point {
//   x: number
//   y: number
// }

// type Props = Rectangle | Point

// const Shape = ({...props}:Props)=>{

// }

// <Shape />



// type UnionKeys<T> = T extends T ? keyof T : never;
// type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;
// type StrictUnion<T> = StrictUnionHelper<T, T>

// type T =  StrictUnion<{A: number, B: number} | {C: number }>;


// type NetworkLoadingState = {
//   state: "loading";
// };
// type NetworkFailedState = {
//   state: "failed";
//   code: number;
// };
// type NetworkSuccessState = {
//   state: "success";
//   response: {
//     title: string;
//     duration: number;
//     summary: string;
//   };
// };
// // Create a type which represents only one of the above types
// // but you aren't sure which it is yet.
// type NetworkState =
//   | NetworkLoadingState
//   | NetworkFailedState
//   | NetworkSuccessState;


// const Test = ({...props}:NetworkState) => {
//   return(<></>);
// }

// <Test state='loading' code={3} />


// https://stackoverflow.com/a/65805753
type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;
type StrictUnion<T> = StrictUnionHelper<T, T>
// 사용 예시 type T =  StrictUnion<{A: number, B: number} | {C: number }>;

interface CheckAndProps  {
  checked: boolean
}

interface LockAndProps {
  isLocked: boolean
}

const Test2 = ({...props}:StrictUnion<CheckAndProps | LockAndProps>) => {
  if('checked' in props){
    return (<></>);
  }

  if('isLocked' in props){
    return (<></>);
  }

  return(<></>)
}

<>
  <Test2 isLocked />
  <Test2 checked />
  <Test2 isLocked checked />
  <Test2 isLocked ch />
</>

// https://stackoverflow.com/a/65805753
// type UnionKeys<T> = T extends T ? keyof T : never;
// type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;
// type StrictUnion<T> = StrictUnionHelper<T, T>
// // 사용 예시 type T =  StrictUnion<{A: number, B: number} | {C: number }>;

// interface CheckAndProps  {
//   "type": 'check'
  
//   // 블라블라 check에 대한 props
//   checkProps?: Record<any, any>;
// }

// interface LockAndProps {
//   "type": 'lock'
  
//   // 블라블라 check에 대한 props
//   lockProps?: Record<any, any>;
// }

// const Test2 = ({...props}:CheckAndProps | LockAndProps) => {
//   if(props.type === 'check'){
//     // props 자동완성도 CheckAndProps에 대한 것만 나열됨.
//     return(<></>)
//   }

//   // props 자동완성도 LockAndProps에 대한 것만 나열됨.
//   return(<></>)
// }

// <>
//   // props 자동완성도 CheckAndProps에 대한 것만 나열됨.
//   // check 인데 lock에 대한 프롭을 쓰면 에러
//   <Test2 type='check' checkProps={{}} /> 
//   <Test2 type='check' lockProps={{}} /> 

//   // props 자동완성도 LockAndProps에 대한 것만 나열됨.
//   // lock인데 check에 대한 프롭을 쓰면 에러
//   <Test2 type='lock' lockProps={{}}/>
//   <Test2 type='lock' checkProps={{}}/>
// </>

instanceof

typeof