[learn-typescript] typescript의 장점

 

 

 

📌 typescript를 써야하는 장점

 

 

📍장점 1. 에러의 사전 방지

 

타입을 명명하여 에러를 사전의 방지한다.

 

app.js

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

app.ts

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

 

 

👩‍⚖️

js의 경우, 타입이 number이 외의 타입이 들어오면 client 브라우저에서 에러 확인이 가능했으나

ts의 경우, 타입이 number 이 외의 타입이 들어오면 코드에서 에러가 나기 때문에 에러를 사전의 방지할 수 있습니다.

 

 

 

자바스크립트를 타입스크립트처럼 사용하는 방법

 

타입을 활용하여 사전의 값이 들어올 타입에 대해 미리 알 수 있다.

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

/**
 * @property {object} Address
 * @property {string} street
 * @property {string} city
 */

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */

/**
 * 
 * @returns {Promise<User>}
 */
function fetchUser() {
  return axios.get(url);
}

console.log(fetchUser());

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

startApp();

 

 

📍장점 2. 코드 가이드 및 자동완성

 

 

typescript는 함수 코드 자동완성 기능이 있다.

 

function add(a: number,b:number) : number{
    return a+b;
}
var result = add(10,20);

// 예를 들어 toL만 쳐도 자동완성 가능 !
result.toLocaleString();