TypeScript Day_2

98__dj·2023년 5월 31일

SEB_FE_후기

목록 보기

21/22

TypeScript 열거형(Enum)

특정 값의 집합을 정의할 때 사용, 문자형과 숫자형 열거형 지원

enum Color {
  Red,
  Green,
  Blue,
}

숫자형 열거형

디폴트 값으로 숫자형을 사용, 값은 자동으로 0부터 시작해 1씩 증가.
수동으로 값을 지정 가능, 열거형의 값에 대해 산술 연산 수행 가능

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

문자형 열거형

문자형 열거형은 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다.

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

Post요청을 사용할 때 위와 같이 HttpMethod.Post와 같이 열거형 값을 사용할 수 있다.

*역 매핑 (Reverse Mappings)

숫자형 열거형에만 존재하는 특징으로, 열거형의 키(key)로 값(value)를 얻을 수 있고, 값(value)으로 키(key)를 얻을 수 있다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

TypeScript 인터페이스(Interface)

인터페이스 : 일반적으로 타입 체크를 위해 사용되며, 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 합니다.

변수

interface User {
	name: string;
	age: number;
}

// 정상적으로 선언됩니다.
const user: User = {
	name: "anna",
	age: 20
}

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언됩니다.
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

함수

interface User {
	name: string;
	age: number;
	job: string;
}

interface Greeting {
	(user: User, greeting: string): string;
}

const greet: Greeting = (user, greeting) => {
	return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

const user: User = {
	name: "anna",
	age: 30,
	job: "developer"
};

const message = greet(user, "Hi");

console.log(message);

클래스

interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

class SimpleCalculator implements Calculator {
	add(x: number, y:number) {
		return x + y;
	}

	substract(x: number, y: number) {
		return x - y;
	}
}

const caculator = new SimpleCalculator();

console.log(caculator.add(4, 9)); //13
console.log(caculator.substract(10, 5)); //5

extends를 통해 상속 가능

interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

타입 별칭(Type Aliases)

타입의 새로운 이름을 만들어 기존의 타입을 참조하는 것을 의미. 타입 별칭을 이용하여 새로운 이름을 만들 때 type을 사용.

타입 추론(Type Inference)

변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능

최적 공통 타입 (Best common type)

여러 표현식에서 타입 추론이 발생할 때, 해당 표현식의 타입을 사용하여 "최적 공통 타입"을 계산
문맥상의 타이핑 (Contextual Typing)

코드의 위치(문맥)를 기준으로 일어남

TypeScript의 클래스

TypeScript에서는 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

상속

인터페이스와 마찬가지로 extends 키워드를 통해 상속할 수 있다.

class Animal {
    move(distanceInMeters: number): void {
        console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log("멍멍!");
    }
}

public, private

클래스 내 선언된 멤버는 외부에 공개되는 것이 디폴트 --> public으로 명시

외부에 드러내지 않을 멤버가 있다 --> private로 명시

readonly

readonly 를 이용해 프로퍼티를 읽기 전용으로 만들 수 있다. 읽기 전용 프로퍼티들은 초기화해야 한다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러