[타입스크립트] 타입스크립트에서의 함수

타입스크립트에서의 함수 이해하기

타입스크립트에서는 함수의 매개변수와 반환 값에 대한 타입을 명확하게 지정할 수 있다. 이렇게 하면 코드의 안정성을 높이고, 예상치 못한 오류를 방지할 수 있다.

타입스크립트에서 함수 선언하기

타입스크립트에서 함수를 선언하는 방법은 JavaScript와 거의 동일하다. 다만, 매개변수와 반환 값에 타입을 지정할 수 있다는 점이 다르다.

//함수 선언식
function add1(x: number, y: number): number {
  return x + y;
}
//함수 표현식 
const add2= function (x: number, y: number): number {
  return x + y;
}
//화살표 함수
const add3=(x: number, y: number):number=>{
  return x + y;
}

타입 추론

타입스크립트는 타입 추론을 지원하여, 코드를 간결하게 유지할 수 있도록 돕는다. 예를 들어, 함수의 반환 값의 타입을 명시적으로 지정하지 않아도, 타입스크립트가 반환 값의 타입을 추론할 수 있다.

function add(x: number, y: number) {
  return x + y; // `number` 타입을 반환한다는 것을 타입스크립트가 자동으로 추론한다.
}

함수 타입 작성하기

Type Aliases으로 함수의 타입을 정의한 후에는 이 타입을 사용해 함수를 선언할 수 있다.
Type Aliases

type GreetFunction1 = (name: string) => string;
let greet1:GreetFunction1 = (name) => {
  return "Hello, " + name;
};

//리턴이 없는 경우 void
type GreetFunction2 = (name: string) => void;
let greet2:GreetFunction2 = (name) => {
  console.log("Hello, " + name);
};

위 코드에서 greet는 GreetFunction 타입이므로, name이라는 string 타입 매개변수를 받고 string을 반환하는 함수를 할당해야 한다.

함수 타입을 명시적으로 작성하면, 함수의 동작을 이해하기 쉽고 코드의 안정성도 높일 수 있다. 따라서 가능한 한 자세하게 타입을 정의하고 사용하는 것이 좋다.

선택적 매개변수와 기본 매개변수

타입스크립트는 선택적 매개변수를 지원하며, 이는 매개변수 이름 뒤에 '?'를 붙여 지정한다. 기본 매개변수도 지원하며, 이는 매개변수에 기본값을 할당함으로써 지정한다.

function buildName(firstName: string, lastName?: string) {
  return firstName + " " + (lastName || "Smith");
}

// 기본 매개변수
function buildName(firstName: string, lastName = "Smith") {
  return firstName + " " + lastName;
}

나머지 매개변수

나머지 매개변수를 사용하면 수많은 매개변수를 하나의 배열로 그룹화할 수 있다.

function buildName(first: string, ...rest: string[]) {
  console.log(first,rest)

}
buildName('a','string','asd')//[LOG]: "a",  ["string","asd"]

타입스크립트에서 함수를 사용하는 것은 JavaScript와 크게 다르지 않지만, 타입 정보를 추가하므로써 코드의 안정성을 높일 수 있다는 장점이 있다.