본문 바로가기
언어의 기초/타입스크립트(Typescript)

[Typescript] 함수와 선언문

by 지에스정 2021. 2. 1.

타입스크립트에서 함수 선언문은 자바스크립트 함수 선언문에서의 매개 변수와 함수 반환값에 타입을 붙이는 형태이다

 

function 함수 이름( 매개변수1 : 타입1, 매개변수2, 타입2[,...]): 반환값 타입{
   함수 몸통
}
function add(a: number, b: number): number {
   return a + b
}

 

변수와 마찬가지로 함수 선언문에서도 타입 주석을 생략할 수 있으나, 타입이 생략되면 함수의 구현 의도를 알기 어렵다.

 

void 타입

 

값을 반환하지 않는 함수의 반환타입이다.

 

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

함수의 타입을 함수 시그니처라고 하는데, 아래와 같이 표현 될 수 있다.

 

let print:( string, number) => void = function (name: string, age: number): void {}

 

type 키워드 활용

 

타입스크립트에는 type이라는 키워드를 제공하며, 기존 존재하는 타입을 이름을 바꿔서 타입 별칭 기능을 제공한다.

 

type 새로운 타입 = 기존 타입

type strNumFunc = (string, number) => void

let f = strNumFunc = function( a: string, b: number): void {}

타입 별칭을 통해 간단하게 타입 주석을 붙일 수 있다.

 

undefined의 경우 매개변수로 호출해도 자식타입으로 간주되어 구문 오류가 발생하지 않지만,

 

코드를 실행하면 'Cannot read property ' 속성이름 ' of undefined' 라는 오류가 발생한다.

 

오류를 방지하기 위해 매개변수 값이 indefined인지 판별하는 코드를 작성해야 한다.

 

interface IName{
  name: string
}
function getName(o : IName) {
  return o != undefined ? o.name : 'unkown name'
}

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

 

인터페이스 선택 속성 처럼 선택정 매개변수의 지정이 가능하다.

 

function fn(name: string, age?: number): void{}

 

콜백함수를 표현할 때에는 다음과 같이 사용한다.

 

const f = (callback: () => void): void => callback()

 


매개변수 기본값 지정하기

 

선택적 매개변수는 항상 그 값이 undefined로 고정되기 때문에 어떤 값을 설정하고 싶다면 매개변수 기본값을 지정할 수 있다.

 

이를 디폴트 매개변수(default parameter)라고 한다

(매개변수: 타입 = 매개변수 기본값)
export type Person = {name: string, age: number}

 export const makePerson = (name: string, age: number = 10): Person => {
     const person = { name: name, age: age}
     return person
 }

 console.log(makePerson('Jack'))  // { name: 'Jack', age: 10}
 console.log(makePerson('Jack',33))  // { name: 'Jack', age: 33}

위를 간결하게 구현하기 위해 다음과 같이 하면 된다.

 

export type Person = {name: string, age: number}

 export const makePerson = (name: string, age: number = 10): Person => ({name, age})

 console.log(makePerson('Jack'))  // { name: 'Jack', age: 10}
 console.log(makePerson('Jack',33))  // { name: 'Jack', age: 33}

 


매서드

 

매서드란 function으로 만든 함수 표현식을 담는 속성이다.

 

method는 () => void 타입의 함수 표현식을 설정한다.

 

 class A {
     value: number = 1
     method: () => void = function(): void{
         console.log(`${this.value}`)
     }
 }

 let a: A = new A
 a.method()  // 1

 

위의 코드를 간결하게 구현하면 아래와 같다.

 

 class A {
     constructor(public value: number = 1){}
     method(): void{
         console.log(`${this.value}`)
     }
 }

 let a: A = new A
 a.method()  // 1