[TypeScript] 문법 (타입 별칭, 타입 추론, 클래스)

Type Aliases (타입 별칭)

새로운 이름으로 기존의 타입을 참조하는 것을 의미한다.

type 키워드를 사용하여 작성한다.

❓

타입 별칭을 사용하면?

복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용하는 등 가독성을 높일 수 있다.

type Person = {
  id: number;
  name: string;
  email: string;
}

//Commentary 인터페이스에서 Person 타입을 참조하고 있다.
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

//객체에서 Commentary 인터페이스를 참조하고 있다.
let comment1: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
}

❗객체에 아래와 같이 작성하지 않은 경우 컴파일 에러가 난다.
작성한 인터페이스(Commentary) 내부에 존재하지 않는 프로퍼티나 존재하는 프로퍼티를 작성하지 않은 경우
작성한 타입(Person) 내부에 존재하지 않는 프로퍼티나 존재하는 프로퍼티를 작성하지 않은 경우

인터페이스 VS 타입 별칭

타입 별칭은 내부의 정의된 프로퍼티를 볼 수 있으며, 인터페이스는 정의된 프로퍼티는 볼 수 없다.
(vscode에 작성 후 마우스를 올리면 된다.)

인터페이스는 확장이 가능하다.
타입 별칭은 타입에 새로운 이름을 부여한 것이기 때문에 확장이 되지 않는다.
인터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입 둘 다 상속이 가능하므로 유연한 코드를 작성을 위해서는 인터페이스로 만들어서 필요할 때마다 확장할 수 있다.

type Person = {
    name: string;
    age: number;
}

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

// 인터페이스 User를 상속해 Students라는 새로운 인터페이스 생성
//정상적으로 동작
interface Students extends User {
	 className: string;   
}

// 타입 Person을 상속해 Students라는 새로운 인터페이스 생성
// 정상적으로 동작
interface Students extends Person {
    className: string;  
}

// 아래와 같이 타입 Person을 상속해 Students라는 새로운 타입 생성 시
// 에러 발생
type Students extends Person {
    className: string;  
}

Type Inference (타입 추론)

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

let isNum = 123;

위 예시처럼 타입을 선언하지 않아도 자동으로 Number라는 타입으로 추론한다.

최적 공통 타입 (Best common type)

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

1. 아래 x의 타입을 추론한다.

2. 배열의 타입으로 고를 수 있는 타입은 number와 null이다.

3. 모든 후보의 타입을 포함할 수 있는 타입을 선택한다.

let x = [0, 1, null];

// .d.ts 파일
declare let x: (number | null)[];

❔.d.ts 파일 : JS 모듈을 TS에서도 사용할 수 있도록 타입만을 선언한 파일

문맥상의 타이핑 (Contextual Typing)

문맥상으로 타입을 결정하는 것이다.

아래 예시처럼 매개변수의 타입이 number, string 일 때 함수의 반환 값은 문맥상 타이핑으로 인하여 number, string 타입으로 추론된다.

function add(a, b) {
  return a + b;
}

타입 추론의 장점

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

2. 개발 생산성 향상
명시적으로 타입을 지정하지 않아도 TypeScript가 자동으로 타입을 추론하기 때문에 코드 작성 시간을 단축할 수 있다.

3. 오류 발견 용이성
TypeScript는 변수나 함수의 타입을 추론하여 타입 검사를 수행하기 때문에 코드의 오류를 발견하는 것이 쉽다.

타입 추론의 단점

1. 타입 추론이 잘못될 경우 오류 발생

2. 명시적인 타입 지정이 필요한 경우가 있음
복잡한 함수나 객체의 경우에는 명시적인 타입 지정이 필요할 수 도 있다.

Class (클래스)

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

class Person {
  // 클래스 프로퍼티를 사전 선언하여야 한다
  name: string;

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

  walk() {
    console.log(`${this.name} is walking.`);
  }
}

const person = new Person('Lee');
person.walk(); // Lee is walking

클래스와 상속(Inheritance)

기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.

extends 키워드를 사용하여 상속한다.

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

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

const dog = new Dog();
dog.move(10);
dog.speak();

public, private 키워드

클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트이다.

public : 외부로 공개한다.

private: 외부로 공개하지 않는다.

class Person {
  // public 키워드 사용 
  public firstName: string;
  // private 키워드 사용
  private lastName: string;
  age: number;

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

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

const person = new Person('Lee', 'hyeon', 26);
person.greet(); // 안녕하세요, 제 이름은 Lee hyeon이고 26입니다.

readonly 키워드

해당 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다.

class Greeter {
  readonly name: string = "world";
 
  constructor(otherName?: string) {
    if (otherName !== undefined) {
      this.name = otherName;
    }
  }
 
  err() {
    this.name = "not ok";
// 읽기 전용 속성이므로 할당할 수 없다.
  }
}
const g = new Greeter();
g.name = "also not ok";
// 읽기 전용 속성이므로 할당할 수 없다.

Reference

코드스테이츠

https://www.typescriptlang.org/docs/handbook/2/classes.html

Documentation - Classes

https://poiemaweb.com/typescript-class

TypeScript - Class | PoiemaWeb