코드스테이츠 부트캠프 프론트엔드 44기
Section 4 Unit 5 : [TypeScript] 기초
열거형(Enum)
C#과 아예 똑같기 때문에 기본적인 설명은 생략한다.
역매핑
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}enum Enum {
A = 3,
B = 7
}
let a = Enum.A;
console.log(a); // 3
console.log(Enum[a]); // A역매핑(Reverse mappings)이란 숫자형 열거형에만 존재하는 개념으로, Value(인덱스)로 Key(내부타입)를 불러올 수 있는 특징을 말한다.
한마디로 '배열'의 특징과 똑같다. 실제로 숫자형 열거형은 배열과 비슷한 구조를 취하고 있다. Enum에 할당한/할당된 숫자가 실은 배열의 index 역할이었던 것이다. 그래서 Key-Value와 Value-Key 참조가 둘 다 가능했던 것.
문자열은 index가 될 수 없기 때문에 문자형 열거형은 역매핑 특성이 존재하지 않는다.
주의 사항
하나의 Enum에 숫자와 문자열을 같이 사용하는 것을 '복합 Enum'이라고 하는데, 스파게티 코드를 초래할 수 있기 때문에 사용하지 않는 것을 추천한다.
enum Enum { // 복합 Enum
A = 'apple',
B = 3
}Enum의 초깃값 할당은 number/string 타입의 데이터만 가능하며, 그 외의 타입은 절대 할당 불가능하다.
enum BoolEnum {
True = true, // 에러
False = false // 에러
}타입 별칭 (Type Alias)
한마디로 사용자 정의 타입. 키워드 type을 사용하여, 객체를 정의하는 타입을 새롭게 만드는 것을 말한다.
type Person = {
name: string;
age: number;
email: string;
}
interface Comment {
id: number;
content: string;
person: Person; // interface 내에서 Person 참조
}
let person1: Person = { // 정상 작동
name: '김코딩',
age: 30,
email: "kimcoding@codestates.com"
}
let person2: Person = { // 에러: email 프로퍼티를 작성하지 않았기 때문에 컴파일 에러
name: '김코딩',
age: 30,
}
let person3: Person = {
name: '김코딩',
age: 30,
email: "kimcoding@codestates.com",
isDeveloper: true // 에러: Person 타입 내부에 isDeveloper 프로퍼티가 없기 때문에 컴파일 에러
}인터페이스와의 차이
타입 별칭과 인터페이스는 서로 같은 특징이 있으며 서로를 대체할 수도 있다. 다만 몇 가지 차이점이 있다.
위와 같이 코드를 작성했다고 쳐보자.
VSCode에서 Person 타입에 마우스를 올리면, Person 내부에 어떤 프로퍼티들이 정의되어 있는지 보인다. 반면 User 인터페이스는 내부가 보이지 않는다. 따라서 타입 별칭을 사용하면 인터페이스보다도 비교적 더 편하게 코드를 작성할 수 있다.
또한 타입은 상속이 불가능하다.
type Person = {
name: string;
age: number;
}
type Students extends Person { // 에러
className: string;
}타입 별칭과 같은 기능을 유연하게 & 확장성 있게 쓰고 싶다면 인터페이스를 사용하자.
타입 추론 (Type Inference)
let num = 123; // 타입: number
let arr = [0, 1, null]; // 타입: (number | null)[]변수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추해서 정해주는 기능을 말한다.
클래스
TypeScript에서는 클래스의 속성(프로퍼티/인스턴스 변수)에 대한 타입을 명시할 수 있다.
class Person {
name: string; // this.name의 타입
age: number; // this.age의 타입
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}접근 한정자
TypeScript의 접근 한정자에는 public, private, protected가 있으며, 추가로 readonly도 존재한다.
접근 한정자 미지정 시 디폴트값이 private인 C# 및 타 객체지향 언어들과 달리, TypeScript에선 디폴트값이 public이므로 주의해야 한다.
class Person {
public name: string; // 그냥 name: string과 동일
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const person = new Person('Yaju', 24);
console.log(person.name); // "Yaju"
console.log(person.age); // 에러: roperty 'age' is private and only accessible within class 'Person'readonly 키워드는 클래스 내에서만 쓰이는 const라고 생각하면 쉽다. (반대로 readonly는 클래스 바깥에서 사용 불가) 기본적으로 public이며, 프로퍼티를 읽기 전용(수정 불가)으로 설정한다. 읽기 전용 프로퍼티는 반드시 생성자(constructor) 내에서만 초기화 및 할당할 수 있다.
<주의 사항>
이 게시물은 코드스테이츠의 블로깅 과제로 제작되었습니다.
때문에 설명이 온전치 못하거나 글의 완성도가 낮을 수 있습니다.
