[TS] 함수 타입 지정

** 유튜브 코딩앙마님 강의 보고 배운 내용을 정리한 글

https://www.youtube.com/playlist?list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0 

TypeScript 강좌

 

 

함수

함수 타입 정의

// 함수 타입 정의
// number 값을 리턴하기때문에 number
function add(num1:number, num2:number):number {
    return num1 + num2;
    // console.log(num1+num2); <- 결과를 리턴하지 않으면 함수 타입은 void
}

// boolean 값을 리턴하기때문에 boolean
function isAdult(age:number):boolean {
    return age > 19; 
}

매개변수

// ? : 옵셔널 파라미터. 선택적 매개변수.
function hello(name?:string):string {
    return `Hello, ${name || "world"}`; 
    // 매개변수 name이 없을때의 처리를 해줬지만 더 명시적으로 처리를 해줘야한다
    // 옵셔널이어도 타입은 지켜줘야 함.
    // 즉 이 함수에서의 name은 undefined이거나 string이어야만 에러 발생 X
}

const result = hello();
const result2 = hello('lala');
// const result3 = hello(123); // error

// 매개변수 기본값 지정
function hello2(name = "world"):string {
    return `Hello, ${name}`; 
}

// 선택적 매개변수는 필수 매개변수보다 앞에 올 수 없다
function hello3(name:string, age?:number):string {
    if (age !== undefined) {
        return `Hello, ${name}. You are ${age}`; 
    } else {
        return `Hello, ${name}`; 
    }
}

// 옵셔널 매개변수가 앞에오려면 이렇게 처리해야함
function hello4(age:number|undefined, name:string):string {
    if (age !== undefined) {
        return `Hello, ${name}. You are ${age}`; 
    } else {
        return `Hello, ${name}`; 
    }
}

console.log(hello4(undefined, 'lala'))

Rest 문법 사용시 타입 작성

// 나머지 매개변수의 타입 작성
// 나머지 매개변수는 매개변수의 개수가 바뀔수있음
// rest 문법으로 받은 나머지 매개변수는 배열형태로 들어오기때문에 타입을 배열형태로 사용
function add2(...nums:number[]) {
    return nums.reduce((result, num)=> result + num, 0);
}

add2(1,2,3); // 6
add2(1,2,3,4,5,6,7,8,9,10); // 55

this

// this
interface User {
    name: string;
}

const Sam:User = {name:'Sam'};

// 첫번째 매개변수로 this를 넣고 타입 지정
// 전달된 매개변수는 this를 제외하고 age부터 첫번째로 사용됨
function showName(this:User, age:number, gender:string) {
    console.log(this.name, age, gender)
}

// this를 Sam 객체로 강제함
const a = showName.bind(Sam);
a(30, 'm');

함수 오버로드

// 함수 오버로드
interface User2 {
    name: string;
    age:number;
}

// 전달받은 매개변수의 타입에 따라서 리턴하는 결과값이 다름.
// => 함수 오버로드 사용
// 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 함
function join(name:string, age:string):string;
function join(name:string, age:number):User2;
function join(name:string, age:number | string):User2 | string {
    if (typeof age === "number") {
        return {
            name,
            age,
        };
    } else {
        return "나이는 숫자로 입력해주세요."
    }
}

const sam:User2 = join("Sam", 30);
const jane:User2 = join("Jane", 30);