[TypeScript] 단단한 코드를 만들기 위한 타입스크립트

자바스크립트에는 자바처럼 타입을 정의 하지 않습니다 

 

예를들어 자바에서는

 

int value; 

라고 하면 value의 변수에는 숫자만 담기며 그 외에 타입 데이터가 담기면 오류를 출력합니다.

 

 

하지만 자바스크립트에서는

let value; 

라고 정의할 경우 value에는 어떤 값이 담길지 모릅니다.

개발하는 시점에서는 편할 수 있지만 다른사람이 이 코드를 봤을 때 어떤 값이 담길지 모릅니다.

 

예를들어 let value =5; 라고 했을 경우는 누구나 알 수 있습니다.

하지만 let value = getUserInfo() 라고 했을 경우 이 코드를 처음 본 사람은 value에 어떤 타입이 담길지 예측할 수 없죠

 

 

 

그래서 자바스크립트에서 이런 문제를 해결하기 위해 등장한 것이 타입스크립트 입니다.

 

 

 

그럼 타입스크립트를 사용해 어떻게 해결했을까요??

 

let value : number;

 

위와 같이 변수를 정의한 곳 옆에 ":" 기호와 함께 타입을 선언해 주었습니다.

간단하죠??

 

물론 타입과 다른 값이 담기면 오류를 발생시키죠

 

위 경우는 간단한 경우지만 만약 obj 타입이 왔을 경우 타입뿐 아니라 어떤 속성 값이 있는지 확인 가능합니다.

 

interface IUserInfo {   // 일반적으로 인터페이스명에 I를 붙힙니다.

    name: string;

    age: number;

    address: sring;

}

 

function getUserNameAndAge( obj : UserInfo) {

   return `${UserInfo.name} : ${UserInfo.age}`

}

위와 같이 함수의 값에 특정 obj가 들어올 경우 해당 obj에 어떤 속성값이 있는 확인이 불가능합니다 (로그를 일일이 출력하지 않는 한...)

위와같이 interface를 사용하여 이 함수에 사용할 obj를 미리 정의하면 코드를 더욱 쉽게 파악 할 수 있습니다.

 

 

 

 

이렇게 인터페이스를 사용하면 Javascript에서 DTO (Data Transfer Object)를 만들고 서버와의 통신정의를 보다 명확하게 할 수 있습니다.

 

만약 API 서버에 데이터를 요청했을 경우 데이터가 아래와 같이 json 형태로 온다고 가정합니다.

{

  userInfo : {

     "name" : "홍길동",

     "age" : 29,

     "address" : "서울 특별시 구로구 ..."

   }

}

 

그럴 경우 클라이언트에서 데이터를 받을 때 (Axios 사용)

 

let UserInfo=await axios.get('/api/getUserInfo')

이런식으로 데이터를 받을텐데 코드만 봐서는 UserInfo에 어떤 오브젝트 값이 들어가 있는지 알 수 가 없습니다.

(저흰 당연히 알고있죠 위에서 post로 온다고 가정한걸 봤으니)

 

이런 경우에 inteface를 정의하고 서버에서 이 값이 올 것이라고 미리 알려줍니다

interface IUserInfo {

    name: string;

    age: number;

    address: sring;

}

let UserInfo: IUserInfo =await axios.get('/api/getUserInfo')

 

 

 

 

이런식으로 자바스크립트에 타입스크립트를 사용하여 더욱 단단한 코드, 유지보수가 쉬운 코드를 작성 할 수 있습니다.

 

 

 

더 자세한 문법및 사용방법은 캡틴판교님이 만든 타입스크립트 핸드북을 참고해주세요.

 

타입스크립트 핸드북