TS - 5.0 New features

Decorators

실험적인 기능으로 제공되었었지만, ECMAScript (Stage 3) 스펙에 맞게 업데이트 됨

 

개념

class, method, accessor, property, parameter에 함수를 붙여 기능을 확장하는 함수

 

차이점

decorator 함수를 만들 때 기존과 다른 파라미터를 넘겨 받는다.

5.0으로 마이그레이션을 해야한다면 꼭 유의해야 한다. nestjs에서 TS 5.0을 지원하는지 확인해야겠죠?

// v4.9.5
function loggedMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor){
  console.log("target: ", target);
  console.log("propertyKey: ", propertyKey)
  console.log("descriptor: ", descriptor)
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`LOG: Entering method '${propertyKey}'.`)
    const result = originalMethod.call(this, ...args);
    console.log(`LOG: Exiting method '${propertyKey}'.`)  
  }

  return descriptor
}

// typescript v5.1.3
function loggedMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
  console.log("originalMethod: ", originalMethod);
  console.log("context: ", context)
    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;
}


class Person {
  name: string; 
  constructor(name: string) {
    this.name = name;
  }

  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const chuck = new Person("Chuck")

chuck.greet()

 

 

Computed Enum

v5.0.0 이전 버전에서는 string 값과 number타입을 동일한 enum의 값으로 설정할 수 없었다.

하지만 이후 버전에서는 가능하다.

function bar(n: number) {
  return n * n;
}
enum E {
  A = 10 * 10, //v4.9.5 > Computed values are not permitted in an enum with string valued members.(2553)
  B = 'foo', 
  C = bar(42), //v4.9.5 > Computed values are not permitted in an enum with string valued members.(2553)
}

 

Enum Overhaul

v5.0.0 이전 버전에서는 enum에 오염된 값이 들어갈 수 있는 위험성이 있었다. 

// ts 4.9.5
enum Grade {
  A = 90,
  B = 80
}

const a: Grade = 100
console.log(a) //100

// v5.1.3
enum Grade {
  A = 90,
  B = 80
}

const a: Grade = 100 // Type '100' is not assignable to type 'Grade'.(2322)
console.log(a)

 

Forbidden Implicit Coercions in Relational Operators (관계 연산자에서 금지된 암묵적 강제)

v5.0 부터 암묵적인 타입 강제를 금지합니다.

// v4.9.5
function func(ns: number | string) {
  return ns > 4; // OK
}

console.log(func('3')) // false

// v5.1.3
function func(ns: number | string) {
  return ns > 4; // Operator '>' cannot be applied to types 'string | number' and 'number'.(2365)
}

console.log(func('3'))

 

 

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#decorators

Documentation - TypeScript 5.0