타입스크립트를 사용하면 좋은 이유

타입스크립트 강의를 신청했고 들은 내용을 바탕으로 듣기만 하는 것이 아닌 직접 소스코드 짜보고 왜 그런지 이해하고자 하는 마음으로 정리를 해보고자 한다.

오류를 사전에 방지

티스토리라 그런지 코드가 안 이쁘게 나온다. 조만간 CSS 손좀 봐줘야 겠다. 타입을 미리 선언하여 vscode에 자동완성 기능을 넣어준다. 자바스크립트로 만들었을 경우에는 항상 console.log(response.data); 로 브라우저에서 확인을 한 다음에 다시 코드로 돌아와서 해당 키 값을 출력해주곤 했는데 그게 아니라 미리 소스코드에 타입을 정의해 놓는 것이다.

// 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 = {};

/**
 * @typedef {object} Address
 * @property {string} street
 * @property {string} city
 */
/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */
/**
 *
 * @returns {Promise<User>}
 */
const fetchUser = () => {
  return axios.get(url);
};

fetchUser().then(function (response) {
  console.log(response.data.address.city);
});

function startApp() {
  fetchUser()
    .then(function (response) {
      // console.log(response);
      user = response.data;
      console.log(user);
      username.innerText = user.name;
      email.innerText = user.email;
      address.innerText = user.address.street;
      // TODO: 이름, 이메일, 주소 표시하기
    })
    .catch(function (error) {
      console.log(error);
    });
}

startApp();

코드 가이드 및 자동완성에 대한 개발 생산성 향상

기존 자바스크립트로 구현을 했을 경우에는 result 경우 javascript api를 사용하려면 여러개가 나왔지만 typescript로 작성을 하였을 경우에는 number에 맞는 api만 자동으로 보여준다. 개발생산성이 더 향상되고 오류를 줄일 수 있다. 또한 타입에 대한 추론을 할 수 있어 어떤 값이 나올지 예측하기가 매우 용이하다.