[Type Script] 커스텀 타입 (class, interface), var let const 차이

서론

이번 글은 저번에 글에 이어서 타입에 대해 배워보도록 하겠다.

백신 맞고 와서 글이 조금 부족할 수 있다 (내 팔...)

 

기초 : var, let, const의 차이

1. var

변수 선언 후 재선언, 재할당 둘 다 가능하다.

그러나 코드 구현에 용이하지 않아 잘 사용되지 않는 추세이다.

 

2. let

변수 선언 후 재선언은 불가능하나, 재할당은 가능하다.

var과 달리 선언과 초기화가 분리되어 실행된다.

즉, 변수 선언 전에 사용 시 인식하지 못하고, 변수 선언 후 초기화 전에 사용 시 값이 없다.

 

3. const

변수 선언 후 재선언, 재할당 둘 다 불가능하다. 변하지 않는 상수

 

클래스 내 커스텀 타입 사용

js와 달리 ts에선 클래스 프로퍼티를 선언하는 구문이 존재한다.

위 코드와 작성할 수 있고, 변환된 js 코드에선 Person 클래스의 프로퍼티가 없다.

왜냐, js는 인스턴스를 만든 후 프로퍼티를 초기화하기 때문이다. (new 표현식 -> p.lastName)

 

* 생성자 constructor

: class가 new 표현식에 의해 인스턴스화되어 객체를 생성할 때 객체의 레퍼런스(참조)를 생성하기 전에

객체의 초기화를 위해 사용되는 코드의 블록.

 

아까 만든 Person 클래스를 세 개의 파라미터와 함께 생성자를 추가한다.

 

여기서 p에 Person 타입을 추가해주어 명확하게 표현할 수 있지만

타입을 추가하지 않아도 타입을 유추할 수 있기 때문에 때로는 타입 표기가 없어도 된다.

 

* 접근 제어자

타입스크립트는 다른 객체 지향 언어와 같이 접근 제어자가 있다.

접근 제어자는 readonly, private, protected, public 키워드를 사용할 수 있다.

 

readonly는 클래스 생성자 내부 등에 프로퍼티를 초기화하는 경우 그 값이 바뀌지 않아야할 때 사용한다.

const와 비슷하지만 const는 클래스 프로퍼티에 사용이 불가하다.

 

public은 클래스 내부 및 외부에서 프로퍼티를 접근할 수 있다.

 

인터페이스를 사용한 커스텀 타입

많은 객체 지향 언어엔 interface 문법 구조가 있으나, js에는 존재하지 않는다.

하지만 타입스크립트엔 interface를 지원하는 interface와 implements 키워드가 있다.

이는 js로 컴파일되지 않고 개발 도중 잘못된 타입을 피할 수 있게 도와주는 역할만 하게 된다.

이 커스텀 타입을 class 키워드로 선언하면 마치 값처럼 여러 번 사용 가능하고 (new 표현식)

js 코드에 class 키워드 코드가 포함된다. 이 class는 ES5에선 함수로, ES6에선 클래스로 변환된다.

 

왼쪽 : ts / 오른쪽 : ts코드가 변환된 js 코드

위 사진에서 js 코드를 보면 interface 키워드에 해당하는 부분이 없다는 것을 확인할 수 있다.

따라서 ts 코드가 변환된 js 코드는 간결하게 표현되고 배포하기에도 적합하다.

 

만약 interface에서 선언된 프로퍼티가 p에 존재하지 않으면 ts는 컴파일 오류를 발생하지만,

js는 오류를 발생하지 않고, 런타임 중 문제를 일으킨다.

 

위 코드에서 Person 타입을 없애도 오류를 일으키지 않는다.

이는 ts의 두 타입의 구조만을 가지고 호환성을 결정하는 구조적 타입 시스템 때문이다.

즉, ts에선 서로 다른 타입이여도 멤버가 서로 일치한다면 두 타입은 서로 호환되고 표기할 필요가 없다.

 

type, interface는 런타임동안 객체를 인스턴스화할 때, class는 값을 나타내는 데 사용해야 하는 경우 사용한다.
type, interface는 js 코드로 컴파일되지 않아 용량이 적어지고 class는 컴파일되기 때문에 용량이 커진다.

 

구조적 타입 시스템과 명목적 타입 시스템

number, string 등의 원시 타입은 이름만 가지고 있지만, 객체 클래스 등의 복잡한 타입은 이름 + 많은 프로퍼티를 가지고 있다.

여기서 두 개의 타입이 있을 때 구분하는 방법은 언어마다 다르다.

java와 일부 언어는 명목적 타입 시스템을 가져 같은 패키지 안에 같은 이름으로 선언된 클래스를 동일하다고 판단한다.

class Person {
    String name;
}

class Customer {
    String name;
}

Customer cust = new Person();

위 코드를 java에서 실행하면 오류가 발생한다.

 

하지만 이를 ts로 바꿔서 실행해보자.

ts는 구조적 타입 시스템을 가져 위 코드를 실행해도 두 클래스의 타입 구조가 같기 때문에 오류가 일어나지 않는다.

 

객체 리터럴을 사용해 구조가 동일한 객체를 만들어 타입 변수나 상수에 할당해도 문제는 없다.

만약 Person 클래스 내 name 프로퍼티가 private이면 컴파일되지 않는다.

 

Person 클래스에 새로운 age 프로퍼티를 추가해도 오류는 발생하지 않는다.

이 경우 Person 타입은 Customer 타입에 할당할 수 있다고 말할 수 있다.

 

하지만 만약 Customer 클래스에만 age 프로퍼티를 추가한다면 오류는 발생한다.

참조된 변수 cust는 age 프로퍼티가 없으므로 Person 객체 내 age 프로퍼티의 메모리를 할당할 수 없다.

 

담소

class 머 이런 거 배우니까 머리가 엄청 어지러워졌다...

좀만 쉽게 설명해주세요 ㅜㅜ