전체 글
TS032. 타입스크립트의 Visibility 키워드들
Visibility Keyword 자바스크립트엔 없고 타입스크립트에만 존재하는 개념이다. public: (기본값) 어디서든 접근 가능 protected: 현재 클래스 및 하위 클래스에서 접근 가능 private: 현재 클래스 내에서 접근 가능 class Class { public property1 = 1; protected property2 = 2; private property3 = 3; #property4 = 4; // 자바스크립트에서 지원하는 private property // 클래스 내부 메서드 접근 테스트 method() { this.property1; // 접근 가능 this.property2; // 접근 가능 this.property3; // 접근 가능 this.#property4; // 접..
TS031. 타입스크립트의 Abstract Class
Abstract Class 보통 OOP 에서 추상 클래스는 클래스의 형태만 제공하고 실제 인스턴스화는 불가능한 클래스이다. 상속하여 인스턴스화 가능한 클래스를 만들 때 사용한다. 일반 사용법 abstract class AbstractClass { id: number; constructor(id: number) { this.id = id; } } // 인스턴스화를 시도할 시에 에러가 난다. const abstract = new AbstractClass(123); // 보통 이렇게 상속을 하여 쓴다. class Class extends AbstractClass {} // 당연히 상속한 클래스는 인스턴스화가 가능하다. const class1 = new Class(100); abstract method 와 함께..
TS030. 타입스크립트 클래스에서 메서드, 속성 오버라이딩
메서드 오버라이드 메서드 오버라이드는 아래의 규칙만 따르면 된다. 부모 메서드와 반환 타입이 일치해야 한다. 부모 메서드에 필수인 파라미터들이 존재해야 한다. 부모 메서드에 없는 파라미터가 자식 메서드에서 필수로 지정되면 안된다. class Car { drive(name: string) { return "부릉부릉"; } } // 1번 규칙 위배 class Sonata1 extends Car { drive(name: string) { return true; } } // 2번 규칙 위배 class Sonata2 extends Car { drive(name: number) { return "부릉부릉"; } } // 3번 규칙 위배 class Sonata3 extends Car { drive(name: stri..
TS029. 타입스크립트 클래스 상속
클래스 상속 타입스크립트의 상속도 일반 자바스크립트 클래스 상속과 동일하다. class Person { name: string; constructor(name: string) { this.name = name; } hello() { return `안녕하세요. ${this.name}`; } } class Developer extends Person { language: string; constructor(name: string, language: string) { super(name); this.language = language; } develop() { return `${this.name} (이)가 개발을 시작하였습니다. 언어는 ${this.language} 입니다.`; } } 부모 인스턴스와 자식 인..
TS028. 타입스크립트 인터페이스를 클래스에 사용하기
클래스의 인터페이스 구현 타입스크립트에서 인터페이스를 일반적인 객체지향의 인터페이스 개념처럼 사용할 수 있다. 클래스가 약속된 시그니처의 형태를 맞추는 것이다. implements 키워드를 이용하여 인터페이스의 구현을 강제할 수 있다. interface Person { name: string; hello(): string; } implements Person 을 덧붙여서 인터페이스 구현을 선언했으므로 name 과 hello() 프로퍼티를 반드시 구현해야 한다. class Worker implements Person { name: string; constructor(name: string) { this.name = name; } hello() { return `안녕. 난 ${this.name}.`; } w..
2023년 전체 회고
2023년 전체 회고 특별한 내용이나 반성해야 할 점, 개선해야 할 점 보다는 그냥 말 그대로 어떤 일이 있었는지만 적어보려 한다. 트위터를 시작했다. 태어나서 처음으로 SNS 에 여러가지 글을 써봤다. 최초의 팔로워는 '넬송이' 님이었는데 현재는 계정을 삭제하시거나 비활성화 계정으로 돌리신 것 같다. 개발자 계정으로 활동해야지 하고 마음을 먹었으나 나중엔 일상의 잡다한 이야기를 올리는 것이 더 재밌다고 생각되어 여러가지 이야기를 올리고 있다. 사실 이와 관련되어 깨달은 점이 아주 많은데 회고록에 다 적기에는 너무 길다. 핵심만 짚자면, 남의 눈치는 아주 안 봐서도 안되며 아주 많이 봐서도 안된다는 것이다. 적당히 눈치보면서 살자. 적정지점을 찾는 것은 물론 매우 어려운 일이다. 현재는 약..
TS027. 타입스크립트에서의 클래스 선언 방식
타입스크립트에서의 클래스 선언 자바스크립트와 동일하다. 단, 타입스크립트에서 클래스를 이용할 때는 초기화 등을 실수로 까먹는 일을 방지할 수 있다. 컴파일 타임에 에러를 통해 알려주기 때문이다. 만들어진 클래스는 당연히 타입으로 이용 가능하다. class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } hello() { return `안녕 내 이름은 ${this.name} 이고, 나이는 ${this.age} 살이야.`; } } const person: Person = new Person("Jake Seo", 10); // 자바스크립트에서는 존재하지 않는..
TS026. 타입스크립트 오브젝트의 Key-Value Mapping 알아보기
타입스크립트의 키 값 매핑 (Key-Value Mapping) 타입스크립트엔 키-값 매핑이라는 개념이 존재한다. 특정 타입의 키와 다른 타입의 값을 통해 타입을 정의할 수 있는 강력한 기능이다. 일반적으로 아래와 같은 문법을 띈다. interface MyObject { [key: KeyType]: ValueType; } 예제: 키-값 매핑으로 이전 타입 재활용하기 아래와 같이 User 타입, Post 타입, ApiResponse 타입을 정의했다. 여기서 UserApiResponse 라는 더 구체적인 타입을 새로 정의해야 하는데, 이 때 키-값 매핑을 활용하여 ApiResponse 에서 정의했던 내용을 재활용 할 수 있다. type User = { name: string; age: number; nickn..
TS025. 타입스크립트 옵셔널 vs Type | Undefined 의 차이
Optional vs Or undefined 옵셔널의 타입 추론이 number | undefined 로 되는데, 그러면 실제로 number | undefined 라고 쓰는 것과 무슨 차이일까? // 옵셔널 이용 interface Person1 { name: string; age?: number; } // 옵셔널 이용하지 않음 interface Person2 { name: string; age: number | undefined; } 아래 보면 추론된 타입이 number | undefined 인 것을 볼 수 있다. 결과 옵셔널을 이용하면 프로퍼티 입력 자체를 생략 가능하다. 옵셔널을 이용하지 않고 number | undefined 를 이용하면 undefined 를 입력하더라도 무조건 입력을 해야 한다. c..
TS024. 타입스크립트 중첩된 오브젝트 사용 시 주의점 (Nested Object)
중첩된 오브젝트 (Nested Object) 객체 안에 또 다른 객체가 있는 것을 중첩된 객체라고 한다. 중첩된 객체에서 유의해야 할 것은 중첩된 내부 객체를 잘 나누어줘야 나중에 디버깅할 때 훨씬 쉽고 재사용이 가능하다는 것이다. // 직접 Nested 정의하기 type Person = { address: { postalCode: number; detail: string; }; name: { firstName: string; lastName: string; }; }; const person: Person = { address: { postalCode: 111, detail: "서울특별시", }, name: { firstName: "jake", lastName: "seo", }, }; // 에러 내용 읽..
TS023. 타입스크립트 객체 초과 프로퍼티 검사 정리
초과 속성 검사 타입스크립트는 객체에 초과되거나 예상치 못한 프로퍼티가 있는지 검사한다. 예상보다 많은 프로퍼티가 있는 경우 오류를 포착하도록 설계됐다. 초과 프로퍼티 검사 예시 객체 리터럴 타입스크립트는 객체 리터럴의 초과 프로퍼티에 대해 가장 엄격하다. interface Person { name: string; age: number; } // 에러: nationality 라는 초과 프로퍼티가 발견됐다. let person: Person = { name: "Alice", age: 30, nationality: "Canadian", // 초과 프로퍼티 }; 초과 프로퍼티 검사가 느슨한 경우 변수 할당 변수 할당의 경우 초과 프로퍼티 검사에 느슨하다. 타입 Narrowing 이 되는 경우 할당이 가능하다...
TS022. 타입스크립트 튜플 정리
튜플이란? 길이와 타입을 알고 있는 배열의 한 유형을 말한다. ex) 좌표는 2의 길이를 가진 number 타입 배열로 [number, number] 로 표현 가능하다. 튜플은 일반 배열과 달리 길이에 대한 정보를 알고 있으므로 범위를 넘어서는 인덱스에 접근했을 때 컴파일 타임에 에러가 표기된다. 당연히 일반 배열처럼 디스트럭처링도 가능하다. 튜플에는 옵셔널 요소가 있을 수 있다. 특정한 형태로 된 고정된 데이터 구조를 나타내거나 DB 행과 같은 것을 나타낼 때 매우 유용하다. 기본 튜플 선언 방법 const tuple: [number, string] = [30, "Jake"]; tuple.push("abc"); // push 로 수정이 된다는 게 흠임 let person: [string, number]..