[스터디] 타입스크립트 개념 알아보기 2 (함수)

나리·2024년 8월 16일

타입스크립트의 함수에 대해 알아보도록 하자.
아래의 설명과 예재들은 코딩앙마님 영상을 참고하였다.

1. 선택적(optional) 매개변수

// 기본 함수 (오류발생)

function hello(name: string) {
  return `Hello, ${name || "world"}`;
}

const result = hello();

name 이 없을 시 "world" 가 나오도록 대비한 코드가 있지만 타입스크립트에서 이를 작성했을 시, 에러가 뜨게 될 것이다.

이는 보다 정확하게 타입을 지정해줘야 하는 타입스크립트의 특징 때문인데, 아래의 예시와 같이 name 앞에 ? 를 붙여줌으로써
'있어도 되고 없어도 된다!' 는 선택적 매개변수 (옵션) 를 추가해주면 된다.

// 타입을 보다 더 명시적으로 작성해줘야 한다
// ? : 있어도 되고 없어도 되는 optional 패러미터

function hello(name?: string) {
  return `Hello, ${name || "world"}`;
}

const result = hello();

⚡️ 추가 : 필수 매개변수 앞으로 선택적 매개변수는 올 수 없다.

// 필수 매개변수는 선택적 매개변수 뒤에 올 수 없다.

function hello(age?: number, name: string ): string {
    if (age !== undefined) {
      return `Hello, ${name}. You are ${age}.`;
    } else {
      return `Hello, ${name}`;
    }
  }

  console.log(hello("Sam"));
  console.log(hello("Sam,30"));


// 만약 사용하고 싶다면...
// age 혹은 undefined를 가져오도록 명시한다.

function hello(age: number | undefined, name: string): string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age}.`;
  } else {
    return `Hello, ${name}`;
  }
}

console.log(hello(30, "Sam"));
console.log(hello(undefined, "Sam"));

2. 나머지(rest) 매개변수

// 나머지 매개변수 
// ...을 사용하여 전달받은 매개변수를 배열로 표시
// 따라서 타입을 number[] 로 작성 

function add(...nums: 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

3. this 매개변수

// this 함수 (오류)

interface User {
    name: string;
}

const Sam: User = {name: 'Sam'}

function showName(){
    console.log(this.name)
}

const a = showName.bind(Sam);
a();

위와 같은 함수를 작성했을 시, vscode에선 빨간줄이 표시될 것이다. 이는 이미지와 같이 this 에 타입을 명시하지 않아서 생기는 것이다.

따라서, 함수 첫번째 매개변수 자리에 this:type 을 입력해야 한다.


// 함수 첫번째 매개변수 자리에 this:(type) 을 입력해야 한다.  

interface User {
    name: string;
}

const Sam: User = {name: 'Sam'}

function showName(this:User){
    console.log(this.name)
}

const a = showName.bind(Sam);
a();

⚡️ 추가 : 매개변수가 있을 때에도 타입을 지정해준다.


// 매개변수가 있을 때에도 타입을 지정해주면 된다. 

interface User {
    name: string;
}

const Sam: User = {name: 'Sam'}

function showName(this:User,age:number, gender: 'm'|'f'){
    console.log(this.name, age, gender)
}

const a = showName.bind(Sam);
a(30, 'm');

후기
타입스크립트를 조금씩 공부 중인데...
뭐라고 해야할까... 내가 자바스크립트로 엉망진창 헤헤 모르겠다
코딱지 후벼파며 써도 어떻게든 돌아갔다면
타입스크립트는 내가 조금만 삐끗하면...

이런 표정으로 꾸짖을 갈 외치는 느낌

나리

이전 포스트