TypeScript 5.0 살펴보기

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
 
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
 
const p = new Person('Ron');
p.greet(); // Hello, my name is Ron.

function loggedMethod(headMessage = 'LOG:') {
  return function actualDecorator(
    originalMethod: any, // 데코레이터를 사용한 함수
    context: ClassMethodDecoratorContext, // 데코레이터를 사용하는 컨텍스트 객체의 데이터 및 함수가 있다(private, static 여부, 메서드 이름 등).
  ) {
    const methodName = String(context.name);
 
    function replacementMethod(this: any, ...args: any[]) {
      console.log(`${headMessage} Entering method '${methodName}'.`);
      const result = originalMethod.call(this, ...args); // 데코레이터를 사용하는 함수가 여기서 실행된다.
      console.log(`${headMessage} Exiting method '${methodName}'.`);
      return result; // 데코레이터 체이닝을 위해 존재한다.
    }
 
    return replacementMethod;
  };
}
 
class Person {
  // ...
  @loggedMethod('[Name]')
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
 
const p = new Person('Ron');
p.greet();
/**
 * [Name] Entering method 'greet'.
 * Hello, my name is Ron.
 * [Name] Exiting method 'greet'.
 **/

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
    // 오직 CASE 1. 에만 사용되는 줄
    this.greet = this.greet.bind(this);
  }
 
  // CASE 1.
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
  // CASE 2.
  // greet: () => {
  //   console.log(`Hello, my name is ${this.name}.`);
  // }
  // CASE 3. 생성자에서 this.greet.bind(this)를 하지 않은 경우
  // greet() {
  //   console.log(`Hello, my name is ${this.name}.`);
  // }
}
 
const greet = new Person('Ron').greet;
greet(); // CASE 1,2 는 정상적으로 동작하지만 3은 this가 글로벌로 바뀌기 때문에 name이 undefined 에러가 발생한다.

function bound(originalMethod: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);
  if (context.private) {
    // private 함수는 bind 하지 않는다는 예제
    throw new Error(
      `'bound' cannot decorate private properties like ${methodName}.`,
    );
  }
  context.addInitializer(function (this: any) {
    // 생성자에서 this를 바인드 하게 된다.
    this[methodName] = this[methodName].bind(this);
  });
}
 
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
 
  // It Same: @bound @loggedMethod('[Name]') greet() { ... }
  @bound
  @loggedMethod('[Name]')
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
const greet = new Person('Ron').greet;
greet(); // It works!
/**
 * [Name] Entering method 'greet'.
 * Hello, my name is Ron.
 * [Name] Exiting method 'greet'.
 **/

// allowed
@register
export default class Foo {
  // ...
}
 
// also allowed
export default
@register
class Bar {
  // ...
}
 
// error - before *and* after is not allowed
@before
@after
export class Bar {
  // ...
}

type HasNames = { names: readonly string[] };
// 우리는 아래 함수를 통해 불변 문자열 배열 타입을 얻고자 한다.
function getNamesExactly<T extends HasNames>(arg: T): T['names'] {
  return arg.names;
}
// 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);

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 inputNames = ['Alice', 'Bob', 'Eve'];
 
// Inferred type: ["Alice", "Bob", "Eve"]
// readonly 내놔!!!
const names = getNamesExactly({ names: inputNames });

// packages/front-end/src/tsconfig.json
{
  "extends": ["@tsconfig/strictest/tsconfig.json", "../../../tsconfig.base.json"],
  "compilerOptions": {
      "outDir": "../lib",
      // ...
  }
}

// enum Color는 Red | Orange | Yellow | Green | Blue | Violet의 union 타입이다.
enum Color {
  Red,
  Orange,
  Yellow,
  Green,
  Blue,
  Violet,
}
 
// enum 멤버는 참조할 수 있는 자체 유형이 있으므로 값처럼 사용될 수 있다.
type PrimaryColor = Color.Red | Color.Green | Color.Blue;

enum E {
  three = 3,
  four = 4,
}
function takeValue(num: E) {}
 
// v4.9.5 =====================================
const a: E = 55; // It works!
const b: E.three = 4444; // It works!
takeValue(6); // It works!
 
enum Color {
  random = Math.random(),
  two = 2,
}
// Error! Enum type 'Color' has members with initializers that are not literals.(2535)
const c: Color.random = 5;
 
// v5.0.3 =====================================
const a: E = 55; // Error! Type '55' is not assignable to type 'E'.(2322)
const b: E.three = 4444; // Error! Type '4444' is not assignable to type 'E.three'.(2322)
takeValue(6); // Error! Argument of type '6' is not assignable to parameter of type 'E'.(2345)
 
enum Color {
  random = Math.random(),
  two = 2,
}
// It works!
const c: Color.random = 5; // number

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler"
  }
}

// models/vehicles.ts
export class Spaceship {
  // ...
}
 
// It works!
// models/index.ts
export type * as vehicles from './vehicles';
 
// main.ts
import { vehicles } from './models';
 
function takeASpaceship(s: vehicles.Spaceship) {
  //  ok - `vehicles` only used in a type position
}
 
function makeASpaceship() {
  return new vehicles.Spaceship();
  //         ^^^^^^^^
  // 'vehicles' cannot be used as a value because it was exported using 'export type'.
}

// 기존에는 이와 같이 함수를 계속해서 확장해 나가야 했다.
// Our overloads:
function printValue(str: string): void;
function printValue(num: number, maxFractionDigits?: number): void;
 
// 이제 아래와 같이 @overload 태그를 사용해 오버로드를 선언할 수 있다
/**
 * @overload
 * @param {string} value
 * @return {void}
 */
/**
 * @overload
 * @param {number} value
 * @param {number} [maximumFractionDigits]
 * @return {void}
 */
/**
 * @param {string | number} value
 * @param {number} [maximumFractionDigits]
 */
function printValue(value, maximumFractionDigits) { ... }
 
// all allowed
printValue("hello!");
printValue(123.45);
printValue(123.45, 2);
 
printValue("hello!", 123); // error!

function func(ns: number | string) {
  return ns * 4; // Error, possible implicit coercion
}
function func(ns: number | string) {
  return ns > 4; // Now also an error. number | string 타입은 비교할수 없다(string은 비교 불가능).
}

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

enum SomeEvenDigit {
  Zero = 0,
  Two = 2,
  Four = 4,
}
 
// Now correctly an error
let m: SomeEvenDigit = 1;
 
// =====
enum Letters {
  A = 'a',
}
enum Numbers {
  one = 1,
  two = Letters.A, // enum의 참조가 있을 경우 number 타입으로 됨
}
 
// Now correctly an error
const t: number = Numbers.two;
const t2: string = Numbers.two; // 5.0 이전에는 여기서 에러가 발생함(-_-)