🍑 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이 맞는지 확인하려면 배열인지 여부를 확인..

Project Drag & Drop 1️⃣ ! & as TypeScript에서 DOM 조작할 때 오류 해결하기 class ProjectInput { templateElement: HTMLTemplateElement; hostElement: HTMLDivElement; constructor() { this.templateElement = document.getElementById( 'project-input' )! as HTMLTemplateElement; this.hostElement = document.getElementById('app')! as HTMLDivElement; } } document.getElementById('id');에서 !를 추가하는 이유는 TypeScript가 이것이 null일수..

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..

Generics 2️⃣ Keyof Constraint 제네릭으로 객체에 대한 제약 조건을 줄 때, 키 값을 필요로 한다면 keyof를 사용한 제약 조건을 쓰면 실수를 방지할 수 있다. function extractAndConvert( obj: T, key: U ) { return 'Value: ' + obj[key]; } extractAndConvert({}, 'name'); // Error occurred 제네릭 T의 제약 조건으로 object를 설정해주었고, U의 제약 조건으로 T의 key를 설정해주었다. extractAndConvert로 빈 객체({})와 name이라는 문자열을 전달했을 때, 빈 객체에는 name이라는 키 값이 없기 때문에 컴파일 오류가 난다! 제네릭으로 U extends keyof..

Generics 1️⃣ What is Generics? 제네릭은 vanilla JavaScript에는 없고 TypeScript에만 있는 개념으로, 특정 타입의 데이터를 저장하여 타입 안전성을 확보할 수 있는 기법이다. TypeScript에서 기본적으로 제공하는 제네릭 타입으로는 Array, Promise가 있다. // Array const names: Array = []; /* Array에 대한 타입을 string으로 지정하면(= Generic) 앞으로 names 배열에 들어올 데이터의 타입이 string임을 추론함 */ // Promise const promise: Promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(10); ..