공식문서를 보며 작성하는 TS 첫 정리글

주수호·2022년 6월 13일
0

읽어본 페이지


Javascript

...
자바스크립트는 빠른 사용성을 위해서 설계된 언어이며, 몇백만 줄의 어플리케이션을 작성하는데에 특화된 언어이다. 자바스크립트는 고유의 이상한 점이 있으며, 이는 꽤 많은 문제를 일으키게 되었다.

if ("" == 0) {
  // 참입니다! 근데 왜죠??
}
if (1 < x < 3) {
  // *어떤* x 값이던 참입니다!
}

또한 존재하지 않는 property에 접근을 허용한다.

const obj = { width: 10, height: 15 };
// 왜 이게 NaN이죠? 철자가 어렵네요!
const area = obj.width * obj.heigth; // 철자 틀림 근데 NaN을 띄움

TypeScript: 정적 타입 검사자 (TypeScript: A Static Type Checker)

몇몇의 언어는 버그가 많은 프로그램을 아예 실행시키지 않습니다. 프로그램을 실행시키지 않면서 오류를 검사하는 것을 정적 검사라고합니다. 어떤 것이 오류인지와 어떤 것이 연산되는 값이 기인하지 않음을 정하는 것이 정적 타입 검사입니다.

// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

타입이 있는 JavaScript의 상위 집합 (A Typed Superset of JavaScript)

Javascript TypeScript는 어떠한 관계로 이루어져 있을까요?

TypeScript는 JS의 구문이 허용되는 JS의 상위 집합 언어입니다. 구문(Syntax)는 프로그램을 만들기 위해 코드를 작성하는 방법을 의미합니다. 아래와 같이 )가 없는 경우처럼요.

// @errors: 1005
let a = (4

TypeScript는 독특한 구문 때문에 JavaScript 코드를 오류로 보지 않습니다. 즉, 어떻게 작성돼있는지 모르지만 작동하는 JavaScript 코드를 TypeScript 파일에 넣어도 잘 작동합니다.


타입 (Types)

TypeScript는 다른 종류의 값들을 사용할 수 있는 방법이 추가된, 타입이 있는 상위 집합입니다.

// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

위의 obj.heigth 오류는 구문 오류가 아닌, 값의 종류(타입)를 잘못 사용해서 생긴 오류입니다.

아래와 같은 JavaScript 코드가 브라우저에서 실행될 때, 다음과 같은 값이 출력될 것입니다

console.log(4 / []);

구문적으로 옳은(syntactically-legal) 위 코드는 JavaScript에서 NaN을 출력합니다. 그러나 TypeScript는 배열로 숫자를 나누는 연산이 옳지 않다고 판단하고 오류를 발생시킵니다.

// @errors: 2363
console.log(4 / []); //에러 발생

TypeScript의 타입 검사자는 일반적인 오류를 최대한 많이 검출하면서 올바른 프로그램을 만들 수 있게 설계되었습니다.

만약 JavaScript 파일의 코드를 TypeScript 코드로 옮기면, 코드를 어떻게 작성했는지에 따라 타입 오류를 볼 수 있습니다. 이는 코드 상의 문제이거나, TypeScript가 지나치게 보수적인 것일 수 있습니다. 위와 같은 오류를 제거하기 위해 가이드는 다양한 TypeScript 구문을 추가하는 방법을 보여줍니다.


런타임 특성 (Runtime Behavior)

TypeScript는 JavaScript의 런타임 특성을 가진 프로그래밍 언어입니다. 예를 들어, JavaScript에서 0으로 나누는 행동은 런타임 예외로 처리하지 않고 Infinity값을 반환합니다. 논리적으로, TypeScript는 JavaScript 코드의 런타임 특성을 절대 변화시키지 않습니다.

즉 TypeScript가 코드에 타입 오류가 있음을 검출해도, JavaScript 코드를 TypeScript로 이동시키는 것은 같은 방식으로 실행시키는 것을 보장합니다.


삭제된 타입 (Erased Types)

TypeScript의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 “컴파일된” 코드를 만듭니다. 즉 코드가 한 번 컴파일되면, 결과로 나온 일반 JS 코드에는 타입 정보가 없습니다.

TypeScript가 추론한 타입에 따라 프로그램의 특성을 변화시키지 않는다는 의미입니다. 결론적으로 컴파일 도중에는 타입 오류가 표출될 수 있지만, 타입 시스템 자체는 프로그램이 실행될 때 작동하는 방식과 관련이 없습니다.

TypeScript는 프로그램은 JavaScript 프로그램과 같은 표준 라이브러리 (또는 외부 라이브러리)를 사용하므로, TypeScript 관련 프레임워크를 추가로 공부할 필요가 없습니다.


JavaScript와 TypeScript 학습 (Learning JavaScript and TypeScript)

정답은 JavaScript를 배우지 않고선 TypeScript를 배울 수 없다는 것입니다! TypeScript는 JavaScript와 구문과 런타임 특성을 공유하므로, JavaScript에서 배운 모든 것들은 동시에 TypeScript를 배울 때 도움이 될 것입니다.

정답은 JavaScript를 배우지 않고선 TypeScript를 배울 수 없다는 것입니다! TypeScript는 JavaScript와 구문과 런타임 특성을 공유하므로, JavaScript에서 배운 모든 것들은 동시에 TypeScript를 배울 때 도움이 될 것입니다.


애매한 표현들을 솎아내고 필요한 내용들만 정리해 보았습니다. 감사합니다.

profile
항상 준비하는 엔지니어

0개의 댓글