Typescript 함수를 선언해보자!

Derek·2021년 3월 3일
0

typescript_study

목록 보기
3/6
post-thumbnail

안녕하세요, Derek 입니다. :)

대략 한달이라는 시간이 걸렸네요. 이전 게시물과의 업로드 시기가.

다시 갑시당.


1. Typescript 함수 선언

이전 게시물의 내용을 잠깐 복기하자면, 변수타입이 자유분방한 javascript 에 타입을 붙인 언어가 typescript 이며, 변수의 타입 선언같은 경우에는 아주 간단히 뒤에 타입을 붙이면 됩니다.

const stringExample: string = "hello";

이렇게요.


함수의 경우도 똑같다! 함수가 반환하는 타입과 함수에 쓰이는 인자의 타입을 중요시하면 된다.

C++ 에서는 함수 반환을 함수를 선언하며 맨 앞에 쓰는데, 아래와 같이 쓴다. 참고용으로 보기 바란다.

int sum(int number1, int numsber2) {
	return number1 + number2;
 }

위 코드에서는, sum 함수의 반환형과, 인자로 쓰이는 number1number2 의 타입이 선언되있음을 확인할 수 있다.

typescript 의 함수선언은 이와 아주 비슷하다.

1) 함수 인자 타입 선언

함수 인자에 먼저 타입을 선언해보자.

function sum1(a: number, b: number) {
    return a + b;
}

sum1 함수에 사용되는 a, b 에 대한 타입을 number로 정의했다. 아주 간단띠하다!

2) 함수 반환 타입 선언

그렇다면, 함수가 반환하는 값에도 타입을 선언해보자!

function add(): number {
    return 10;
}

간단하다! 함수 선언하며 뒤에다가 : number 을 적어서 타입을 정의했다.

그렇다면 이를 같이 써서 완벽한 typescript 함수선언을 해보자.

3) 함수 인자 및 반환 타입 선언

인자와 반환, 두 가지 모두 타입을 선언하자.

function sumFinal(a: number, b: number) : number {
    return a + b;
}

간단하다! a, b , 그리고 sumFinal() 뒤에 : number 를 붙여 완성했다. 아주 간단하다!

4) optional parameter

추가적으로, 함수의 인자가 있으면 쓰고, 없으면 그냥 안쓸 수 있는! 선언 방식이 있다.

function log(a: string, b?: string, c?: string): string {
    ...
}

이렇게 선언된 함수는,

log("hello")

와 같은 방식으로 사용될 수 있다.

인자 b, c 가 있으면 쓰고, 없으면 그냥 무시하고 함수를 수행하는, default parameter 와 비슷한 느낌인 친구다.

아마도 vanilla js 에는 없는 기능인듯 하다.


간단하게 typescript 함수 선언 방식을 살펴보았습니다.

다음 게시물은 중요한 interfacetype-alises 를 다뤄보겠습니다 :)

감사합니다.

profile
Whereof one cannot speak, thereof one must be silent.

0개의 댓글