<div id="readability-page-1" class="page"><div id="entry-view">
            
            <main>
                <div>
                        <article id="mainContent">
                            <div>
                                <p><a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D"><span>WEB2.0/프로그래밍</span></a></p><h3>리팩터링 내성을 키우는 lint, explicit-function-return-type</h3>
                            </div>
                            <p><cite>나를찾는아이</cite>
                                <span> 2024. 3. 12. 19:57</span>
                            </p>
                            
                    
        

        

            <div><p data-ke-size="size16"><a href="https://typescript-eslint.io/rules/explicit-function-return-type/" target="_blank" rel="noopener&nbsp;noreferrer">https://typescript-eslint.io/rules/explicit-function-return-type/</a></p>
<figure id="og_1709891350782" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="explicit-function-return-type | typescript-eslint" data-og-description="Require explicit return types on functions and class methods." data-og-host="typescript-eslint.io" data-og-source-url="https://typescript-eslint.io/rules/explicit-function-return-type/" data-og-url="https://typescript-eslint.io/rules/explicit-function-return-type" data-og-image="https://scrap.kakaocdn.net/dn/bdcYgm/hyVutGksnC/NXU64HMlMhK832axUtj2Gk/img.png?width=400&amp;height=200&amp;face=0_0_400_200,https://scrap.kakaocdn.net/dn/cqX0pQ/hyVulhb5pe/k5ixkdCCYZF0ccQ7v3aRS1/img.png?width=400&amp;height=200&amp;face=0_0_400_200"><a href="https://typescript-eslint.io/rules/explicit-function-return-type/" target="_blank" rel="noopener" data-source-url="https://typescript-eslint.io/rules/explicit-function-return-type/">

<div>
<p data-ke-size="size16">explicit-function-return-type | typescript-eslint</p>
<p data-ke-size="size16">Require explicit return types on functions and class methods.</p>
<p data-ke-size="size16">typescript-eslint.io</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bdcYgm/hyVutGksnC/NXU64HMlMhK832axUtj2Gk/img.png?width=400&amp;height=200&amp;face=0_0_400_200,https://scrap.kakaocdn.net/dn/cqX0pQ/hyVulhb5pe/k5ixkdCCYZF0ccQ7v3aRS1/img.png?width=400&amp;height=200&amp;face=0_0_400_200"></figure>


<p data-ke-size="size16">해당 lint는 다음과 같은 케이스에서 모두 오류, 경고를 발생합니다</p>

<pre id="code_1709891443207" data-ke-language="typescript" data-ke-type="codeblock"><code>// 함수에서도 void를 선언해야함
function test() {
  return;
}

// 변수에 할당하는 함수에도 number를 선언해야함
var fn = function () {
  return 1;
};

// 애로우펑션에서도 string을 선언해야함
var arrowFn = () =&gt; 'test';

class Test {
  // 클래스 메서드에서도 void를 선언해야함
  method() {
    return;
  }
}</code></pre>


<p data-ke-size="size16">그야말로 모든 함수를 정의하는 곳에서는 리턴타입을 반드시 명시해야합니다</p>


<p data-ke-size="size16">왜 그래야할까요?</p>

<p data-ke-size="size16">typescript는 암묵적으로 리턴타입을 똑똑하게 계산합니다</p>

<p data-ke-size="size16">그래서 귀찮다는 이유로 리턴타입을 적지 않는 경우가 종종 있습니다</p>

<p data-ke-size="size16">하지만 리턴타입이 없다면 함수 내부 로직이 변경되었을때 리턴타입이 함께 변경되는 문제가 발생합니다</p>

<pre id="code_1709891621775" data-ke-language="typescript" data-ke-type="codeblock"><code>// number를 리턴함
function getRandomInt(max: number) {
  return Math.floor(Math.random() * max);
}</code></pre>


<p data-ke-size="size16">number를 리턴하는 함수를 만들었습니다 암묵적으로 number 타입이 리턴되는것을 typescript는 눈치챌수 있습니다</p>


<pre id="code_1709891663073" data-ke-language="typescript" data-ke-type="codeblock"><code>// number | null 을 리턴함
function getRandomInt(max: number) {
  if (max &lt; 0) {
    return null;
  }
  
  return Math.floor(Math.random() * max);
}</code></pre>

<p data-ke-size="size16">함수 내부의 로직이 변경되었습니다</p>

<p data-ke-size="size16">함수 내부의 로직이 변경되었을 뿐인데 의도하였든 의도하지 않았든 리턴타입이 변경되어서</p>

<p data-ke-size="size16">해당 함수를 사용하는 다른 모든 함수들이 null의 위험에 노출되었습니다</p>


<p data-ke-size="size16">해당 코드의 테스트코드도 작성되었다면 테스트코드도 불안정해졌습니다</p>


<p data-ke-size="size16">이는 리팩터링 내성을 해칩니다</p>

<p data-ke-size="size16">우리는 리팩터링을 할때 우리가 안전하게 리팩터링을 했다는 것은 input, output이 같다는 테스트를 통해서 증명합니다</p>

<p data-ke-size="size16">하지만 로직이 변경되었는데 output이 변경되었다는 것은 리팩터링이 아니라 변경을 시도했다는 것이고,</p>

<p data-ke-size="size16">이는 다른 불안한 요소를 불러오게 됩니다</p>


<p data-ke-size="size16">더 복잡한 함수의 경우 본인 스스로도 리턴타입을 바꾸었는지 눈치채지 못할수도 있습니다</p>

<p data-ke-size="size16">만약 리턴타입이 명시적이었다면 본인이 함수 내부를 수정했을때 리턴타입이 달라진 경우 컴파일단에서라도 에러를 만났을것입니다</p>


<p data-ke-size="size16">lint를 통해서 이 규약을 지킬수 있게 도와줍니다</p>
</div>
                    
        

        



<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-VHBugUKpJ1qm98uW"></ins>




                            
                        </article>
                        
                            
                        
                        
                        
                        
                        
                            
                        

                        
                        

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

나를 찾는 아이

Kyoung min, Kim

https://typescript-eslint.io/rules/explicit-function-return-type/
 
 
해당 lint는 다음과 같은 케이스에서 모두 오류, 경고를 발생합니다
 
// 함수에서도 void를 선언해야함
function test() {
  return;
}
// 변수에 할당하는 함수에도 number를 선언해야함
var fn = function () {
  return 1;
};
// 애로우펑션에서도 string을 선언해야함
var arrowFn = () => 'test';
class Test {
  // 클래스 메서드에서도 void를 선언해야함
  method() {
    return;
  }
}
 
 
그야말로 모든 함수를 정의하는 곳에서는 리턴타입을 반드시 명시해야합니다
 
 
왜 그래야할까요?
 
typescript는 암묵적으로 리턴타입을 똑똑하게 계산합니다
 
그래서 귀찮다는 이유로 리턴타입을 적지 않는 경우가 종종 있습니다
 
하지만 리턴타입이 없다면 함수 내부 로직이 변경되었을때 리턴타입이 함께 변경되는 문제가 발생합니다
 
// number를 리턴함
function getRandomInt(max: number) {
  return Math.floor(Math.random() * max);
}
 
 
number를 리턴하는 함수를 만들었습니다 암묵적으로 number 타입이 리턴되는것을 typescript는 눈치챌수 있습니다
 
 
// number | null 을 리턴함
function getRandomInt(max: number) {
  if (max < 0) {
    return null;
  }
  
  return Math.floor(Math.random() * max);
}
 
함수 내부의 로직이 변경되었습니다
 
함수 내부의 로직이 변경되었을 뿐인데 의도하였든 의도하지 않았든 리턴타입이 변경되어서
 
해당 함수를 사용하는 다른 모든 함수들이 null의 위험에 노출되었습니다
 
 
해당 코드의 테스트코드도 작성되었다면 테스트코드도 불안정해졌습니다
 
 
이는 리팩터링 내성을 해칩니다
 
우리는 리팩터링을 할때 우리가 안전하게 리팩터링을 했다는 것은 input, output이 같다는 테스트를 통해서 증명합니다
 
하지만 로직이 변경되었는데 output이 변경되었다는 것은 리팩터링이 아니라 변경을 시도했다는 것이고,
 
이는 다른 불안한 요소를 불러오게 됩니다
 
 
더 복잡한 함수의 경우 본인 스스로도 리턴타입을 바꾸었는지 눈치채지 못할수도 있습니다
 
만약 리턴타입이 명시적이었다면 본인이 함수 내부를 수정했을때 리턴타입이 달라진 경우 컴파일단에서라도 에러를 만났을것입니다
 
 
lint를 통해서 이 규약을 지킬수 있게 도와줍니다

리팩터링 내성을 키우는 lint, explicit-function-return-type

댓글