🍑 Drag & Drop 2️⃣ Tuple is an array tuple은 JavaScript에는 없고 TypeScript에만 있는 타입이다. 따라서 특정 변수를 tuple 타입으로 지정했을 때, 아래와 같은 방법으로 tuple 타입임을 확인할 수 없다. const engineer: [string, string, string] = ['Apeach', 'Ogu', 'Choonsik']; engineer instanceof Tuple; // ❌ typeof engineer === 'tuple'; // ❌ (false) But tuple은 TypeScript에만 존재하는 타입이지만 JavaScript로 생각해봤을 때 결국은 배열이다. 그러므로 선언한 변수가 tuple이 맞는지 확인하려면 배열인지 여부를 확인..

Decorators 3️⃣ Validation decorator 프로퍼티 데코레이터 예시 class Course { title: string; price: number; constructor(t: string, p: number) { this.title = t; this.price = p; } } const courseForm = document.querySelector('form')!; courseForm.addEventListener('submit', event => { event.preventDefault(); const titleEl = document.getElementById('title') as HTMLInputElement; const priceEl = document.getElementB..

Decorators 2️⃣ Decorator the synthetic sugar 클래스 데코레이터는 constructor를 반환하면서 기존 constructor를 확장할 수 있다. constructor를 확장할 때 super();는 기존 클래스 확장에서와 마찬가지로 기존 클래스의 정보를 기억하고 싶을 때 사용하면 된다. function ClassDeco() { return function(target: T) { return class extends target { constructor(..._: any[]) { super(); // not necessary /* write your code */ } } } } @ClassDeco class Person { name = 'Shou'; get name() {..

Decorators 1️⃣ What is Decorators? 클래스, 프로퍼티, 액세서, 메소드, 파라미터에 첨부할 수 있는 특별한 함수이다. 데코레이터가 붙은 클래스 등등 에서는 데코레이터에서 정의된 기능이 동작한다. 정의한 데코레이터 함수를 @ 기호를 붙여 실행할 수 있다. function ClassDeco(constructor: Function) { console.log('Logging...'); console.log(constructor); } @ClassDeco class Person { name = 'Shou'; constructor() { console.log('Creating person object...'); } } /* Logging... class Person { constructo..