TypeScript

타입스크립트는 자바스크립트의 슈퍼셋이다. 자바스크립트의 기능 + 타입체크 기능까지 추가했기 때문에 타입스크립트는 자바스크립트 보다 더 큰 범주라고 할 수 있다.
그러면 이제 타입스크립트를 쓰는 이유에 대해서 말해보겠다.

타입스크립트를 쓰는 이유는 자바스크립트에서 발생할 수 있는 에러를 미리 방지해주기 때문이다.

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

를 했을 때

console.log(add("5", "10"));

를 해버리면 우리는 15라는 값을 원했는데 510이라는 값이 출력 될 것이다. 저것을 제대로 계산하게 하려면

function add(a,b) {
        if (typeof a === "number" && typeof b === "number"){
            return a+b;
        }
        else {
            return +a + +b;
        }
 };

이런식으로 해야 한다. 코드도 길어지고 별로 코드가 깔끔하지 못 하다. 변수 앞에 +를 붙여주면 number타입으로 바꿔준다. 타입스크립트를 적용하면

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

와 같이 사용할 수 있다. 만약 a와 b에 number가 아닌 다른 타입의 값을 넣어주게 되면 IDE에서 에러라고 가르쳐주게 된다. 또는 트랜스파일할 때 에러라고 알려준다!! 이 타입스크립트의 장점이 또 IDE에서 함수나 타입, 메소드 지원 등이 잘 된다는 것이다.

const s = [1,2,3,4];

하고 s. 을 하면 배열의 메서드들이 무엇이 있는지를 잘 알려준다. 그런데 함수를 해당 변수로 넣어주게 되면 그게 안 된다. 상당히 불편하다.

function addArray(array) {
        return array.reduce((result, current) => result+ current,0);
}

와 같은 함수를 작성할 때 Array.reduce가 기억이 나지 않아 array. 에서 ctrl + space를 하면 메서드들이 나오지 않는 것이다. 그러면 인터넷을 찾아보거나 다른 코드에 쳐서 확인해보거나 해야한다. 그럴 때 타입스크립트로 작성을 하면 무슨 메서드들이 있는지 잘 추론해낸다.

function addArray(array: number[]): number {
        return array.reduce((result, current) => result + current, 0);
} 

그 외에도 객체에 있는 key들도 잘 추론해내게 된다.

하지만 브라우저나 node는 typescript를 실행시키지 못 한다. 그래서 자바스크립트 파일로 트랜스파일 한다음에 실행시켜야한다. index.html 파일에 ts를 넣으면 안 되고 트랜스파일한 js파일을 넣어주어야한다.

타입스크립트를 사용해서 코드양이 늘어나고 타입들을 작성을 해줘야 해서 귀찮고 시간도 더 오래걸릴 수도 있지만, IDE를 더 효율적으로 사용할 수 있고 자신의 실수를 줄일 수 있고, 다른 사람이 작성 해놓은 함수나 변수를 제대로 된 용도로 사용할 수 있게 된다.

다음에는 TS를 설치하고 세팅하는 법을 적고 기본적인 사용 방법들을 적어보려고한다. 열심히 공부해야겠다!