TIL 2022.10.28 Typescirpt 기본 3

함수 매개변수 옵션화

1. 매개변수에 ? 을 달아줌으로써 옵션화 가능

2. 매개변수가 없을 경우 들어갈 값을 주는 것으로 옵션화 가능

두개 같은 코드로 인식

 

 // x의 값이 없을 때 "world" 를 출력
 
function hello(x?: string): string {
    return `Hello, ${x || "world"}`;
}

function hello2(x = "world"): string {
    return `Hello, ${x}`
}

나머지 매개변수 타입 지정

받은 매개변수들이 배열 형태로 저장되기 때문에 배열타입 형태로 타입을 지정해줄 수 있다.

배열의 reduce() 함수는 배열을 순회하며 callback 함수의 실행값을 누적하여 하나의 결과값을 리턴해주는 함수

callback 함수를 정의해서 값을 받는 방법과 화살표함수를 사용해서 값을 얻어 낼 수 도 있다.

 

 

// callback함수 선언 후 이용
function sum_callback(result, num) {
    return result + num;
}
// 나머지 매개변수 옵션화
function sum(...nums: number[]) {
    return nums.reduce((result, num) => result + num, 0);
    // return nums.reduce(sum_callback);
}

this를 사용하고 싶을 때에도 매개변수 맨앞에서 this의 타입을 정의해주면된다.

함수를 실행할 때 bind()로 바인딩한 인스턴스의 값을 this를 이용해서 사용할 수 있다.

 

 

interface sss {
    name : string;
}
const Sam: sss = {name:'Sam'}
function show(this:sss, age:number, gender:'m' |'f'){
    console.log(this.name, age, gender)
}
const a = show.bind(Sam)
a(30, 'm') // "Sam", 30, 'm'

함수의 return 타입을 여러개로 하고 싶을 경우 각각의 경우에 따라 오버로딩 해주어야한다.

// 함수의 return 타입이 여러개일 경우 오버로딩하여 지정해줘야한다.
interface Info {
    name: string;
    age: number;
}
function many(name: string, age:string): string; 
function many(name: string, age:number): Info;
function many(name: string, age:number | string): Info | string {
    if (typeof age === "number"){
        return {
            name,
            age
        };
    } else {
        return "나이는 숫자입니다.";
    }
}
const abc : Info = many("aaa", 11);
const bcd : string = many("bbb", "22");