타입스크립트의 클래스클래스 정의const employee = { name: "Jung", age: 25, position: "developer", work() { console.log("일함"); },};위 객체와 같은 형태의 클래스를 정의한다고 해보자. 먼저 클래스의 필드인 name, age, position을 선언한다.class Employee { // 필드 name; age; position;}위와 같이 필드를 정의하면, 함수의 매개변수와 동일하게 암묵적 any 타입으로 추론되며 strict 옵션이 true로 설정되어 있을경우 오류가 발생하게 된다. 따라서 필드 선언 시 타입을 함께 정의해주어야 한다.class Employee { // 필드 name: string; age..

클래스 상속과 생성자 함수 상속상속에 의한 클래스 확장은 프로토타입 기반 상속과는 다른 개념이다. 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다.클래스와 생성자 함수는 인스턴스를 생성할 수 있는 함수라는 점에서 유사하지만, 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 제공되는 반면, 생성자 함수는 그렇지 않다.예를 들어, 동물을 추상화한 Animal 클래스와 새와 사자를 추상화한 Bird, Lion 클래스를 각각 정의한다고 해보자. 새와 사자는 동물에 속하므로 동물의 속성을 갖되, 각자 자신만의 고유한 속성도 갖는다. 이때 Animal 클래스는 동물의 속성을 표..

인스턴스 프로퍼티인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다.class Person { constructor(name) { // 인스턴스 프로퍼티 this.name = name; }}const me = new Person('Jung');console.log(me); // Person {name: "Jung"}constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 클래스가 암묵적으로 생성한 인스턴스인 빈 객체가 바인딩되어 있다.생성자 함수에서 생성자 함수가 생성할 인스턴스의 프로퍼티를 정의하는 것과 마찬가지로, constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다. 이로써 클래스가 암묵적으로 생성한 빈 객체인 인스턴..

클래스 몸체에 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.constructorconstructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. constructor의 이름은 변경할 수 없다.class Person { constructor(name) { this.name = name; // 인스턴스 생성 및 초기화 }}개발자 도구의 콘솔에서 console.dir을 통해 클래스의 내부를 살펴보면 아래와 같다.클래스는 평가되어 함수 객체가 되므로, 클래스도 함수 객체 고유의 프로퍼티를 모두 갖고 있다. 함수와 동일하게 프로토타입과 연결되어 있고, 자신의 스코프 체인을 구성한다. 모든 함수 객체가 가지고 있는 prototype ..

클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어로, 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.var Person = (function () { function Person(name) { this.name = name; } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; return Person();}());var me = new Person('Jung');me.sayHi(); // Hi! My Name is Jung하지만 클래스 기반 언..

클로저의 활용클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 즉, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.카운터 예제함수가 호출될 때마다 호출된 횟수를 누적하여 출력하는 카운터 예제를 살펴보자. 해당 예제에서 안전하게 변경하고 유지해야 할 상태는 호출된 횟수(num 변수)가 된다.상태를 전역 변수로 관리let num = 0;const increase = function () { return ++num;};console.log(increase()); // 1console.log(increase()); // 2console.log(increase()); // 3위 코드는 정상적으로 작동하지만, 카운트 상태가 전역 변수를 통..

클로저란?클로저는 자바스크립트 고유의 개념이 아닌 함수형 프로그래밍 언어(ex. 하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 특성이다. 따라서 클로저에 대한 정의가 ECMAScript 사양에는 등장하지 않으며, MDN에서 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared'클로저는 함수와 그 함수가 정의된 렉시컬 환경과의 조합이다'라는 의미인데, 예제를 통해 알아가보자.const x = 1;function outerFunc() { const x = 10; function innerFunc() { console...

인터페이스란?인터페이스란 상호 간에 약속된 규칙을 의미하며, 타입 별칭과 동일하게 타입의 이름을 지어주는 문법이다. 아래와 같이 타입 별칭과 인터페이스는 매우 유사하게 생겼다. 다만, 타입 별칭과 다르게 인터페이스는 객체의 구조를 정의하는데 특화된 문법으로, 상속, 합침 등의 특수한 기능을 제공한다. 선택적 프로퍼티와 읽기 전용 프로퍼티인터페이스에서도 타입 별칭과 같은 방법으로 선택적 프로퍼티와 읽기 전용 프로퍼티를 정의할 수 있다.interface Person { readonly name: string; age?: number;}const person: Person = { name: "은경",};person.name = "길동" // ❌메서드 타입 정의하기메서드의 타입을 정의할 때는 함수 타입 ..

함수 타입함수 타입을 정의한다는 것은 어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는 지를 정의하는 것이다. 타입스크립트에서 일반적인 함수 선언문의 타입을 정의하는 방법은 아래와 같다.function func(a: number, b: number): number { return a + b;}타입스크립트는 반환문을 기준으로 반환값의 타입을 자동 추론할 수 있기 때문에 반환값 타입을 생략할 수 있다.function func(a: number, b: number) { return a + b;} 화살표 함수 타입 정의화살표 함수의 타입을 정의하는 방법은 아래와 같다. 마찬가지로 반환값의 타입은 자동으로 추론 가능하다.const func = (a: number, b: number): number ..

서로소 유니온 타입서로소 유니온 타입이란?서로소 유니온 타입은 교집합이 없는 타입들로만 만든 유니온 타입을 의미한다. 예를 들어 string과 number 타입으로 유니온 타입을 만들면, 이는 서로소 유니온 타입이 된다.type A = { tag: "A";}type B = { tag: "B";}type Union = A | B; // 서로소 유니온 타입객체 타입도 마찬가지로 A 타입이면서 B 타입인 객체는 절대 있을 수 없으므로, A와 B는 서로 교집합이 없는 타입이고, 따라서 A와 B 타입으로 만든 Union 타입은 서로소 유니온 타입이 된다. 예제1 - 회원 관리 프로그램type Admin = { name: string; kickCount: number;};type Member = { nam..