Typescript Functions, 타입스크립트 함수, 실습 예제

Typescript Functions

---

요즘 IT 기업들의 채용정보를 살펴보다 보면 상당수의 기업이 TypeScript를 원하거나 우대하는 것을 확인 할 수 있습니다. 면접준비를 하면서 Typescript 뭔지 왜 사용할지 정리해봤습니다.

 

 

타입스크립트 함수

---

프론트엔드 개발자로써 다양한 프로젝트를 개발할때 자주 사용되는  함수는 3가지 타입스크립트 타입을 정의할 수 있습니다.

• 함수의 파라미터 타입
• 함수의 반환 타입
• 함수의 구조 타입
  
  

Javascript 와 Typescript에 쓰이는 함수의 차이점을 이해하기 위해서 우선 간단한 함수를 만들어보겠습니다.

index.js

function Multipler( num1, num2 ) {
  return num1 * num2;
}

이어서 함수로 타입을 정의해보겠습니다.

index.ts

function Multipler(num1:number, num2:number):number {
  return num1 * num2;
}

// 함수 매개변수는 슷자만 입력 가능하며 
// return 결과도 역기 슷자로 나와야합니다.

index.ts

function PrintNumbers (num1:number, num2:number):void {
  console.log(num1, num2)
}

// return 값이 없을 경우 void 사용

 

---

 

 

함수와 매개변수

---

Typescript에서 함수의 매개변수를 정의하면  undefined나 null 등 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어옵니다. 측, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미합니다.  정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 특성을 설정하려면 옵션  "?" 를 이용할 수 있습니다. 

여기서 주의할 점은 필수 매개변수는 항상 옵션 변수보다 순서가 먼저 정의해야 합니다. 예를 들어, 
...  ( age?:number,  name:string ) 옵션 매개변수 먼저 항당하면 오류 발생하며 순서가 중요합니다.

 

간단하게 이름을 받아서 인사해주는 함수를 만들어보겠습니다.  이름은 옵션을 설정해 이름을 입력하면  
이름 불러서 인사하고 이름 없으면 안녕봄이라는 함수입니다.

문자열 안에 변수를 사용하고 싶다면  `${ name }`을 사용합니다.

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

const noName = hello(); // Hello, Spring
const withName = hello("Tom"); // Hello, Tom

const checkType = hello(12); // 오류 발생, 이름은 string만 가능

 

다른 매개변수 초기화 방법으로 정의해보면 이 방법은 ES6 문법과 동일합니다. 매개변서 이름 값을 string 타입은 "world" 으로 정해놓으면 옵션이나 타입을 따로 사용하지 않습니다.

function hello( name = "world") {
  return `Hello, ${name}`;
}

 

---

 

 

REST 문법이 적용된 매개변수

---

Rest 파라미터  현식으로 매개변수 항당해서 다른 방식으로 입력할 만큰 더해주는 예제입니다.
전에 num1, num2만 받아서 두 값을 더해주는 함수를 만들었으며 이번에 개수가 바꿔도 입력된 변수들 더해는 함수를 rest 파라미터를 사용해서 말들어보겠습니다.

여기서 우리가 사용할 reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 완전한 함수 대신에 화살표 함수를 사용하겠습니다. 할당될 매개변수 타입을 슷자인 배열으러 정의합니다.

let init = 0; // 초기화

function Add(...numbers:number[]){
  return numbers.reduce(
  (result, currentValue) => result + currentValue, 
  init
  );
}

console.log(Add(1,2,3)); // 6
console.log(Add(1,2,3,4,5,6,7,8)); // 36

 

---