타입스크립트를 쓰는 이유 _ 유튜브 코딩앙마

유튜브 코딩앙마, 타입스크립트 영상을 정리한 내용입니다.

우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못합니다. 자바스크립트로 변환하고 실행해야 합니다. 얼핏 봐서는 번거로울 것 같지만 타입스크립트를 쓰는 데는 이유가 있습니다. 아래와 같은 함수가 있을 때 자바스크립트는 에러를 띄워주지 않거나 원하는 결과를 얻지 못할 수 있습니다.

function add(num1, num2){
    console.log(num1 + num2);
}

add() // NaN
add(1) // NaN
add(1, 2) // 3
add(3, 4, 5) // 7 (12를 원했다면 당황할 것)
add('hello', 'world') // 'helloworld' (문자열도 더해준다고?)

add(1, 2) 말고는 원하는 사용방식이 아니고 원하는 결과도 얻을 수 없습니다. 자바스크립트는 이럴 때 경고를 하지 않습니다.

그리고 자바스크립트는 동적 언어로 런타임에 타입이 결졍되고 오류가 발견되면 알려주지만 타입스크립트는 정적 언어로 컴파일 타임에 타입을 결정하고 오류를 발견해줍니다.

function showItems(arr) {
    arr.forEach((item) => {
        console.log(item);
    })
}

show([1, 2, 3])
show(1, 2, 3) // forEach 메서드가 숫자를 만날때 동작할 때 레퍼런스 오류를 띄웁니다

위 예제들을 타입스크립트로 작성해보면, 에러가는 나는 부분은 빨간 밑줄이 그어지고 마우스를 호버하면 관련 안내문을 볼 수 있습니다.

function add(num1:number, num2:number){
    console.log(num1 + num2);
}

add() // 에러
add(1) // 에러
add(1, 2) // 3
add(3, 4, 5) // 세번재 숫자 에러
add('hello', 'world') // 문자열 에러

함수를 만들 때 의도했던 방식 외에 다른 방법은 모두 에러라고 표시합니다. 다른 사람이 만든 함수를 사용할 때 몇개의 인수를 어떤 타입으로 전달해야 하는지 찾아볼 필요가 없습니다.

function showItems(arr:number[]) {
    arr.forEach((item) => {
        console.log(item);
    })
}

show([1, 2, 3])
show(1, 2, 3) // 에러

위 코드에서는 숫자를 담는 배열을 표기합니다.