본문 바로가기

Frontend/typescript

Typescript 배우기 4 ( 함수)

// 함수

function addNm(num1: number, num2: number): number {
  return num1 + num2;
}

addNm(1, 2);

// 매개변수
function Hello(name: string, age?: number): string {
  // 옵션 매개변수는 필수 매개변수 앞에 오면 안됨!
  // age: number | undefined, name: string 은 가능
  if (age !== undefined) {
    return `Hello, ${name || 'world'}. You are ${age}.`;
  } else {
    return `Hello, ${name || 'world'}`;
  }
  // name이 없을 경우 "world"가 출력되도록 지정했어도 ?를 사용해 보다 명시적으로 표현
  // ? 옵셔널파라미터
}
// function Hello(name = 'world'):string{
//   retrun `Hello, ${name}`;
// }
const result = Hello('Sam');
const result2 = Hello('Sam', 30);
// const result3 = Hello(123); // error
console.log(result, result2);

// 나머지 매개변수
function addSome(...nums: number[]) {
  return nums.reduce((result, num) => result + num, 0);
}

addSome(1, 2, 3, 4, 5); // 15

// This

interface Person {
  name: string;
  age: number;
}

const Sam: Person = {
  name: 'Sam',
  age: 30
};

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

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

// 함수 오버로드
// 전달받은 매개변수의 갯수, 타입에 따라 다른 동작을 하게 하는 것

function Join(name:string, age:number):Person;
function Join(name:string, age:string):string;
function Join(name:string, age:number|string):Person|string{
  if(typeof age === "number"){
    return {name, age};
  }else{
    return "나이는 숫자로 입력해 주세요.";
  }
}

const Tom: Person = Join('Tom', 30);
const Jane: string = Join('Jane', "30");

console.log(Tom, Jane)

https://www.youtube.com/watch?v=prfgfj03_VA 

https://yamoo9.gitbook.io/typescript/interface/function-types

 

인터페이스와 함수타입 - TypeScript Guidebook

인터페이스는 함수 타입도 정의할 수 있습니다. 함수를 할당 받을 변수에 인터페이스를 설정하면 함수 매개변수, 리턴 값 타입을 명시적으로 입력하지 않아도 오류는 발생하지 않습니다. 인터

yamoo9.gitbook.io

 

728x90