<div id="readability-page-1" class="page"><div x-data="{ sidebar: false }">
        <main id="main">
          
          
                
          
  
    <div id="permalink">
      <header>
        
          <p><img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHiUOR%2FbtsiuCnlnan%2FGRkYwWKfSfz3WnebVlb0b0%2Fimg.png" alt=""></p>
        
        <div><p><a href="/category/Prog.%20Langs%20%26%20Tools/TypeScript">Prog. Langs &amp; Tools/TypeScript</a></p>
          <p><time>2023. 6. 4. 03:23</time><span>
              
            </span></p>
        </div>
      </header>
      <div>
        <article id="content" x-ref="content">
          <div x-data="content">
            <template x-if="$data.headings.length > 0">
                <div class="rounded-md p-5 mb-8 box-border bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200" id="TOC"><strong class="flex items-center justify-between text-overflow-hidden text-sm pb-2 mb-4 border-b border-solid border-h-400 dark:border-h-200"><span class="text-base">목차</span><i class="fas fa-bars"></i></strong>
                  <ol class="flex flex-col gap-y-3"><template x-for="heading in $data.headings" :key="heading.id">
                      <li :class="{ &quot;pl-0&quot;: heading.tagName === &quot;H2&quot;, &quot;pl-4&quot;: heading.tagName === &quot;H3&quot; }"><a class="flex items-center justify-between text-sm duration-200 text-h-400 hover:text-h-600 dark:hover:text-h-200" :href="heading.href">
                          <div class="text-overflow-hidden" x-text="heading.text"></div><i class="fas fa-arrow-right scale-75"></i>
                        </a></li>
                    </template></ol>
                </div>
              </template>
            
            <template x-if="$data.headings.length > 0">
                <div class="2xl:absolute 2xl:top-0 2xl:h-full 2xl:ml-[calc(((1100px+theme(spacing.pem))/2)+theme(spacing.5))]" id="scrollspy" x-data="scrollspy" @scroll.window="scrollspy" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="show">
                  <div class="2xl:sticky 2xl:top-20"><button class="fixed top-20 right-0 w-8 h-8 z-30 rounded-md bg-h-300 text-h-500 dark:bg-h-700 dark:text-h-200 2xl:hidden" x-show="! open" @click="toggle"><span class="text-[0]">목차</span><i class="fa-solid fa-list-check"></i></button>
                    <div class="w-56 text-sm box-border max-2xl:transition-[right] max-2xl:duration-200 max-2xl:rounded-xl max-2xl:p-6 max-2xl:pr-8 max-2xl:fixed max-2xl:top-20 max-2xl:right-4 max-2xl:z-40 max-2xl:bg-h-200 max-2xl:dark:bg-h-700 2xl:px-6 2xl:block" :class="open ? &quot;max-2xl:right-4&quot; : &quot;max-2xl:-right-60&quot;"><button class="absolute text-base top-2 right-4 text-h-500 dark:text-h-200 2xl:hidden" @click="toggle"><span class="text-[0]">목차 닫기</span><i class="fa-solid fa-xmark"></i></button>
                      <ul class="flex flex-col gap-y-3" x-ref="spy"><template x-for="heading in $data.headings" :key="heading.id">
                          <li class="text-h-400" :class="{ &quot;pl-0&quot;: heading.tagName === &quot;H2&quot;, &quot;pl-4&quot;: heading.tagName === &quot;H3&quot; }"><a class="duration-200 text-h-400 hover:text-h-600 dark:hover:text-h-200" :href="heading.href" x-text="heading.text" :class="{ &quot;text-h-600 dark:text-h-200&quot;: heading.active }"></a></li>
                        </template></ul>
                    </div>
                  </div>
                </div>
              </template>
          </div>
        </article>
        
      </div>
      <div x-show="shown" x-data="{ shown: false }" x-intersect.once="shown = true" id="entry487Comment">
            <form method="post" action="/comment/add/487" onsubmit="return false">
    
  <div><p><label for="text">댓글</label></p><div>
        
          
            <div>
              <p><label for="name">이름</label></p>
              <p><label for="password">암호</label></p>
            </div>
          
        
        <div x-data="{ secret: false }"><p><label id="secret-label" for="secret" @click="secret = ! secret"><span>비밀글</span><i :class="{ &quot;fa-lock&quot;: secret, &quot;fa-unlock&quot;: ! secret }"></i></label><a href="#" onclick="addComment(this, 487); return false;"><span>댓글쓰기</span><i></i></a></p></div>
      </div>
    </div>

</form>
            
              <div id="comments">
                <ol>
                              

            
                </ol>
              </div>
            
          </div>


    </div>
  
  
  

          
      
          
          
          
          
        </main>
        
        <div x-data="top" @scroll.window="toggle" x-show="open" x-transition:enter="transition ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
          <p><img @click="sidebar = ! sidebar" data-src="https://tistory1.daumcdn.net/tistory/2738522/attach/418608a299c6427e86eaf3e174103ec8" data-sizes="auto" alt="DevOwen" width="36" height="36"></p>
          <div>
            <p>TypeScript 5.0 버전 주요 변경사항 정리</p>
          </div>
          
        </div>
        <div id="bottom">
          <p><a href="#hELLO"><span>상단으로</span><i></i></a></p>
        </div>
      </div></div>

DevOwen

이 블로그 포스팅은 마이크로소프트 기술블로그에 나온 타입스크립트 5.0 버전 변경사항 글을 참고하여 작성했습니다.
 
데코레이터(Decorators)
데코레이터는 클래스와 클래스 요소(메서드, 프로퍼티 등)들을 재사용 가능한 방법으로 사용자 지정할 수 있도록 지원하는 곧 출시될 ECMA스크립트 기능이다.
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
const p = new Person("Ray");
p.greet();
greet 메서드는 간단하지만, 더 복잡해질 수 있다고 가정한다. 아마 비동기 로직이 있을 수도 있고, 재귀 로직이나 사이드 이펙트 등이 있을 수도 있다. 무엇으로 이루어 져 있든 간에, greet를 디버깅 하기 위해 콘솔 로그를 찍어본다.
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log("LOG: Entering method.");
        console.log(`Hello, my name is ${this.name}.`);
        console.log("LOG: Exiting method.")
    }
}
이 패턴은 꽤 일반적이다. 우리는 이런 식으로 모든 메서드에 할 수도 있다. 여기에서 데코레이터가 사용된다. loggedMethod 라는 메서드를 다음과 같이 함수로 만들어 볼 수 있다.
function loggedMethod(originalMethod: any, _context: any) {
    function replacementMethod(this: any, ...args: any[]) {
        console.log("LOG: Entering method.")
        const result = originalMethod.call(this, ...args);
        console.log("LOG: Exiting method.")
        return result;
    }
    return replacementMethod;
}
일단 여기에 any가 많은 것들은 신경쓰지 말고, 함수의 로직에 집중하자. loggedMethod는 원본 메서드인 originalMethod를 받아서 함수를 리턴하는데 이 함수는 다음 로직을 수행한다.
Entering... 메시지 출력
this와 모든 인자들(...args)을 원본 메서드(originalMethod)로 넘김
Exiting... 메시지 출력
원본 메서드 출력
이제 greet 메서드를 decorate 하기 위해 loggedMethod를 사용할 수 있다.
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    @loggedMethod
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
const p = new Person("Ray");
p.greet();
// Output:
//
//   LOG: Entering method.
//   Hello, my name is Ray.
//   LOG: Exiting method.
greet 메서드 위에 데코레이터 @loggedMethod를 사용했다. 이를 사용했을 때, target 메서드와 컨텍스트 객체와 함께 데코레이터가 호출된다. loggedMethod가 새로운 함수로 출력되었기 때문에, 이 함수는 원래 정의된 greet를 대체한다.
loggedMethod의 두 번째 인자는 컨텍스트 객체(context object)이다. 여기에는 데코레이터 메서드가 선언 되었을 때의 정보가 담겨져 있다. 예를 들면 private 멤버인지, 아니면 static 인지, 메서드의 이름이 어떤 것인지 등이 담겨져 있다. 이러한 내용들이 담기도록 loggedMethod를 다시 써보면 다음과 같다.
function loggedMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = String(context.name);
    function replacementMethod(this: any, ...args: any[]) {
        console.log(`LOG: Entering method '${methodName}'.`)
        const result = originalMethod.call(this, ...args);
        console.log(`LOG: Exiting method '${methodName}'.`)
        return result;
    }
    return replacementMethod;
}
타입을 더 엄격하게 가져간다. 타입스크립트는 ClassMethodDecoratorContext라는 타입을 제공하는데, 메서드 데코레이터가 가지는 컨텍스트 객체를 모델화했다.
또 다른 데코레이터인 bound를 살펴보자.
function bound(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = context.name;
    if (context.private) {
        throw new Error(`'bound' cannot decorate private properties like ${methodName as string}.`);
    }
    context.addInitializer(function () {
        this[methodName] = this[methodName].bind(this);
    });
}
addInitializer 메서드는 생성자의 시작에 후킹하는 방법이다. 다른 말로 static으로 동작하는 클래스 초기화를 의미한다. bound 데코레이터에 addInitializer를 사용해서 생성자 안에서 bind를 호출한다. 
bound 는 아무것도 반환하지 않는다. bound가 메서드를 감쌀 때 원본 그 자체를 남긴다. 대신, 다른 필드들이 초기화되기 전에 로직을 추가할 것이다.
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    @bound
    @loggedMethod
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
const p = new Person("Ray");
const greet = p.greet;
// Works!
greet();
두 개의 데코레이터를 쌓은 점을 주목하자. @bound와 @loggedMethod. 이런 데코레이터들은 반대 순서로 실행한다. 이 말은 @loggedMethod가 원본 메서드 greet를 데코레이트한다. 그 다음 @bound가 @loggedMethod의 결과를 데코레이트한다. 
 
const 타입 파라미터
객체의 타입을 추론할 때, 타입스크립트는 일반적으로 타입을 제너럴하게 선택한다. 예를 들어 아래의 경우 names의 추론 타입은 string[] 이다.
type HasNames = { names: readonly string[] };
function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
    return arg.names;
}
// Inferred type: string[]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"]});
일반적으로 이 의도는 라인 아래로 진행할수록 변화가 가능하게 하기 위해서이다. 그러나, 더 구체적인 타입을 필요로 할 때가 있다. 지금까지는 as const를 추가해서 원하는 방식으로 추론이 가능했다.
// The type we wanted:
//    readonly ["Alice", "Bob", "Eve"]
// The type we got:
//    string[]
const names1 = getNamesExactly({ names: ["Alice", "Bob", "Eve"]});
// Correctly gets what we wanted:
//    readonly ["Alice", "Bob", "Eve"]
const names2 = getNamesExactly({ names: ["Alice", "Bob", "Eve"]} as const);
이는 복잡하고 다루기가 힘들다. 타입스크립트 5.0에서는 const 수식어를 타입 파라미터 선언에 추가해서 const 스러운 타입 추론을 할 수 있게 되었다.
type HasNames = { names: readonly string[] };
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
//                       ^^^^^
    return arg.names;
}
// Inferred type: readonly ["Alice", "Bob", "Eve"]
// Note: Didn't need to write 'as const' here
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });
const 수식어는 변경 가능한 값들을 거부하지 않는다. 그리고 불변성 제약을 요구하지도 않는다. 변경 가능한 타입 제한은 놀라운 결과를 나타낼 것이다. 아래 코드를 보자.
declare function fnBad<const T extends string[]>(args: T): void;
// 'T' is still 'string[]' since 'readonly ["a", "b", "c"]' is not assignable to 'string[]'
fnBad(["a", "b" ,"c"]);
여기서, 추론된 후보 T는 readonly ["a", "b", "c"] 이다. 그리고 readonly 배열은 변경 가능한 것에서 사용될 수 없다. 이 경우, 추론은 제약으로 돌아오고 배열은 string[]으로 여겨진다. 그러면 호출은 성공적으로 나아간다. 
함수에 대한 더 나은 정의는 readonly string[] 를 사용해야 한다.
declare function fnGood<const T extends readonly string[]>(args: T): void;
// T is readonly ["a", "b", "c"]
fnGood(["a", "b" ,"c"]);