본문 바로가기

개발에 도움이 되는/TypeScript

TypeScript 기본 (Function)

- Function

매개변수 및 return 값에 대한 type을 지정

 

- 기본

function 함수명(매개변수: type): return type {  // 아무것도 return 하지 않으면 void

}

 

// arrow function

const 함수명 = (매개변수: type) : return type => {

}

 

ex)

function add(num1: number, num2: number) : number{

    return num1 + num2;

}

 

- 선택적 매개 변수 (Optional)

ex)

function sayHello(name?: string): string {

    return `Hello, ${name || "world"}`;

}

const result = hello();

const result2 = hello("An"); // 둘 다 가능

 

// 같은 형태 (매개 변수에 default 값 할당)

function sayHello(name = "world") : string {

    return "Hello, ${name}";

}

 

선택적 매개 변수는 당연히 optional 하기 때문에 여러 개의 매개 변수 설정 시 맨 앞에 설정할 수 없다.

 

 

- 나머지 매개 변수

ex)

// 전달받은 매개 변수들을 배열로 만듦

function add(...nums: number[]): number {

    return nums.reduce((result, num) => result + num, 0);

}

 

add(1, 2, 3);  // 6

add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

 

 

- this

this의 type을 명시할 때는 가장 맨 앞에 설정해준다.

 

ex)

interface User {

    name : string;

}

 

const An: User = {name: "An"};

 

function showName(this:User, age:number, gender: 'm' | 'f'){

    console.log(this.name, age, gender);

}

 

const an = showName.bind(An);

an(31, 'm'); // An 31 m

 

 

- overloading 사용

함수 매개 변수 type case에 따라 return type이 불분명할 때 overloading을 사용

 

ex)

interface User {

    name : string;

    age : number;

}

 

// overloading을 사용하지 않으면 type이 불분명하므로 error 발생

function join(name: string, age: string): string; // overloading

function join(name: string, age: number): User; // overloading

 

function join(name: string, age: number | string): User | string {

  if(typeof age === "number"){

    return { name, age};

  } else {

     return "나이는 숫자로 입력해주세요.";

   }

}

 

const an: User = join("An", 31);

const iu: string = join("IU", "30");

반응형