열거형(Enum)
Enum이란??
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상수값을 대신하여 이렇게 열거형을 사용하게 되면 코드의 가독성도 올라가고 오타에 의한 오류를 줄일 수 있다는 장점이 있습니다.
역매핑(Reverse mapping)
역 매핑이란 숫자형 열거형에만 존재하는 특징입니다.
이는 열거형의 key로 value를 얻을 수도 있고 value로 key를 얻을 수도 있다는 특징이 있습니다.
enum Enum {
A,
}
let a = Enum.A;
let nameOfA = Enum[a];
console.log(nameOfA) // "A"문자형 열거형
문자형도 숫자형과 비슷한 유형을 가지고 있지만 auto-incrementing이 없다는 차이가 있습니다.
enum Direction {
Up = "Up",
Donw = "Down",
Left = "Left",
Right = "Right",
}문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용됩니다.
에를 들어 HTTP 요청 방식을 나타내는 열거형을 정의한다고 했을 때 다음과 같이 표현할 수 있습니다.
enum HttpMethod {
Get = "Get",
Post = "Post",
Put = "Put",
Delete = "Delete",
}
function makeRequest(url:string,method:HttpMethod) {
//...
}
makeRequest("api/data",HttpMethod.Post);이렇게 코드를 구현한다면 오타와 같은 실수를 방지할 수 있으면 코드의 가독성과 안정성을 높일 수 있습니다.
인터페이스(Interface)
인터페이스란??
인터페이스는 일반적으로 타입 체크를 위해서 사용됩니다. 변수, 함수, 클래스에 사용할 수 있으며 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 합니다.
변수와 인터페이스
interface User { // 인터페이스의 이름은 대문자로 시작할 것.
name: string;
age: number;
}
const user: User = {
name: "anna",
age: 20
}변수를 선언할 때 interface를 사용한다면 프로퍼티의 순서는 상관없지만 반드시 정의된 프로퍼티를 전부 작성해야 합니다.
interface User {
name: string;
age?: number; // ? 연산자를 사용해서 선택적 프로퍼티를 작성할 수도 있다.
}
const user: User = {
name: "anna"
// age의 프로퍼티가 없지만 정상작동을 한다.
}함수와 인터페이스
// 변수 인터페이스
interface User {
name : string;
age : number;
job : string;
}
//함수 인터페이스
interface Greeting {
(user: User, greeting: sting) : string;
// 매개변수의 타입과 함수가 반환하는 값의 타입을 설정한다.
}
// 인터페이스를 사용한 변수 선언
const user : User = {
name : "anna",
age : 30,
job : "developer"
}
// 인터페이스를 사용한 함수 선언
const greet : Greeting = (user,greeting) => {
return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}
const message = greet(user,"Hi");클래스와 인터페이스
// 메소드의 타입을 지정한 인터페이스 설정
interface Calculator {
add(x:number,y:number) : number;
substrack(x:number,y:number) : number;
}
// 인터페이스를 사용하는 클래스 설정
class SimpleCalculator implements Calculator {
add(x: number, y:number) {
return x + y;
}
substrack (x :number,y:number) {
return x - y;
}
}
// 인스턴스 생성
const calculator = new SimpleCalculator();
console.log(calculator.add(4,9)); // 13
console.log(calculator.substrack(10,5)); // 5클래스에서 인터페이스를 사용하는 것도 위의 두 가지 경우와 크게 다른 점은 없지만 유의해야할 점이 있습니다.
-
Calculator인터페이스 내에 정읟된 두 메서드를 반드시 작성해야한다. -
클래스 내부에서 해당 메서드의 매개변수 타입을 다시 한번 더 명시해 주어야 한다.
인터페이스와 상속
JavaScript에서 클래스를 공부할 때 extends라는 키워드를 사용하면 기존에 존재하던 클래스를 상송해 새로운 클래스를 정의할 수 있었다.
TypeScript의 인터페이스에도 이와 같이 extends 키워드를 사용해서 기존의 인터페이스를 상속해 확장이 가능합니다.
// Person이라는 인터페이스를 생성.
interface Person {
name: string;
age: number;
}
// Person 인터페이스를 새로운 인터페이스에 상속.
interface Developer extends Person {
language : string;
}
// Person을 상속받은 Developer를 사용한 변수 선언
const person: Developer ={
language : "TypeScript",
age: 20,
name : "Anna"
}위와 같은 원리로 여러개의 인터페이스를 상속하는 것도 가능하다.
interface FoodStuff {
name: string;
}
interface FoodAmount {
amount: number;
}
interface FoodFreshness extends FoodStuff, FoodAmount {
isFreshed: boolean;
}
const food = {} as FoodFreshness;📌 타입단언
위에서 food 변수를 보면 기존에는
const food : FoodFreshness = {}와 같이 사용하던 것과 다르게const food = {} as FoodFreshness라는 방식을 사용했다. 이렇게as키워드를 사용하는 방식을 '타입 단언(Type Assertion)이라고 한다.
타입 단언 방식은 컴파일러가 타입 검사를 우회하도록 하기 때문에, 실제 객체의 속성이 FoodFreshness 인터페이스와 일치하지 않더라도 컴파일러는 오류를 발생시키지 않습니다. 따라서, food 객체가 FoodFreshness 인터페이스의 속성을 정확히 준수하지 않아도 컴파일러는 이를 허용하게 합니다.
