[TypeScript] 타입스크립트에서 타입힌트를 이용한 인자를 전달하는 방법 (기본, 인터페이스, 클래스)

기본적으로 사용하는 방법(인자를 파싱해서 전달해주는 방법)

const person = {
    name: "eric",
    age: 25,
    gender: "male"
}

// 인자를 파싱해서 전달해주는 방법 
const sayHi = (name: string, age: number , gender?: string): string => {    
    return `Hello ${name}, you are ${age}, you are a ${gender}`;
};

console.log(sayHi(name, age, gender));

전통적인 방법이다. 파라미터들을 전달해준다.

 

인터페이스를 이용한 호출

interface Human {
    name: string; 
    age: number;
    gender: string;
}

const person = {
    name: "eric",
    age: 25,
    gender: "male"
}

// 인터페이스로 전달하는 방법
const sayHi = (Person: Human): string => {
    return `Hello ${Person.name}, you are ${Person.age}, you are a ${Person.gender}`;   // interface의 속성을 파싱해서 전달해준다
}

console.log(sayHi(person));

타입스크립트에서는 인터페이스를 지원한다. 인터페이스는 자바스크립트로 컴파일 되지 않으며 사용방법은 인터페이스를 지정하주고 인터페이스에 맞는 객체를 선언후에 인자로 전달되는 곳에 (파라미터 명: 인터페이스)로 전달한다.

 

클래스를 통한 호출

class Human {
    public name:string;
    public age: number;
    public gender: string;

    constructor(name: string, age:number, gender?:string){ // 생성자(클래스로부터 객체를 만들때 호출)
        this.name = name;
        this.age = age;
        this.gender = gender;
    }   

}

const eric = new Human("Eric", 18, "male");

const sayHi = (Person: Human): string => {
    return `Hello ${Person.name}, you are ${Person.age}, you are a ${Person.gender}`;   // interface의 속성을 파싱해서 전달해준다
}

console.log(sayHi(eric));

자바스크립트에서는 클래스들의 속성들을 묘사할 필요가 없다.

하지만, 타입스크립트에서는 클래스가 어떤 속성(Property)들을 가져야 하는지 선언해야한다. 그리고 그들이 가지고 있는 속성들이 가지고 있는 접근 제어자를 통한 권한(Permission)도 선언을 해줘야한다.  

사용하는 방법은 아래와 같다.

 

1. 클래스와 생성자를 선언한다

2. 클래스를 통해 객체를 만들어 준다

3. 전달해주는 인자에 (파라미터 명: 클래스)로 전달해준다.