TypeScript
정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾아낸다. JavaScript의 문제점을 보완하기 위해 Type이 있는 JavaScript의 상위 집합으로서 탄생했다.
✓ 정적 타입 검사자
프로그램을 실행시키지 않으면서 코드의 오류를 검출
JavaScript의 문제점
예를 들어 JavaScript의 동일 연산자 (==)는 인수를 강제로 변환하여 예기치 않은 동작을 유발한다.
if("" ==0) {
// true (??)
}
if(1 < x < 3) {
// 어떤 x값이던 true
}또한 JavaScript는 존재하지 않는 프로퍼티의 접근을 허용한다.
const obj = { width: 10, height: 15 };
// NaN (=Not a Number)
const area = obj.width * obj.height;대부분의 프로그래밍 언어는 이런 종류의 오류들이 발생하면 오류를 표출해주고, 일부는 코드가 실행되기 전인 컴파일 중에 오류를 표출한다. 작은 프로그램을 작성할 때엔 관리 가능하나 수백 수천 줄의 프로그램을 작성할 때엔 이러한 문제점이 심각하게 작용한다.
이러한 이유로 TypeScript는 일반적인 오류를 최대한 많이 검출하면서 올바른 프로그램을 좀 더 효율적으로 만들 수 있게 설계되었다.
Runtime 특성
TypeScript는 JavaScript의 런타임 특성을 가진 프로그래밍 언어이다. TypeScript는 JavaScript 코드의 런타임 특성을 절대 변화시키지 않는다. 즉 TypeScript가 코드에 타입 오류가 있음을 검출해도, JavaScript 코드를 TypeScript로 이동시키는 것은 같은 방식으로 실행시킬 것을 보장한다.
결론적으로 TypeScript는 JavaScript 프로그램과 같은 표준 라이브러리를 사용하므로 TypeScript 관련 프레임워크를 추가로 공부할 필요가 없다.
✍🏻 요약
- TypeScript는 컴파일-타임 타입 검사자가 있는 JavaScript의 런타임
- JavaScript 질문은 TypeScript에도 적용 가능
타입 정의
TypeScript는 데이터 타입이 무엇이 되어야 하는지 명시 가능한 JavaScript의 언어 확장을 지원한다.
Interface
예를 들어 name: string과 id: number를 포함하는 추론 타입을 가진 객체를 생성해보자.
interface User {
name: string;
id: number;
}이제 객체를 생성할 때 TypeName을 지정해 해당 객체가 interface의 형태를 따르고 있음을 선언할 수 있다.
const user: User = {
name: "Jenna",
id: 1,
}해당 인터페이스에 맞지 않는 객체를 생성하면 TypeScript는 경고를 준다.
타입 구성
여러 가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용되는 두 가지 코드로는 Union과 Generic이 있다.
Union
유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.
type MyBool = true | false;유니언은 다양한 타입을 처리하는 방법을 제공하는데, 예를 들어 array 또는 string을 받는 함수가 있을 수 있다.
function getLength(obj: string | string[]) {
return obj.length;
}Generic
제네릭은 타입에 변수를 제공하는 방법이다.
배열이 일반적인 예시이며, 제네릭이 없는 배열은 어떤 것이든 포함할 수 있다.
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;