[TypeScript] 타입 추론, 클래스, 제네릭

타입 추론(Type Inference)

타입스크립트는 정적타입을 지원하는 프로그래밍 언어로 코드의 안정성을 높이고 디버깅을 용이하게 할 수 있다. 타입 추론의 기능을 통해서 코드 작성을 도울 수 있다.


타입 추론의 장점
코드의 가독성 향상, 개발 생산성 향상, 오류 발견 용이성
타입 추론의 단점
타입 추론이 잘못될 경우 코드 오류 발생, 명시적인 타입 지정이 필요한 경우가 있음

타입 추론의 기본

타입 추론은 변수나 함수의 타입을 선언하지 않아도 타입스크립트가 자동으로 유추하는 기능이다. 변수를 선언하고 값을 할당하면 변수의 타입을 자동으로 추론한다.

// 변수의 타입을 자동으로 문자열로 추론
let string = 'typescript'

최적 공통 타입

타입스크립트는 여러 표현식에서 타입 추론이 발생한다면 해당 표현식의 타입을 사용하여 최적 공통 타입을 계산한다.

// 배열의 타입은 number와 null로 모든 후보의 타입을 포함할 수 있는 타입을 선택
let obj = [20, 30, null]

문맥상의 타이핑

타입스크립트에서 코드의 위치(문맥)을 기준으로 타입을 결졍하는 방식이다.

// 매개변수의 타입이 명시되어 있지 않지만 매개변수 타입이 모두 숫자타입이면 multiply 함수의 반환 값도 숫자 타입으로 추론
function multiply(a, b) {
  return a * b;
}

클래스(Class)

타입스크립트의 클래스는 자바스크립트의 클래스와 비슷하지만 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.

// constructor를 이용하여 초기화하는 멤버들은 상단에서 정의를 해줘야 한다.
class Student {
  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 Person {
    greet(name: string): void {
        console.log(`안녕하세요, 제 이름은 ${name}입니다.`);
    }
}

class Student extends Person {
    study(): void {
        console.log("저는 프론트엔드 공부를 하고 있습니다.");
    }
}

pubilc, private 키워드

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트 값이지만 pubilc 키워드를 사용하여 공개된다고 명시적으로 표시해 줄 수도 있다. 외부에 드러내지 않을 멤버는 private 키워드를 사용하면 된다.

class Student {
  pubilc name: string;
  private age: number;

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

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

readonly 키워드

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

class Student {
  readonly name: string;

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

let student1 = new Student("mimi")
student1.name = "youra" // readonly로 명시되어 있으므로 값을 변경할 수 없다.

제네릭(Generic)

타입스크립트의 제네릭은 코드 재사용을 높이고 타입 안정성을 보장하는 기능이다. 제네릭을 사용하면 함수나 클래스를 작성할 때 사용될 데이터의 타입을 미리 지정하지 않고, 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된다.

// 함수에 T라는 타입 변수를 추가하여 타입을 불분하고 동작함
function printText<T>(text: T):T {
  return text;
}

// 함수를 호출할 때 Number 타입으로 명시해 줌
const number = printText<Number>(270);
const string = printText<String>('Happy');

인터페이스와 제네릭

인터페이스를 사용하여 만든 객체는 어떤 타입이 들어갈지만 작성하면 인터페이스를 여러 개 만들지 않고도 재사용을 할 수 있다.

interface Obj<T> {
    name: T;
    stock: number;
}

const obj1 = Obj<String> = {
    name: 'skirt';
    stock: 3;
}

const obj2 = Obj<Number> = {
    name: 342555;
    stock: 1;
}

클래스와 제네릭

제네릭을 사용하는 타입스크립트에서 팩토리를 생성할 때 생성자 함수로 클래스 타입을 참조해야 한다.

class multiplyNumber<T> {
    initialValue: T;
    multiply: (x: T, y: T) => T;
}

let myNumber = new multiplyNumber<number>();
myGenericNumber.initialValue = 0;
myGenericNumber.multiply = function(x, y) { return x * y; };