해당 글은 개인 공부용도로 작성되었으므로 참고바랍니다.
타입스크립트는 변수와 파라미터, 반환 값 등의 타입을 명시적으로 선언할 수 있다. 이로 인해 코드 작성 시 타입 관련 오류를 미리 찾을 수 있고, 런타임 에러를 사전에 방지할 수 있다.
01. 함수의 타입 선언
JavaScript
function sum(a, b) { return a + b; }
TypeScript
function sum(a: number, b: number): number { return a + b; }
함수에 타입을 지정할 때는 2곳에 지정이 가능하다.
- 파라미터
- 리턴 값
02. Void 타입
void 타입은 함수의 리턴 타입 중 하나로, 함수가 아무런 값을 반환하지 않을 때 사용된다. 로그를 출력하는 함수나 데이터를 저장하는 함수 등이 해당된다. 이벤트 핸들러 함수도 주로 특정 이벤트가 발생했을 때 호출되며 반환 값이 필요하지 않은 경우가 많은데, 이런 경우에도 void 타입을 사용할 수 있다.
function sum (a: number, b: number): void {
return a + b // number 형식은 void 형식에 할당할 수 없다.
}03. 인자
자바스크립트는 선언한 함수의 파라미터 개수와 인자의 개수가 일치하지 않더라도 에러를 발생시키지 않는다. 하지만 타입스크립트는 에러를 발생시키므로 함수의 인자를 모두 필수 값으로 간주한다.
function sum (a: number, b: number): number {
return a + b
}
sum(1) // 2개의 인수가 필요한데 1개의 인수를 가져옴.
sum(1,2)
sum(1,2,3) // 2개의 인수가 필요한데 3개의 인수를 가져옴.위 특성은 정의된 파라미터 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대된다. 만약 이러한 특성을 살리고 싶다면 ?를 이용해서 옵션 정의를 할 수 있다.
function option (a?: number) {
return a;
}
sum(10);
sum();하지만 아래와 같은 코드는 에러를 발생시킨다. 변수의 타입이 아직 확정되지 않았으므로 값을 변경시킬 수 없기 때문이다. 타입스크립트에서 + 연산자는 2개의 피연산자가 모두 숫자인 경우에만 수학적으로 덧셈을 수행하는데, 피연산자가 string 일 가능성이 있으므로 에러를 발생시킨다.
function plusOne(x :number | string){
return x + 1
} function myFunc(x? :number) :number {
return x * 2
} 파라미터를 옵션으로 정의할 경우 number | undefined 타입으로 정의되기 때문에 타입을 확정할 수 없어 에러를 발생시킨다.
04. Type Narrowing
function plusOne(x :number | string){
return x + 1 // '+' 연산자를 적용할 수 없다.
} 타입스크립트에서 + 연산자는 2개의 피연산자가 모두 숫자인 경우에만 수학적으로 덧셈을 수행하는데, 피연산자가 string 일 가능성이 있으므로 에러를 발생시킨다.
이러한 경우 Type Narrowing을 주로 해준다. Type Narrowing은 변수의 타입을 좁혀나가는 프로세스를 말한다.
function plusOne(x :number | string){
if (typeof x === 'number'){
return x + 1;
} else if (typeof x === 'string'){
return Number(x) + 1;
}
}if문과 typeof 키워드로 typeof x === 'number' 조건에서는 숫자 타입인 경우에는 그대로 x + 1을 반환하고, typeof x === 'string' 조건에서는 문자열을 숫자로 변환한 후에 Number(x) + 1을 반환하는 방식으로 처리할 수 있다. 과정이 번거롭긴 하지만 타입이 확실하지 않을 때 생기는 부작용을 막을 수 있다.
