<div id="readability-page-1" class="page"><div id="entry-view">
        
        <main>
          <div>
              <article id="mainContent">
                <div>
                  <p><a href="/m/category"><span>카테고리 없음</span></a></p><h3>typescript의 optional property 꼭 사용하셔야겠습니까?</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2023. 3. 14. 16:00</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16">typescript의 optional property는 물론 매우 유용하게 쓰이는 경우가 많습니다</p>

<p data-ke-size="size16">마치 치트키처럼말이죠</p>

<p data-ke-size="size16">그런데 optional property는 사용하기가 매번 번거롭습니다</p>

<p data-ke-size="size16">undefined인지 아닌지 매번 검증하는 로직을 넣어줘야 하기 때문입니다</p>

<p data-ke-size="size16">optional 체이닝에서도 마찬가지로 주렁주렁 물음표를 달아주어야 합니다</p>

<p data-ke-size="size16">response.posts[0].user?.profile?.smallPic</p>


<p data-ke-size="size16">이런 interface가 있다고 가정해보죠</p>

<pre id="code_1678427799217" data-ke-language="typescript" data-ke-type="codeblock"><code>inteface Product {
  id: string;
  name: string;
  weight?: number;
}</code></pre>

<p data-ke-size="size16">상품중에서는 실물이 있는 상품인경우 무게를 표시하는 weight 프로퍼티가 있습니다</p>

<p data-ke-size="size16">하지만 상품중에는 실물이 없는 디지털 상품도 있습니다 소프트웨어 씨리얼키나 이런것 말이죠</p>

<p data-ke-size="size16">이런상황에서 가장 쉽게 설계하는 방법은 사용될지 안될지 모르는 애매모호한 필드들을 모두 optional로 만드는것입니다</p>

<p data-ke-size="size16">가장 빠르고 쉽게 선택할수 있는 지름길입니다</p>

<p data-ke-size="size16">그런데 종합쇼핑몰 급으로 취급하는 물건의 숫자가 많아진다면</p>

<p data-ke-size="size16">optional 필드한 한 50개쯤 생기게될거예요(캐럿, 용량, 열량 등등...)</p>


<p data-ke-size="size16">그럼 이런식으로 바꿔볼까요?</p>
<pre id="code_1678427989450" data-ke-language="typescript" data-ke-type="codeblock"><code>interface Product {
  id: string;
  name: string;
}

interface PyisicalProduct extends Product {
  weight: number;
}</code></pre>

<p data-ke-size="size16">optional 필드가 사라지면서 코드가 좀 더 명확하졌고 가독성도 높아졌습니다</p>

<p data-ke-size="size16">우리에겐 항상 더 좋은 방법이 있군요</p>
            
            
                </div>
            

                
              </article>
              
                
              
              
              
              
              
                
              
            </div>
        </main>
        
      </div></div>

나를 찾는 아이

Kyoung min, Kim

typescript의 optional property는 물론 매우 유용하게 쓰이는 경우가 많습니다
 
마치 치트키처럼말이죠
 
그런데 optional property는 사용하기가 매번 번거롭습니다
 
undefined인지 아닌지 매번 검증하는 로직을 넣어줘야 하기 때문입니다
 
optional 체이닝에서도 마찬가지로 주렁주렁 물음표를 달아주어야 합니다
 
response.posts[0].user?.profile?.smallPic
 
 
이런 interface가 있다고 가정해보죠
 
inteface Product {
  id: string;
  name: string;
  weight?: number;
}
 
상품중에서는 실물이 있는 상품인경우 무게를 표시하는 weight 프로퍼티가 있습니다
 
하지만 상품중에는 실물이 없는 디지털 상품도 있습니다 소프트웨어 씨리얼키나 이런것 말이죠
 
이런상황에서 가장 쉽게 설계하는 방법은 사용될지 안될지 모르는 애매모호한 필드들을 모두 optional로 만드는것입니다
 
가장 빠르고 쉽게 선택할수 있는 지름길입니다
 
그런데 종합쇼핑몰 급으로 취급하는 물건의 숫자가 많아진다면
 
optional 필드한 한 50개쯤 생기게될거예요(캐럿, 용량, 열량 등등...)
 
 
그럼 이런식으로 바꿔볼까요?
interface Product {
  id: string;
  name: string;
}
interface PyisicalProduct extends Product {
  weight: number;
}
 
optional 필드가 사라지면서 코드가 좀 더 명확하졌고 가독성도 높아졌습니다
 
우리에겐 항상 더 좋은 방법이 있군요

typescript의 optional property 꼭 사용하셔야겠습니까?

댓글