ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • TypeScript 의 Interface μ‚¬μš©ν•˜κΈ°
    개발 2020. 10. 21. 11:09

     

    🌸 TIL

     

     

     

    TypeScript λ₯Ό μ‚¬μš©ν•˜κ²Œ 되면 ν•¨μˆ˜μ˜ λ°˜ν™˜ κ°’μ˜ νƒ€μž…μ„ 지정해쀄 수 μžˆλ‹€.

     

    const func = async(foo: object): Promise<object> => {
      try {
          const res = await fetch(url, options);
          return await res.json();
      } catch (err) {
      	  let errCode = {ok: false, data: err}
          return errCode;
      }
    };

     

    μœ„μ™€ 같은 async await 을 μ‚¬μš©ν•œ 비동기 ν•¨μˆ˜κ°€ μžˆλ‹€λ©΄ λ°˜ν™˜ κ°’μ˜ νƒ€μž…μœΌλ‘œ Promise<object> λ₯Ό μ‚¬μš©ν•˜μ—¬ νƒ€μž…μ„ 지정해쀄 수 μžˆλŠ”λ° 

    λ°˜ν™˜ κ°’μ˜ νƒ€μž…μ΄ 항상 같을 수 없을 λ•Œκ°€ μžˆλ‹€.

     

    const func = async(foo: object): Promise<object | boolean> => {
      try {
          const res = await fetch(url, options);
          return await res.json();
      } catch (err) {
          return false;
      }
    };

     

    μœ„μ˜ μ½”λ“œλŠ” λ°˜ν™˜ 값이 false일 λ•Œκ°€ 있고 객체일 λ•Œκ°€ μžˆλŠ”λ° 이런 경우 Promise<object | boolean> 으둜 objectμ΄κ±°λ‚˜ boolean 을 μ§€μ •ν•΄μ€ŒμœΌλ‘œμ¨ 두 가지 νƒ€μž…μ„ 지정해쀄 수 μžˆλ‹€.

     

     

     

    ν•˜μ§€λ§Œ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μ²˜λ¦¬ν•˜μ—¬ λ°˜ν™˜ν•˜λŠ” return κ°’κ³Ό μ„œλ²„μ—μ„œ λ°›μ•„μ˜¨ κ°’μ΄λ‚˜ λ‹€λ₯Έ μ™ΈλΆ€ ν•¨μˆ˜μ—μ„œ λ°›μ•„μ˜¨ 값을 return ν•˜λŠ” 경우 값이 μ—¬λŸ¬κ°œμΌ κ²½μš°κ°€ λ§Žμ•„μ§€λ©΄μ„œ ν•¨μˆ˜μ˜ λ°˜ν™˜ νƒ€μž…μ„ μ—¬λŸ¬κ°œ μ§€μ •ν•˜κ²Œ 되면 였λ₯˜κ°€ λ°œμƒν•˜κΈ° 쉽닀.

     

    μ‹€μ œλ‘œ μ—¬λŸ¬κ°œμ˜ νƒ€μž…μ„ μ§€μ •ν•΄μ£Όλ‹€λ³΄λ‹ˆκΉŒ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ 이 데이터λ₯Ό μ‚¬μš©ν•  λ•Œ, 데이터λ₯Ό 전달할 λ•Œ νƒ€μž… μ—λŸ¬κ°€ λΉˆλ²ˆν•˜κ²Œ μΌμ–΄λ‚˜μ„œ μ½”λ“œ μž‘μ„±μ΄ λ²ˆκ±°λ‘œμ›Œμ§μ„ 느꼈고, νƒ€μž…μ„ μ§€μ •ν•΄μ£Όμ—ˆμœΌλ‹ˆ 그에 λ§žμΆ”λ €κ³  μ–΅μ§€λ‘œ λ³€μˆ˜μ— λ‹΄κ±°λ‚˜, 객체둜 λ§Œλ“€κ±°λ‚˜ λ“±λ“± λΆˆν•„μš”ν•œ 데이터 λž˜ν•‘μ„ 맀번 ν•΄μ£Όμ–΄μ•Ό ν•˜λŠ” λΆˆνŽΈν•¨μ„ λŠκΌˆλ‹€. 아직 typescript μ‚¬μš©μ— μžˆμ–΄μ„œ λŠ₯μˆ™ν•˜μ§€ λͺ»ν–ˆκΈ° λ•Œλ¬Έμ΄λΌκ³  μƒκ°ν•œλ‹€.

     

     

    ν•΄κ²°ν•œ λ°©λ²•μœΌλ‘œλŠ” μ„œλ²„μ—μ„œ λ°˜ν™˜ν•˜λŠ” κ°’μ˜ νƒ€μž…κ³Ό ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λ°˜ν™˜ν•˜λŠ” νƒ€μž…μ„ interfaceλ₯Ό μ‚¬μš©ν•˜μ—¬ λ§žμΆ°μ£ΌλŠ” 방법을 μ‚¬μš©ν•˜μ˜€λ‹€.

     

    export interface OK {
      ok: boolean;
      data: any;
    }
    
    export const isOK = (data: string): OK => ({ ok: true, data });
    export const isNotOK = (data: string): OK => ({ ok: false, data });

     

    λ‚΄κ°€ μ§€μ •ν•œ interface OK 와 같이 μ„œλ²„μ—μ„œλ„ λŒλ €μ£ΌλŠ” 값이 OK와 같은 κ°μ²΄μž„μ„ μ•Œκ²Œλ˜μ—ˆκ³  이 점을 μ‘μš©ν•˜μ—¬ isOk와 isNotOk ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄ μ„±κ³΅ν•œ 데이터 값은 isOk ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜ data에 λ„£μ–΄ λ“€μ–΄μ˜€λŠ” 데이터 κ°’κ³Ό ok: trueλ₯Ό ν¬ν•¨ν•œ 객체λ₯Ό λ¦¬ν„΄ν•˜κ³  λ§ˆμ°¬κ°€μ§€λ‘œ μ—λŸ¬μΌ κ²½μš°μ—λŠ” isNotOk ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ 늘 객체λ₯Ό 리턴할 수 μžˆλ„λ‘ ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄μ£Όμ—ˆλ‹€.

     

    이 ν•¨μˆ˜μ˜ λ°˜ν™˜ νƒ€μž…μ€ intefface OK둜 μ§€μ •ν•˜μ˜€κΈ° λ•Œλ¬Έμ— μ„œλ²„μ™€ ν†΅μ‹ ν•˜λŠ” μ™ΈλΆ€ ν•¨μˆ˜λ“€λ„ 이 OK νƒ€μž…μ„ μž¬μ‚¬μš©ν•  수 있게 λ˜μ—ˆκ³  ν•¨μˆ˜μ˜ λ°˜ν™˜ νƒ€μž…μ„ μ—¬λŸ¬κ°œ 지정해주지 μ•Šμ„ 수 있게 λ˜μ—ˆλ‹€.

     

    λ˜ν•œ 이 isOk, isNotOk ν•¨μˆ˜λ₯Ό λͺ¨λ“ˆν™” ν•¨μœΌλ‘œμ¨ μ„œλ²„μ—μ„œ λ°˜ν™˜λ˜λŠ” κ°’, ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μ²˜λ¦¬ν•˜μ—¬ λ°˜ν™˜ν•˜λŠ” 값을 더 μ‰½κ²Œ μ˜ˆμƒν•  수 있게 λ˜μ–΄μ„œ λ””λ²„κΉ…ν•˜κΈ° μ‰¬μ›Œμ‘Œκ³ , μΌκ΄€μ„±μžˆλŠ” μ½”λ“œ μž‘μ„±μ΄ κ°€λŠ₯해지며 μ½”λ“œμ˜ 가독성도 μ’‹μ•„μ‘Œλ‹€.

     

     

     

     


     

     

    😜 λŠλ‚€ 점

     

    사싀 TypeScriptλ₯Ό κ³΅λΆ€ν•˜λ©΄μ„œ μœ„μ— λ‹€ μ μ§€λŠ” λͺ»ν–ˆμ§€λ§Œ Interfaceλ₯Ό μ™œ μ‚¬μš©ν•΄μ•Όν•˜λŠ”μ§€ 잘 λͺ°λžλŠ”데 쒋은 κ²½ν—˜μ„ ν•  수 μžˆμ—ˆλ‹€.

    interface λ₯Ό μ‚¬μš©ν•¨μœΌλ‘œμ¨ λŸ°νƒ€μž„ μ—λŸ¬λ₯Ό 막을 수 μžˆμ—ˆκ³ , λ‚΄κ°€ μ‹€μˆ˜λ‘œ λ‚Έ μ˜€νƒ€λ‚˜ λ‹€λ₯Έ κ°œλ°œμžκ°€ μž‘μ„±ν•œ μ½”λ“œλ₯Ό μˆ˜μ •ν•΄μ•Όν•  λ•Œ μ˜³λ°”λ₯Έ 값을 주고받을 수 μžˆλ‹€λŠ” 점이 μ’‹μ•˜λ‹€.

     

    ( TypeScriptλ₯Ό μ‚¬μš©ν•˜λ‹ˆκΉŒ λ­”κ°€ λ‚΄κ°€ μ½”λ“œλ₯Ό μ œμ–΄ν•˜λŠ” λŠλ‚Œ...? "λͺ¨λ“  μ½”λ“œμ˜ μ œμ–΄λŠ” λ‚΄κ°€ ν• ν…Œλ‹ˆ λ„ˆλŠ” λ‚˜λ₯Ό λ―Ώκ³  μ½”λ“œλ₯Ό μ‹€ν–‰μ‹œν‚€κΈ°λ§Œ ν•΄" 이런 κΈ°λΆ„....? )

    '개발' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

    TDD πŸ’Ž  (0) 2020.11.02
    πŸ€ useEffect VS useLayoutEffect πŸ€  (10) 2020.10.22
    Express  (0) 2020.06.25
    Cookie와 Session  (0) 2020.06.18
    Virtual DOM κ³Ό DOM  (0) 2020.05.26
Designed by Tistory.