[Typescript] TS, 다시 처음부터 읽기 (1)

이번에 새로 시작하게 된 프로젝트에서 next와 ts를 사용하게 되어, 

좀 더 잘 하고 싶어서 공부를 다시하게 되었다. 

 

타입스크립트란?

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.

Why 타입스크립트를 써야할까요?

자바스크립트도 충분히 복잡하고 어려운데 왜 또 다른 언어를 배워야 할까요? 단지 최신 기술이라서? 혹은 다른 회사도 많이 사용하니까 우리도 써야 하는 걸까? 라는 고민을 하게 됩니다. 타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다.

• 에러의 사전 방지
• 코드 가이드 및 자동 완성(개발 생산성 향상)

1. 에러의 사전 방지

타입스크립트는 에러를 사전에 미리 예방할 수 있습니다. 

즉, 의도하지 않은 코드의 동작을 예방할 수 있습니다.

 

2. 코드 자동 완성과 가이드

타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것입니다. 요즘에 프런트엔드 개발을 할 때 가장 많이 사용되는 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있습니다.

만약에 오탈자라도 났다면 이 js 파일을 브라우저에서 실행했을 때만 오류를 확인할 수 있었을 겁니다.

그런데 만약 아래와 같이 타입을 미리 지정하여 작성하면 타입스크립트는 이를 미리 걸러주게 되기 때문에 보다 편리한 도구입니다. 

const { response } = require("express");

// api url
var url = "https://jsonplaceholder.typicode.com/users/1";

// dom
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var address = document.querySelector("#address");

// user data
var user = {};

// adress도 정의해놓기
/** 
 * @typedef {object} Address
 * @property {string} street
 * @property {string} city 
*/

/**    //user타입
 * @typedef {object} User   //타입에 대한 타입 객체 프로퍼티 정의할 수 있음 typedef
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */

//console말고 js doc으로 확인하기  (/** * */)
/**
 *@returns {Promise<User>}   //{}는 제네릭 (타입이 잘보이게 함)
 */

//하나의 데이터만 받아오기
function fetchUser() {
  return axios.get(url);
}
  // console.log(fetchUser()); // 잘 돌아가나 확인
  fetchUser().then(function(response)) {}
  

function startApp() {
  // axios
  //   .get(url) //startApp과 동일하게 작용하는 fetchuser
  fetchUser()
    .then(function (response) {
      response.address.city //address에 이미 있는 속성들 city에 만약 오탈자가 난다면 타입스크립트는 미리 걸러줌(지금은 js도구로 사전에 정의해둠)
      console.log(response);
      user = response.data;
      // TODO: 이름, 이메일, 주소 표시하기
      console.log(user);
      username.innerHTML = user[0].name; // 첫번째 유저네임 가져다가 dom에 삽입
      email.innerText = user[0].email;
      address.innerText = user[0].address.street;
    })
    .catch(function (error) {
      console.log(error);
    });
}

startApp();

//////////
// // api url
// var url = "https://jsonplaceholder.typicode.com/users";

// // dom
// var username = document.querySelector("#username");
// var email = document.querySelector("#email");
// var address = document.querySelector("#address");

// // user data
// var user = {};

// function startApp() {
//   axios
//     .get(url)
//     .then(function (response) {
//       console.log(response);
//       user = response.data[0]; // 첫 번째 사용자 정보만 가져오도록 수정
//       displayUserInfo();
//     })
//     .catch(function (error) {
//       console.log(error);
//     });
// }

// function displayUserInfo() {
//   username.innerHTML = user.name;
//   email.innerHTML = user.email;
//   address.innerHTML = user.address.city; // 주소 중 도시 정보만 표시하도록 수정
// }

// // HTML 문서가 로드된 후에 startApp 함수 실행
// document.addEventListener("DOMContentLoaded", startApp);

 

가장 큰 장점은 js에서는 적용되지 않는 자동완성 기능 (intelliSense)가 타입스크립트에서는 잘 적용이 된다는 것이다. 

 

IntelliSense in Visual Studio Code

function sum(a, b) {
  return a + b;
}

var result = sum(10, 20);
result.to; // 자동완성 안됨

VS. 

타입스크립트