본문 바로가기
  • 실행력이 모든걸 결정한다
Frontend/TypeScript

[TypeScript] 매개변수의 기본값 / 선택적 매개변수 / 제네릭

by 김코더 김주역 2021. 4. 23.
반응형

1. 매개변수의 기본값

매개변수에 기본값을 설정함으로써, 인자를 넣지 않아도 함수 호출이 가능하게 할 수 있다.

단, 기본값을 설정한 매개변수들은 맨 뒤쪽에 위치해야 한다.

 

예제

function user(age:number, str:string="noname"){
    console.log(age);
    console.log(str);
}

user(24);
user(26, "david");

 

실행 결과

 

 

2. 선택적 매개변수

변수명 뒤에 '?'를 붙여서 생략해도 되는 매개변수임 나타낸다.

단, 생략 가능하다고 선언한 매개변수는 기본값을 지정할 수 없다. 

 

예제

function user(age:number, str?:string, info?:string){
    console.log(age);
    console.log(str);
    console.log(info);
}

user(24);
user(26, "david");
user(28, "bella", "my friend");

 

실행 결과

 

 

3. 제네릭(Generic)

제네릭 타입이란 선언 시점이 아닌 사용 시점에 결정할 수 있는 타입을 의미한다.

여기서 중요한건 T라는 키워드인데 T는 타입 변수를 의미하며, 함수명이나 인터페이스명 뒤에 작성하여 사용하면 된다.

아래 예를 통해 이해해보자.

 

예제 1 - 제네릭 함수

save뒤에 <T>를 작성해서 제네릭 타입을 이용하는 함수임을 선언한다.

그리고 아래 예제를 통해 타입 변수(T)도 타입 추론을 통해 값이 설정될 수 있다는 점을 알 수 있다.

참고로, 타입 변수도 일반 변수처럼 동시에 한 개의 값만 가질 수 있기 때문에 data1와 data2의 타입이 다르면 오류가 발생한다.

function save<T>(data1:T, data2:T):string{
    return typeof data1;
}

console.log(save(1,2));
console.log(save([1,2,3],[4,5,6]));
console.log(save("hi","hey"));
console.log(save(true, false));

 

실행 결과

 

예제 2 - 제네릭 인터페이스

인터페이스에도 제네릭 타입을 적용할 수 있으며, extends 키워드를 통해 제네릭 타입에 제약 조건을 걸 수도 있다.

formB의 T는 boolean을 허용하지 않기 때문에 오류가 발생한 모습이다.

 

예제 3 - 조건부 타입

삼항 연산자를 이용하여 조건에 따라 타입을 다르게 지정할 수 있다.

age는 "24"처럼 문자열 형태로 입력할 수도 있고 24처럼 숫자 형태로 입력할 수도 있는데, 그 외의 데이터 타입은 부적절하기 때문에 never으로 지정해서 오류를 발생시킨다.

never에는 어떠한 타입도 적용할 수 없다.

반응형

댓글