TypeScript : 함수 파라미터 애노테이션 : 개념, 예제, 설명

TypeScript : 함수 파라미터 애노테이션 : 개념, 예제, 설명

 

 

함수 파라미터 애노테이션

타입 애너테이션을 변수에 추가하는 법을 알아봤습니다. 암시적 타입 변환(implicit typing) 때문에 이건 흔히 쓰이진 않습니다. 이제 타입을 이용해서 함수 파라미터와 반환값에 할당하는 법을 살펴보겠습니다.

 

function square(num: number): number {
  return num * num;
}

square(3);

 

 

TypeScript에 함수를 작성할 때는 이전의 함수 구문과 같습니다. square라는 함수를 작성한다고 해봅니다. 숫자를 입력하니 num이라고 쓰고 num * num로 반환합니다. 3을 입력하면 3 곱하기 3이니까 반환값은 9가 됩니다. num에 마우스를 올리면 이 파라미터 num은 any 타입이 기본값으로 설정된다고 나옵니다.

이 말은 제가 숫자만을 전달하고 싶은데 다른 타입을 전달해도 TypeScript에서 막을 수 없다는 것입니다. 또한 어떤 문자열이나 불리언 값을 써도 오류가 안 생깁니다. 게다가 이 함수 본문 내도 상관 없습니다. 이 number가 숫자이든 숫자가 아니든지 num.toUpperCase를 해봅니다.

타입이 any일 경우 TypeScript는 일종의 관찰자가 됩니다. 문제가 있어도 아무 말도 하지 않고 조용히 앉아 있을 뿐입니다. num을 함수로 여길 수도 있습니다.

여기 애너테이션을 꼭 달아야 하는 건 아니지만 그렇게 하는 게 좋습니다. any 타입은 피해야 합니다. 함수의 두 파라미터에 애너테이션을 다는 방법은 변수에 애너테이션을 달 때와 동일한 구문을 사용하는 것입니다. 파라미터 name 뒤에 콜론과 학습한 타입 문자열을 넣습니다.

 

 

// Return type annotation:
function greet(person: string = "stranger"): string {
  return `Hi there, ${person}!`;
}

function square(num: number): number {
  return num * num;
}

square(3);
greet("Tonya Harding");

 

greet 함수는 단일 파라미터 person을 허용하고 타입은 문자열이어야 하며 Hi, person를 반환합니다. TypeScript에 타입을 number라고 입력합니다. 함수 이곳저곳에 빨간 밑줄이 생겼습니다. 숫자가 할당될 수 없습니다. TypeScript가 도와줍니다. 여기도 마찬가지입니다. 숫자를 함수로 호출할 수 없습니다.

아래에 문자열 타입은 가질 수 없고 숫자가 와야 한다고 쓰여 있습니다. 불리언도 올 수 없고 숫자여야 합니다. 이 작은 변화가 큰 차이를 만들었습니다. 동일한 구문으로 greet 함수를 써봅니다. string 타입을 갖는 파라미터 person을 입력합니다. 같은 구문이며 파라미터의 이름 콜론과 타입을 입력합니다.

person 위에 마우스를 올리면 문자열(string)이라고 타입이 나옵니다.  템플릿 리터럴로 `Hi there, ${person}!`을 입력합니다. 여기서도 같은 일이 발생합니다. TypeScript는 이 함수에서 person 타입을 string으로 압니다. 적어도 TypeScript의 추론에서는 하지만 JavaScript에서는 숫자로 전달하는 걸 신경 쓰지 않습니다.

그래서 TypeScript를 사용합니다. JavaScript를 쓰기 전에 문제를 잡기 위해서 person*person을 입력해 봅시다 성공하지 않습니다. 이건 산술 연산자이고 양쪽에 문자열 타입을 가진다고 합니다. 이렇게 할 수 없습니다. 함수 자체 내에서 도와줍니다. 물론 함수를 호출할 때도 greet 함수에 true를 전달하면 오류가 있다고 합니다.

문자열이나 숫자처럼 함수 파라미터가 여러 타입이 되도록 해야 할 수도 있습니다. 하지만 이건 고정이며 불리언과 숫자 둘 다 greet에 전달할 수도 없습니다. 문자열만 전달할 수 있고 square에는 숫자만 전달할 수 있습니다.