bind 적용 예시

( 참고 : 2024.03.06 - [프로그래밍/JavaScript] - [JS] call, apply, bind )

interface User{
  name: string;
}

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

function showName(this:User){
  console.log(this.name)
}
const a = showName.bind(Joey);
a() // ' "Joey" 


function showUserInfo(this:User, age: Number, gender : 'm' | 'f'){
  console.log(this.name, age, gender)
}
const b = showUserInfo.bind(Joey);
b(30, 'm') // '"Joey",  30,  "m"

 

 

 

함수의 리턴 값이 매개변수에 따라 다른 경우

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

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

const joey : User = join("Joey", 30); // <- 컴파일 에러 발생
const sam : string = join("sam", "30"); // <- 컴파일 에러 발생

 

해결방법 : 함수 오버로드를 사용

  • 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게하는 것을 의미한다.
interface User{
  name: string;
  age: number;
}


function join(name: string, age: number): User; // 함수 오버로드
function join(name: string, age: string): string; // 함수 오버로드
function join(name: string, age: number | string): User | string {
  if (typeof age === "number"){
    return {
      name,
      age
    }
  } else {
    return "나이는 숫자로 입력해주세요."
  }
}

const joey : User = join("Joey", 30);
const sam : string = join("sam", "30");

 

 

참고한 강좌 : https://www.youtube.com/watch?v=prfgfj03_VA&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=4 

'프로그래밍 > TypeScript' 카테고리의 다른 글

[TS] 유니온 Union Types  (0) 2024.03.06
[TS] 리터럴 타입 (Literal Types)  (0) 2024.03.06
[TS] 함수  (0) 2024.03.06
[TS] 인터페이스(interface) 사용방법  (0) 2024.03.05
[TS] 타입스크립트를 사용하는 이유  (0) 2024.03.05

+ Recent posts