Decorators

sangjuneeeee·2024년 5월 6일

TypeScript

목록 보기
7/9

최신 웹 개발 트렌드는 리액트에서 함수형 컴포넌트의 사용을 적극 권장하고 있다. 이에 따라, 과거 클래스 컴포넌트에서 널리 사용되던 데코레이터의 사용 빈도가 점점 감소하고 있다. 함수형 컴포넌트는 훅(Hook)을 통해 상태 관리, 사이드 이펙트 처리 등을 할 수 있으므로, 데코레이터를 사용할 필요성이 크게 줄어들었다.

Use Decorator

디렉토리에 tsconfig.json가 없다면 $ tsc --init

```tsconfig.json
{
	"compilerOptions": {
	"target": "ES2020", 

	"experimentalDecorators": true    // Add this code

		...
	},
	...
}

typescript 5.0 이상부터 Decorator를 기본적으로 지원하지만 아직 실험적이므로 코드 추가 해야 함
Decorator는 ES10이상 지원하는 브라우저에서만 사용 가능 함

Class Decorator

function Logger(target: Function) {
  console.log("Logging...");
  console.log(target);
}

@Logger
class Person {
  name: string = "Max";

  constructor() {
    console.log("Creating person object");
  }
}

const pers = new Person();

// Logging...
// [class Person]
// Creating person object

추후 학습 후 추가 예정

profile
지식 쌓아두기 블로그

0개의 댓글