TypeScript 공부 #4

☘️함수

그 전 게시물을 보면 타입스크립트로 함수를 만들때에는 매개변수와 반환 값의 타입을 입력하였다.

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

만약 아무 값도 반환 하지 않을 거면 void 로 해준다.

function add(num1:number, num2:number): void {
    return num1 + num2
}

그 밖에도 원하는 형태로 수정하여 함수를 만들 수 있다.

function isBig(num1:number): boolean {
    return num1 > 100;
}

함수 - 옵션 속성

인터페이스처럼 함수에서도 옵션 속성을 설정할 수 있다.

매개변수의 변수 이름 뒤에 ? 를 붙인다.

그러면 함수를 호출할 때, name은 불러도 되고 안불러도 되는 옵셔널한 파라미터가 된다. 즉 선택적 매개변수가 된다.

function hello(name? : string){
    return `hello, ${name || 'world'}`; 
}

console.log(hello());
console.log(hello('짱잼'));

다음 코드를 실행하면 이와 같은 결과가 나온다.

함수 - REST 매개 변수

rest 매개 변수는 나머지 매개 변수로 불리며 매개변수가 ...name 형태로 뒤에 ... 이 붙게되며 여러 인자들을 배열로 받게 된다.

function add(...nums: number[]) {
    return nums;
}

console.log(add(1,2,3,4))

위 함수를 실행하면 배열이 출력되는 것을 볼 수 있다.

배열의 타입은 number[] 뿐만 아니라 Array 도 가능하다.

function add(...nums: Array<number>) {
    return nums[nums.length - 1];
}

console.log(add(1,2,3,4))

그래서 해당 함수를 실행하면 다음과 같이 출력된다.

함수 - this

name 속성이 있는 User 인터페이스를 만들고

User 타입으로 된 UserName 이라는 객체를 만든다.

 

그러고 showName 함수를 만들고 this의 name을 출력한다.

여기서 this는 bind를 통해 UserName 바인딩 한다.

interface User {
    name: string;
}

const UserName: User = {
    name: '짱잼'
}

function showName(this: User) {
    console.log(this.name)
}

const a = showName.bind(UserName);
a()

이를 실행하면 이름인 '짱잼' 이 출력된다.

함수 - 오버로드

함수에서 매개변수의 타입을 여러 종류를 받거나, 결과로 여러 타입을 반환하고 싶을 때, 오버로드를 사용한다.

 

만약 오버로드를 사용하지 않고 다음과 같이 코드를 작성하면 에러가 뜬다.

그래서 오버로드를 사용한다.

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

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

const a: User = join("짱잼",24);
const a1: string = join("짱잼","24");

console.log(a)
console.log(a1)

오버로드로 수정하고 실행하면 다음과 같이 제대로 출력이 된다.

---

☘️참고자료

[유튜브]TypeScript 강좌 - 코딩앙마

---

☘️마무리 하며...

타입스크립트 함수의 다양한 기능들을 알게 되었다. 공부하면서 왜 타입스크립트를 자바스크립트 보다 자주 사용하는 지 알게 되는 것 같다.