우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못한다.
결국 자바스크립트로 변환해서 로드해야 사용할 수 있다.
굉장히 번거로울 것 같은데 어떤 장점이 있길래 타입스크립트를 사용하는 걸까?
function add(num1, num2) {
console.log(num1 + num2);
}
add() // NaN, 당연히 원하는 결과가 나오지 않는다.undefined와 undefined를 더했으니 NaN이 나왔다.
당연히 원하는 결과가 아니다.
function add(num1, num2) {
console.log(num1 + num2);
}
add(1) // NaN, 당연히 원하는 결과가 나오지 않는다.1과 undefined를 더해서 NaN이 나왔다.
function add(num1, num2) {
console.log(num1 + num2);
}
add() // NaN
add(1) // NaN
add(3,4) // 7
add(3,4,5) // 7
add("Hello", "World") // "HelloWorld"add(3, 4)를 제외한 나머지 코드들은 원하는 사용 방식도 아니고 원하는 값도 얻을 수 없었다.
하지만 자바스크립트는 아무런 경고도 주지 않았고 실수가 분명한 코드임에도 문제없이 실행되었다.
function showItems(arr) {
arr.forEach((item) => {
console.log(item);
});
}
showItems([1,2,3]) // 1 2 3
showItems(1,2,3) // Uncaught TypeError: arr.forEach is not a function배열이 들어오면 잘 전달되지만
배열이 아닌게 들어오면 레퍼런스 에러가 나온다. 왜냐면 숫자 1에는 forEach라는 메서드가 없기 때문이다.
Javascript(동적언어) : 런타임에 타입 결정 / 오류 발견
Java/ typescript(정적언어) : 컴파일 타임에 타입결정 / 오류발견
코드작성 시간은 길어지겠지만 초기에 생각을 많이해서 코드를 짜둔다면 안정적이고 빠르게 작업을 진행할 수 있는 장점이 있다.
위에서 만든 예제들을 타입스크립트로 만들어 본다.
타입스크립트로 작성하자 마자 빨간줄들이 많이 나온다. 이 상태에서 배포를 하는 개발자들은 없을 것 이다.
num1이 any타입이라고 나온다. 도저히 무슨 타입인지 모르겠으면 any타입을 쓰는 건데 가급적 사용하지 않는 것이 좋다.
지금은 아무 타입도 설정하지 않았으므로 타입스크립트가 any타입으로 판단한 상태이다.
옆에 있는 에러들은 2개의 인수가 필요한다 0개를 받았다, 1개를 받았다 라고 나온다. 타입스크립트가 "이건 개발자 실수야" 라고 알고 있는 것이다.
타입을 number로 지정해 주고 나서는 hello에 빨간 줄이 그어지는 것을 볼 수 있다.
함수를 만들 때 의도했던 방식 외에 다른 방법은 모두 에러라고 표시된다.
다른 사람이 만든 함수를 사용할 때 인수를 어떤 타입으로 전달해야 할지 코드를 일일이 뒤져볼 필요가 없다.
두 번째 함수도 마찬가지인 에러가 나온다.
arr의 타입을 number[] 숫자로 이루어진 배열이라는 타입으로 선언하면 에러가 없어진다. 만약 그냥 number로 설정하면 forEach쪽에 빨간줄이 그어지며 에러가 나올 것이다.
