Typescript - 05

함수 선언문

타입스크립트 함수 선언문은 자바스크립트 함수 선언문에서 매개변수와 함수 반환값(return type)에 타입 주석을 붙이는 다음 형태로 구성된다.

function 함수이름(매개변수1 : 타입1, 매개변수2 : 타입2,..) : 반환값 타입{
  메소드 필드
}

함수에 들어가는 요소인 매개변수와 반환값에 타입을 적어줌
(이 형태는 객체지향언어에서 많이 보았다... )

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

매개변수와 인수,인자
일반적으로 parameter는 매개변수라고 하고, argument는 인수 또는 인자라고 한다. 매개변수는 함수 선언문에서 함수 이름 뒤 괄호 안에 선언하는 변수, 인수(자)는 함수 호출할 때 전달하는 값을 말한다.

function add(a:number, b:number):number{
  return a + b;
}
// 이때 a와 b는 매개변수(parameter)이다.
let result = add ( 1, 2);
//이때 1과 2는 인수(arguments)이다. 

매개변수와 반환값의 타입 주석 생략

변수 때와 마찬가지로 함수 선언문에서도 매개변수와 반환값에 대한 타입 주석을 생략할 수 있다.
다만, 변수 때와는 달리 함수의 매개변수 타입과 반환 타입을 생략하는 것은 바람직하지 않다. 이유는 **타입이 생략되어 있으면 함수
void타입은 함수 반환 타입으로만 사용 가능하다.

function printInfo(name : string, age : number) : void {
  console.log(`name : ${name}, age : ${age}`)
}

위 코드는 반환 값 없이 출력 만 하고 있다.

함수 시그니처(function signature)

변수에 타입이 있듯이 함수 또한 타입이 있는데, 함수의 타입을 함수 시그니처라고 한다. 함수의 시그니처는 다음과 같은 형태로 표현한다.

(매개변수 1타입, 매개변수 2타입,..) => 반환값 타입

기명 함수표현식을 보면 쉽게 알 수 있는게 함수를 담아내는 변수 부분에 타입을 선언한다. 해당하는 타입을 화살표 함수로 표현할 수 있다.

let printInfo : (string, number) => void = function(name:string, age:number ):void{
  console.log(`name : ${name}, age: ${age}`)
}
//printInfo라는 함수는 string과 number의 매개변수와 void타입으로 리턴한다는 타입을 명시한 것이다. 

type 키워드로 타입 별칭 만들기

타입스크립트는 type이라는 키워드를 제공한다. type키워드는 기존에 존재하는 타입을 단순히 이름만 바꾸어서 사용할 수 있게 해주는데 이러한 기능을 타입 별칭(type alias)이라고 한다.

type 새로운 타입 = 기존 타입

string과 number타입을 받아서 string타입을 리턴하는 type 별칭을 만들고 새로운 함수를 만들어서 적용해 보자

type stringNumberFunc = (string, number) => string;

const printInfo : stringNumberFunc = (name : string, age : number) => 
`name은 ${name}이고 age는 ${age}`;

console.log(printInfo('kangmin', 23));
//name은 kangmin이고 age는 23

undefined 관련 주의 사항

undefined타입은 타입스크립트의 타입 계층도에서 모든 타입 중 최하위 타입이다. 타입을 고려하지 않으면 undefined도 오류를 발생 시킨다. 따라서 undefined에 대해서도 고려해서 작성 해야한다.

interface INameable{
  name : string
}

function getName(o : INameable){
  //return 값이 undefined일 때 고려하여 작성 함.
  return o != undefined ? o.name : 'unknown name'
}

let n = getName(undefined);
console.log(n);
console.log(getName({name : 'Jack'}))

만약 인터페이스 속성이 있다면 다음과 같이 구현해야 한다.

interface IAgeable{
  age ?: number
}

function getAge(o : IAgeable){
  return o != undefined && o.age ? o.age : 0
}

console.log(getAge(undefined));
console.log(getAge(null));
console.log(getAge({age:32}));

선택적 매개변수

함수의 매개변수에도 다음처럼 이름 뒤에 물음표를 붙여서 선택적 매개변수로 만들 수 있다.
선택적 매개변수는 매개변수 갯수에 따라서 다양하게 호출 하고 싶을 때 사용한다.

function fn(arg1:string, arg2 ?: number){
  arg2 != undefined ? console.log(`${arg1}, ${arg2}`) : console.log(`${arg1}`)
}

fn('hello'); // hello
fn('hello', 22); // hello, 22