타입스크립트/타입스크립트 소개와 배경

타입 스크립트 소개

webmaster 2022. 10. 3. 19:02
728x90

강의 핸드북 : https://joshua1988.github.io/ts/

 

타입스크립트 핸드북

 

joshua1988.github.io

공식 사이트 : https://www.typescriptlang.org/

 

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

www.typescriptlang.org

타입 스크립트란? 

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

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

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

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Why Typescript?</title>
  </head>
  <body>
    <h1>사용자 정보</h1>
    <div>
      <p>이름: <span id="username"></span></p>
      <p>이메일: <span id="email"></span></p>
      <p>주소: <span id="address"></span></p>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

app.js

// 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;
            // TODO: 이름, 이메일, 주소 표시하기
            console.log(user)
            username.innerText = user[0].name
            email.innerText = user[0].email
            address.innerText = user[0].address.street //글자를 틀리거나,오타를 내게 되면 화면에 오류가 나타난다 -> 안전하지 않다
        })
        .catch(function (error) {
            console.log(error);
        });
}

startApp();
  • user의 데이터 구조를 잘 모르는 상태에서 user에 접근하게 되면, 오타나 잘못된 접근을 할 확률이 높은데, 타입 스크립트를 사용하지 않는다면, 화면에 잘못된 데이터가 출력된 이후에나, 문제를 확인할 수 있다(안전하지 않다)

에러의 사전 방지

// 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>}
 */
function fetchUser() {
    return axios.get(url)
}
//콘솔로 찍기 전에는 fetchUser 결과를 알 수 없다.

fetchUser().then(function (response){
    //response.email //response 안에 어떤 데이터가 있는지 idea에서 확인을 할 수 있다.
    //response.address.city
})


function startApp() {
    fetchUser()
        .then(function (response) {
            //console.log(response);
            user = response.data;
            // TODO: 이름, 이메일, 주소 표시하기
            console.log(user)
            username.innerText = user[0].name
            email.innerText = user[0].email
            address.innerText = user[0].address.street //글자를 틀리거나,오타를 내게 되면 화면에 오류가 나타난다 -> 안전하지 않다
        })
        .catch(function (error) {
            console.log(error);
        });
}

startApp();
  • API docs(/** */)을 통해 타입을 사전에 정의하게 된다면, IDEA에서도 해당 데이터가 어떤 값을 반환하고, 타입이 존재하는지 알 수 있다.
  • 코드를 실제 실행해서 화면에서 출력해 보는 것이 아니라, 코드상으로도 어떤 데이터가 존재하는지 확인할 수 있기 때문에 에러의 사전방지가 가능하다.

코드 자동 완성과 가이드

sample.js

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

var result = sum(10, '20');//숫자 + 문자 = 1020이 출력
//result.toLocaleString() //자동완성 기능을 사용해서 메서드를 쓸 수 없다

sample.ts

function add(a: number, b: number): number { //반환 타입, 파라미터 타입까지 명시 가능
    return a + b
}

//add(10, '20'); //컴파일오류가 발생한다.
var result = add(10, 20);
result.toLocaleString() //자동완성으로 number가 제공하는 함수를 바로 사용할 수 있다.
  • 타입 스크립트를 사용하게 되면, 메서드가 반환되거나, 파라미터로 사용되는 타입을 알 수 있기 때문에 코드의 자동완성 기능을 통해 제공하는 함수를 바로 사용할 수 있다.

자바스크립트를 타입 스크립트처럼 코딩하기

//@ts-check
/**
 *
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 */
function sum(a, b){
    return a + b
}

sum(10, '20'); //ts에서 컴파일 오류가 났던거 처럼 오류를 알려주진 않는다 //@ts-check를 사용하면 잡아준다
  • docs를 사용해 파라미터에 어떤 타입이 들어갈지 써줄 수 있지만, 잘못된 타입을 쓴다고 컴파일 오류가 나진 않는다.
  • @ts-check를 사용하게 되면, typecheck가 일어나고, 컴파일 오류가 발생하긴 하지만, ts파일을 만드는 것이 깔끔하고 좋다
728x90

'타입스크립트 > 타입스크립트 소개와 배경' 카테고리의 다른 글

타입스크립트 시작하기  (0) 2022.10.03

'타입스크립트/타입스크립트 소개와 배경'의 다른글

  • 현재글타입 스크립트 소개

관련글

댓글

티스토리툴바