ECMAScript | TypeScript 23

ECMAScript, Function.prototype의 bind 함수(this 지정, 커링)

Function에 구현되어 있는 bind 함수는 두 가지 용도로 사용할 수 있다. 1) 함수의 수신자 객체 지정 (이펙티브 자바스크립트 아이템 25)this는 자바스크립트에서의 기묘한 개념 중 하나다. 흔히 접하는 언어들과 달리 자바스크립트의 Scope는 코드 블록( {}로 구분되는 )이 아닌 '객체' 단위다. 때문에 아래와 같은 이상한 현상이 발생한다.let buffer = { entries: [], add: function(s) { this.entries.push(s); } }; buffer.add(100); // 100 추가 console.log(buffer.entries); // [100] (function () { this.entries = []; let x = buffer.add; x(300)..

Typescript의 Decorator - 2. Property Decorator, 간단한 Dependency Injection

클래스의 프로퍼티에도 데코레이터를 사용할 수 있다. 먼저 예제에 사용할 간단한 클래스를 정의한다.class Car { private name: string; private price: number; private type: string; constructor(name: string, price: number) { this.name = name; this.price = price; } public toString() { return `${this.name}, ${this.type}, ${this.price}`; } } 또, 객체를 주입할 때 사용할 간단한 컨테이너를 정의하고 객체를 넣어둔다.class Container { private static map: {[key: string]: any} = {}; ..

Typescript의 Decorator - 1. Class Decorator

타입스크립트의 데코레이터는 자바에서의 어노테이션과 유사하게 메타데이터를 지정할 수 있다. 하지만 인터페이스로써 메타데이터만을 저장하는 자바와 달리 ES6의 데코레이터는 메소드나 프로퍼티를 직접 변경할 수 있다. 더 정확히 말하자면, TypeScript의 데코레이터는 파이썬의 데코레이터와 마찬가지로, 함수를 파라미터로 받는 함수를 쉽게 선언하는 일종의 Sugar Syntax다.또, 어노테이션이 붙은 모든 클래스나 메소드, 프로퍼티를 찾을 수 있는 자바 리플렉션과 달리 TypeScript의 'reflect-metadata'에는 그런 기능이 없는 것으로 보인다. Angular의 app.module.ts 파일에 컴포넌트 클래스명을 직접 입력해야 하는 이유가 이것 때문이 아닐까 하는 추측을 해본다(추측만). 몇 ..