TypeScript 문법

1abme·2023년 5월 30일
0

TypeScript의 열거형(Enum)

TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용한다.

열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다.

TypeScript에서 열거형은 일반적으로 JavaScript의 상수값 대신 사용된다. 그렇게 사용되는 열거형은 가독성과 안정성을 높여주고 오타와 같은 실수를 방지해준다.

숫자형 열거형 (Enum)

열거형은 디폴트 값으로 숫자형을 사용하며 각 값은 자동으로 0부터 시작해 1씩 증가하며 이를 auto-incrementing 이라고 한다. 

enum Color {
  Red,
  Green,
  Blue,
}

따라서 위의 경우 Red 값은 0, Green 값은 1, Blue 값은 2 가 된다.

또한 수동으로 값을 지정하거나 열거형의 값에 대해 산술 연산을 수행할 수도 있다.

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 mappings)

숫자형 열거형에만 존재하는 역 매핑은 열거형의 키 (key)로 값 (value)을 얻을 수 있고 값 (value)으로 키 (key)를 얻을 수도 있다. 

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

문자형 열거형 (Enum)

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

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

숫자형 열거형의 값은 디버깅시 가끔 불명확한 값이 나올 수 있지만 문자형 열거형은 항상 명확한 값이 나온다. 때문에 문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScirpt에서 다룰 때 사용한다.

TypeScript의 인터페이스(Interface)

TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용 된다.

인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제해 일관성을 유지한다.

TypeScript의 예약어인 interface를 사용해 인터페이스를 생성할 수 있다.

  • 예약어 (reserved word)
    • 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어

이때 인터페이스의 이름은 대문자로 시작해야한다.

다른언어의 경우 interface의 i 를 따와서 이름앞에 i를 붙혀주는 네이밍 컨벤션을 사용하고 있지만 타입스크립트에서는 i를 붙히지 않는것을 네이밍컨벤션으로 권장하고 있다.

변수와 인터페이스

TypeScript에서 변수를 선언할 때 인터페이스를 같이 사용하는 경우가 있는데, 객체 (Object) 의 구조를 정의하기 위해 주로 사용된다.

이때 인터페이스를 사용해 선언한 변수는 정의된 프로퍼티를 모두 포함 하고 있어야 한다. 또한 interface로 정의된 속성만 지정할 수 있다.

하지만 ?연산자를 사용하면 선택적 프로퍼티를 작성할 수 있다.

함수와 인터페이스

인터페이스를 사용하면 객체의 프로퍼티 이름과 티입을 정의하고, 함수의 매개변수 타입과 반환 타입도 정의할 수 있다.

이때 인터페이스를 사용해 구현된 함수는 매개 변수의 타입과 반환 타입을 작성하지 않아도 된다.

클래스와 인터페이스

클래스에서도 인터페이스 사용이 가능하다. 다만 클래스를 구현할 때 인터페이스에서 정의된 함수나 메서드의 매개변수 타입과 반환값이 일치해야하므로 클래스 내부에서 해당 메서드의 매개변수 타입을 다시한번 명시해주지 않으면 컴파일 에러가 발생한다.

TypeScript의 타입 별칭(Type Aliases)

타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것으로 새로운 이름으로 기존의 타입을 참조하는 것을 말하며 키워드 type 타입을 사용해 작성한다.

type MyString = string;

let str1: string = 'hello!';

// string 타입처럼 사용할 수 있습니다.
let str2: MyString = 'hello world!';

타입 별칭을 사용하면 코드를 간결하고 가독성 좋게 만들 수 있다. 또한 복잡한 타입을 간략하게 표현하고 타입 정의를 재사용 하는 등의 가독성을 높일 수 있다.

타입 별칭으로 만들어진 타입을 참조할 시에는 인터페이스와 마찬가지로 내부에 정의된 프로퍼티를 전부 참조해야만 하며 그 외에 다른 프로퍼티를 더 작성하게 되면 컴파일 에러가 발생한다.

TypeScript의 타입 추론(Type Inference)

타입 추론(Type Inference)은 변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능이다.

최적 공통 타입 (Best common type)

TypeScript는 여러 표현식에서 타입 추론이 발생할 때, 해당 표현식의 타입을 사용하여 "최적 공통 타입"을 계산한다.

문맥상의 타이핑(Contextual Typing)

타입스크립트에서 타입을 추론하는 또 하나의 방식은 문맥상으로 타입을 결정한다.

타입 추론의 장단점

장점

  • 코드의 가독성 향상

    • 명시적으로 타입을 지정하지 않아도 코드에서 변수의 타입을 알 수 있어 가독성이 향상된다.

  • 개발 생산성 향상

    • 명시적으로 타입을 지정하지 않아도 자동으로 타입을 추론하기 때문에 코드 작성 시간이 단축된다.

  • 오류 발견 용이성

    • 변수나 함수의 타입을 추론하여 타입 검사를 수행하기 때문에 오류 발견이 쉽다.

단점

  • 타입 추론이 잘못되어 오류가 발생할 수 있다.

    • TypeScript가 자동으로 수행하기 때문에 추론이 잘못되어 코드 오류가 발생할 수 있다.

  • 명시적인 타입 지정이 필요한 경우가 있다.

    • 복잡한 함수나 객체등 타입 추론만으로는 부족해 명시적인 타입 지정이 필요한 경우가 있다.

TypeScript에서의 클래스(Class)

TypeScript의 클래스는 JavaScript의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다.

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

class Person {
  name: string;
  age: number;

  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.`);
  }
}

// 클래스를 사용한 객체 생성
const person = new Person('Alice', 30);
person.greet(); // "Hello, my name is Alice and I'm 30 years old."

TypeScript에서 클래스를 정의할 때, constructor 를 이용하여 초기화하는 멤버들은 전부 상단에서 정의해줘야 한다.

또한 constructor 내 인자로 받을 때도 정확히 타입을 명시해야한다.

클래스와 상속(Inheritance)

TypeScript의 클래스(class)는 extends 키워드를 사용해 기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.

public, private 키워드

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트 값이다. 이와 관련되어 타입스립트에는 public 키워드와 private 키워드가 존재한다.

  • public 키워드

    public 키워드를 사용하면 공개된다고 명시적으로 표시할 수 있다.

  • private 키워드

    외부에 드러내지 않을 멤버가 있다면 private 키워드로 명시해 주면 된다.

readonly 키워드

readonly 키워드를 사용하면 프로퍼티를 읽기 전용으로 만들 수 있다. 이때 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

readonly 로 명시되어 있으면 재할당으로 값을 변경할 수 없다.

profile
1abme
제가 이해하고 있는게 맞나요...?
이전 포스트

TypeScript 환경 구성 & 기본 타입

다음 포스트

CI / CD

0개의 댓글

관련 채용 정보