[TS] 함수 / 리터럴, 유니온, 교차 타입 / 클래스

·

1. 함수

함수 타입 정의는 다음과 같이 한다.

function add(num1: number, num2: number): number {
    return num1 + num2;
}

function add(num1: number, num2: number): void {
    console.log(num1 + num2);
}

function isAdult(age: number): boolean {
    return age > 19;
}

인터페이스처럼 함수의 매개변수도 옵셔널로 지정할 수 있다.

name이 있으면 name을 쓰고 없으면 world를 출력하게 하는 코드다.
하지만 호출할 때 매개변수가 없어서 빨간 줄이 나타났다.
name이 없을 때의 코드가 있지만 타입스크립트에서는 보다 명시적으로 알려줘야 한다.

아래와 같이 물음표를 붙여 name을 있어도 되고 없어도 되는 옵셔널 파라미터, 즉 선택적 매개변수로 설정한다.

옵셔널이라고 하더라도 타입은 항상 지켜줘야 한다.
undefined거나 있다면 string이거나 둘 중 하나여야 한다.

참고로 자바스크립트에서 매개변수에 디폴트 값을 주는 방식을 이용한다면 다음과 같이 작성할 수 있다.

옵셔널 파라미터를 사용할 때 주의할 점은 선택적 매개변수가 필수 매개변수보다 앞에 오면 에러가 발생한다는 점이다.

옵셔널한 값은 입력을 안해도 된다는 의미이기 때문에 위와 같은 코드는 성립이 불가능하다.

age를 앞에 두고 사용하고 싶다면 아래와 같이 작성한다.

age를 number와 undefined를 받을 수 있게 해주고 명시적으로 undefined를 전달하는 방식이다.

나머지 매개변수의 타입 작성법은 아래와 같다.

나머지 매개변수는 개수가 매번 바뀔 수 있다.
점 세개를 사용하여 전달 받은 매개변수를 배열로 나타낼 수 있다.

this

여덟 번째 줄의 this는 사용하는 방법에 따라 달라진다.
위 코드에서는 bind를 이용하여 this를 Sam 객체로 강제하고 있다.
실행을 하면 Sam이라고 찍히는 것을 볼 수 있다.

빨간 줄이 나타나는 이유는 this의 타입이 결정되지 않았기 때문이다.
타입스크립트에서 this의 타입을 정할 때는 함수의 첫 번재 매개변수 자리에 this를 쓰고 타입을 입력해주면 된다.

매개변수가 있는 경우에도 제일 앞에 this의 타입을 적어준다.

전달한 인수는 this의 다음부터 첫 번째, 두 번째 순서대로 적용된다.

아래 코드의 join 함수는 일종의 validator 역할을 수행한다.
나이는 number 혹은 string을 받을 수 있고, 나이가 숫자라면 User를 반환하고 아니라면 string을 반환한다.

문제가 없어보이는 코드지만 빨간 줄이 쳐지는 이유는 sam이 User 객체를 반환하는 것에 확신이 없기 때문이다.
string을 반환할 수도 있다고 판단하는 것이다.

이러한 경우에는 오버로드를 사용한다.
함수 오버로드는 전달 받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 하는 것을 의미한다.
함수 위에 똑같은 모습으로 작성을 하면 된다.

sam에 생기던 빨간 줄이 사라졌다.
age가 숫자라서 User를 반환한다고 판단한 것이다.

동일한 함수지만 매개변수의 타입이나 개수에 따라 다른 방식으로 동작해야 된다면 위와 같이 오버로드를 사용할 수 있다.

2. 리터럴, 유니온, 교차 타입

리터럴 타입

자바스크립트에서는 변수를 선언할 때 const와 let을 사용한다.
const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용한다.

userName1은 string이지만 변할 수 없으므로 "Bob" 외의 값은 가질 수 없다.

userName2는 현재 "Tom"이지만 언제든 다른 값으로 변할 수 있으니 string 타입으로 정의된다.

userName2의 타입은 따로 명시하지 않았지만 3으로 바꾸면 에러가 발생한다.
최초에 할당한 값이 string이었기 때문이다.

3도 넣을 수 있게 만들어주려면 명시적으로 타입을 작성해줘야 한다.

userName1처럼 정해진 string 값을 가진 것을 문자열 리터럴 타입이라고 한다.

job 프로퍼티는 위에서 선언한 string만 사용할 수 있다.
stdunet는 Job에 없기 떄문에 에러가 발생한다.

숫자형 리터럴 타입도 사용이 가능하다.

유니언 타입

'|'는 유니언 타입이라고 한다.

Car와 Mobile 모두 색상을 가지고 있기 때문에 color를 찍는 것은 문제가 없다.
하지만 Car에만 start 함수가 있기 때문에 위처럼 작성할 시 에러가 발생한다.

동일한 이름의 속성(name)을 정의하고 타입을 다르게 주어 두 인터페이스를 구분할 수 있다.

이렇게 동일한 속성의 타입을 다르게 해서 구분할 수 있는 것을 식별 가능한 유니언 타입이라고 한다.

식별 가능한 유니언 타입 참고 자료

연산자를 이용한 타입 정의 | 타입스크립트 핸드북

교차 타입

교차타입은 여러 타입을 합쳐서 사용한다.
유니언이 A 또는 B 처럼 or의 의미였다면 교차 타입은 and를 의미한다.

타입을 & 기호를 이용해 적으면 모든 속성을 적어줘야 한다.

교차 타입은 여러개의 타입을 하나로 합쳐주는 역할을 한다.
그래서 필요한 모든 기능을 가진 하나의 타입이 만들어지는 것이다.

3. 클래스

자바스크립트에서는 아래와 같이 작성해도 문제가 없다.

하지만 타입스크립트에서는 클래스를 작성할 때는 멤버 변수를 미리 선언해야 한다.

멤버 변수를 미리 선언하지 않는 방법도 있다.
접근 제한자나 readonly 키워드를 이용하는 방법이다.

접근 제한자

ES6의 다른 객체지향언어들처럼 접근제한자를 지원하지 않았지만 타입스크립트에서는 지원한다.
접근 제한자는 public, private, protected가 있다.

public은 자식 클래스나 클래스 인스턴스에서 접근이 가능하다.
아무것도 표기하지 않고 작성하면 모두 public이다.

Bmw에는 showName이라는 메소드가 있고 멤버 변수 name을 보여준다.
super의 name, 즉 Car의 name이 public이기 때문에 자식 클래스 내부에서 접근해도 문제없이 사용이 가능하다.

명시적으로 name 앞에 public이라고 적어도 동일하다.

만일 접근 제한자를 private으로 바꾸면 에러가 발생한다.

자식 클래스 내부에서 사용할 수 없게 된 것이다.
name은 Car 클래스 내부에서만 사용할 수 있다.

private을 표현하는 또 다른 방법은 #을 적어주는 것이다.

사용하는 쪽도 모두 #을 붙여주면 된다.
#과 private의 기능상 차이는 없다.

접근 제한자 protected도 자식 클래스에서 접근이 가능하다.

그렇다면 protected와 public의 차이점은 무엇일까?

public으로 선언하면 클래스 인스턴스를 통해 접근할 수 있다.

protected는 자식 클래스 내부에서는 참조할 수 있으나 클래스 인스턴스로는 참조할 수 없다.

정리
public - 자식 클래스, 클래스 인스턴스 모두 접근 가능
protected - 자식 클래스에서 접근 가능
private - 해당 클래스 내부에서만 접근 가능

readonly

public의 경우 z4의 name을 바꿀 수 있다.

name을 수정할 수 없게 만들고 싶은 경우에는 readonly 키워드를 사용하면 된다.

읽기 전용 프로퍼티를 수정할 수 없어 에러가 발생한다.

만일 name을 바꾸고 싶다면 constructor 내부에서 그 작업을 할 수 있게 해줘야 한다.

Static

static을 써주면 정적 멤버 변수를 만들 수 있다.
static으로 선언된 정적 멤버 변수나 메소드는 this를 쓰는 게 아니라 클래스명을 적어준다.

추상 클래스

추상 클래스는 클래스명 앞에 abstract 키워드를 사용해서 만들 수 있다.
추상 클래스는 new를 이용해서 객체를 만들 수 없고 상속을 통해서만 사용이 가능하다.

추상 메소드는 반드시 상속 받은 쪽에서 구체적인 구현을 해줘야 한다.

추상화는 프로퍼티나 메소드의 이름만 선언해주고 구체적인 기능은 상속받는 쪽에서 구현해주는 것을 의미한다.

구체적인 기능을 정의하니 에러가 사라지는 것을 볼 수 있다.

---

📌 아래 강의의 내용을 정리한 글입니다.

• 코딩앙마 - 타입스크립트 강좌