자바스크립트
잘 호환되는 적당한 프로그래밍 언어였던 자바스크립트가 명확하게 정의되고 사용량이 늘어가고 단순 정적 웹에서 다양한 상호작용이 가능한 웹으로 발전해 나가며 자바스크립트는 웹 뿐만 아니라 모바일 앱에서도 범용 가능한 엄청난 언어가 됨
더 이상 웹의 간단한 구동만을 도와주는 언어가 아니게 됨
(node js 등을 이용하여 서버를 구축한다거나 react native를 이용하여 모바일 앱을 만든다거나…)
그런데 이 초기 적당히 잘 호환되는 언어로부터 출발하게 된 것 때문인지
다른 언어들과 비교할 때 자잘한 문제들이 발생하기 시작 → 가장 큰 차이점 및 문제 타입
자바스크립트는 암묵적 변환이 아주 잘 일어나고 변수에도 별다른 타입이 없기 때문에 그 어떤 값이라도 대입이 가능
타입스크립트
자바스크립트의 상위호환, superset
아주 간단히 말하자면 자바스크립트에 타입이란것이 추가된 것
이런 타입은
- 잘못된 타입의 값을 변수에 대입하여 예상치 못한 값이 나오는 것을 방지해줌(NaN 같은)
- 느슨하게 작성했던 코드를 엄격하게 작성할 수 있도록 함
그렇지만 런타임 특성이나 구문, 심지어 라이브러리도 자바스크립트를 모두 따라가게됨
→ 상위 호환 언어이니 당연…
자바스크립트로 잘 작동하는 언어는 타입스크립트로도 잘 작동됨
다만 타입에 문제 있어보이면 경고로 알림
실행을 중지한다거나 그러지 않음
또한 타입스크립트는 구조적으로 타입을 비교; 덕 타이핑(duck typing)
→ 예를 들어 해당 인터페이스로 타입을 지정한 것이 아니라 일반 객체가 동일한 구조를 가지도록 설계하는 것은 동일한 타입이라고 판단(아래 코드블럭 참고)
그렇다면 성능적으로도 더 좋은가..?
그건 아님
타입스크립트는 자바스크립트를 그대로 사용하되, 각 변수들에 대해 타입을 명시하여 에러를 줄이고 협업을 돕는 역할
실제 실행할 때도 타입스크립트를 자바스크립트로 트랜스파일링하여 자바스크립트를 실행시키게 됨(컴파일러 트랜스파일러)
타입 사용
식별자, 매개변수, 함수 리턴값에 타입을 붙여 나타낼 수 있음
타입으로는 기본 원시값이나 새롭게 정의한 인터페이스를 사용할 수 있으며 하나의 타입 뿐만 아니라 유니언과 제네릭이라는 방법을 이용하여 여러 조건을 가지는 타입을 다룰 수 있음
// ------------원시 값 사용------------
function greet(user: string){
console.log(`hi, ${user}!`);
}
// ----인터페이스 사용하여 커스텀 타입 생성----
interface Person {
name: string;
birthday: number;
}
function addUser(user: Person) { ... }
const u = { // Person타입으로 선언하지 않았지만
name: 'Choi';
birthday: 903;
};
addUser(u); // 구조적 비교로 에러가 발생하지 않음
// ------------제네릭------------
const arr = Array<number>();
arr.push('hi'); // TypeError
interface custom<Type> {
add: (obj: Type) => void;
}
declare const instance: custom<String>;
instance.add(23); // TypeError: Type을 string으로 지정했기 때문에 다른 값이 오면 에러엄격도 사용
타입 검사 엄격도 플래그를 이용하며 여러 플래그가 있지만 핸드북에선 두 가지 중요한 플래그를 제시
noImplicitAny: any로 추론되는 변수에 대해 TypeError → any가 허용되면 타입스크립트의 의미가 퇴색strictNullChecks: null과 undefined에 대한 처리를 명확하게 해주었는지를 검사
