본격적으로 타입스크립트에 대해 알아보고자 합니다. 타입스크립트란 무엇인지, 어떤 특성들이 있고, 사용하면 어떤 점이 좋은지를 알기 위해서 타입스크립트 튜토리얼로 공부합니다. 문서를 읽으면서 스스로 이해한 내용을 함께 정리하고자 합니다 :)
TS for the New Programmer
[js의 특이점]
JS는 빠른 사용을 위해 설계되었지만 몇몇 문제가 있음.
let x = 1;
let y;
console.log('1번', 1<x<3, 1<y<3); // true, true
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
console.log('2번:', area); // NaN => obj가 객체 타입이라서 나는 오류
const obj2 = {...obj};
const area2 = obj2.width * obj.height;
console.log('area2', area2); // 150
console.log('3번:', 3/0); // Infinity대부분의 프로그래밍 언어는 이런 오류가 발생하면 오류를 표출하고, 일부는 코드 실행전인 컴파일 과정에서 오류를 표출해줌.
애플리케이션 규모가 커질수록 이처럼 버그 때문에 프로그램이 아예 실행되지 않는건 큰 문제가 됨.
cf. 정적 타입 언어 vs. 동적 타입 언어
타입을 확인하는 시점으로 구분.
정적 타입 언어: 코드의 상수, 변수, 함수 등에 대한 타입을 [컴파일 타임]에 확인하는 언어 (C, C++, Java, Rust, Go, Scala)
동적 타입 언어: [런타임 타임]에 확인하는 언어 (Perl, Ruby, Python, PHP, JavaScript)
cf. 데이터 타입이 필요한 이유?
값 저장 시 확보해야할 메모리 공간 크기를 결정하기 위함.
js는 동적 타입 언어 !
- 장점
- 컴파일 시 타입을 명시하지 않아도 되기에(개발자가 코드 짤때 타입을 지정해주지 않아도 되기에) 빠르게 코드 작성이 가능하여 개발 속도 향상
- 런타임에 타입이 결정되기에 (개발자가 값 재할당을 통해 변수 타입 변경 가능) 코드 짤 때 유연성이 높음.
- 단점
- 런타임에 타입 자동 변환이 일어나 타입 오류 발생 가능 (타입 자동 변환 => js 자체적으로 타입 자동 변환..?)
(런타임에 오류가 발생하면 심할 경우 프로그램이 작동하지 않을수 있어서 치명적!) - 런타임 에러는 디버깅이 어려움. 무거운 프로그램을 빌드하고 실행한 후에 파악해야하기 때문에 어디서 에러가 발생했는지 추적이 쉽지 않음.
(반면, 컴파일 에러의 경우 컴파일 과정에서 텍스트 에디터가 감지할 수 있어서 런타임 에러보다 좀더 빠른 단계에서 감지할 수 있음.)
[ 정적 타입 검사(A Static Type Checker) ]
정적 타입 검사자인 "타입스크립트"!
프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것으로,
어떤 오류인지, 어떤 것이 연산되는 값에 영향을 주지 않는지를 정하는 것.
[ts 사용 이유 ?]
프로그램 실행 전에 [값의 종류]를 기반으로 프로그램의 오류를 찾음.
=> 컴파일 단계에서 에러 감지 [컴파일 에러 발생] 가능하여, 개발 단계에서 개발자가 에러를 인지하고 처리할 수 있게 해줌!
[ TS ? 타입이 있는 JS의 상위 집합(A Typed Superset of JavaScript) ]
-
TS는 js와 구문(문법)을 공유하지만, 구문적으로 문제가 없으면 출력하는 js와 달리 타입적으로 문제가 있으면 오류 표출
ex) console.log(5 / []) => js는 'NaN' | ts는 오류 발생
js는 구문적으로 옳은 구문이라고 판단하여 NaN을 출력하지만, ts는 타입 측면에서 배열로 숫자를 나누는 연산이 옳지 않다고 판단해 오류를 발생합니다.
이처럼 ts는 지나치게 보수적으로 오류를 판단합니다. -
런타임 특성(Runtime Behavior)
js 런타임 ? 컴파일 과정을 마친 응용프로그램이 사용자에 의해서 실행되어지는 때
( 일반적인(?) 런타임 에러 ? 이미 컴파일이 완료되어 프로그램이 실행중임에도 불구하고, 의도치 않은 예외상황으로 인해 프로그램실행 중에 발생되는 오류
ex. 0으로 나누기 오류 / null 참조 오류 / 메모리 부족 오류 )
하지만 JS에서는 0으로 나누기는 런타임 예외로 처리하지 않음. ts는 js의 이런 런타임 특성을 공유함.
ts가 Js의 런타임 동작을 유지하는 것은, 프로그램 작동을 중단시키지 않고 두 언어간에 쉽게 전환할 수 있도록 하기 위함!
- 삭제된 타입 (Erased Types)
ts 컴파일러가 코드 검사를 마치면 타입을 삭제하여, 결과로 나온 일반 Js 코드에는 타입 정보가 없음.
타입이 지정되지 않은 코드는 ts가 추론한 타입으로 인해 프로그램 특성을 변화시키지 않음. (?)
- ts는 Js의 구문과 런타임 특성을 공유!
- ts는 컴파일-타임 타입 검사자가 있는 js의 런타임!
참조
https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-programmer.html
https://velog.io/@devhan/%EC%99%9C-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%ED%99%98%EC%98%81%EB%B0%9B%EB%8A%94%EA%B0%80-feat.%ED%83%80%EC%9E%85%EA%B3%BC-%EC%97%90%EB%9F%AC
