TypeScript란?
JavaScript 슈퍼셋으로, JavaScript에 정적 타입을 추가한 프로그래밍 언어다.
JavaScript vs TypeScript
차이점
타입 시스템 유무
자바스크립트는 런타임에 변수의 타입이 결정된다.
타입스크립트는 컴파일타임에 타입을 검사한다.
트랜스파일 유무
자바스크립트는 브라우저에서 직접 실행된다.
타입스크립트는 자바스크립트로 트랜스파일한 후 브라우저에서 실행된다.
JavaScript
장점
- 동적 타이핑을 사용하여 유연한 개발이 가능하다.
단점
- 동적 타이핑은 런타임 오류로 이어질 수 있다.
- 대규모 애플리케이션을 개발하고 유지 관리하기가 어려울 수 있다.
(반환 타입 등 쉽게 알 수 없어서 코드 가독성 및 유지보수성 저하)
TypeScript
장점
- 런타임 이전에 타입 오류를 발견할 수 있다.
- 대규모 프로젝트에서도 코드의 안정성을 높여 유지보수가 용이하다.
(안정성 -> 요류 감소, 테스트 용이)
단점
- 별도의 컴파일 과정이 필요하다.
타입 정의
Type
- 유니온 타입이 있다
- 인터페이스 확장 가능
- 선언적 확장 불가능
Interface
- 유니온 인터페이스는 없다
- 타입 확장 가능(유니온 등 불가능)
- 선언적 확장 가능: 같은 이름으로 선언하면 확장됨
타입 선언
interface Person { name: String };
const alice: Person = { name: 'Alice' };타입 체크
- 할당되는 값이 해당 타입을 만족하는지 검사한다
const alice: Person = {}; // 'Person' 유형에 필요한 'name' 속성이 '{}' 유형에 없습니다. - 잉여 속성 체크가 동작한다
잉여 속성 체크란?
타입에 선언된 속성 외에 속성이 있는지 체크하는 것
언제 사용할까?
타입 단언이 꼭 필요한 경우가 아니라면, 안정성 체크도 되는 타입 선언을 사용하는 것이 좋다
타입 단언
const bob = { name: 'Bob' } as Person;타입스트립트가 추론한 타입이 있더라도 Person 타입으로 간주
타입 체크
강제로 타입 지정
→ 타입 체커에서 오류를 무시하라고 하는 것
const bob = {} as Person; // 오류 없음타입 단언이 꼭 필요한 경우
타입 체커가 추론한 타입보다 개발자가 판단하는 타입이 더 정확할 때
DOM 엘리먼트
타입스크립트는 DOM에 접근할 수 없다.
document.querySelector('#myBtn').addEventListener('click', e => {
e.currentTarget; // EventTarget
const button = e.currentTarget as HTMLButtonElement;
});null이 아니라고 확신할 수 있을 때
const el = document.getElementById('foo')!;→ 접미사로 쓰인 !는 그 값이 null(혹이 undefined)이 아니라는 단언문으로 해석된다
타입 종류
리터럴 타입
리터럴 타입이란?
값 자체가 타입
const str = 'hello';
// const str: "hello"튜플
각 요소 자리에 타입이 고정되어 있는 배열
제네릭
- 타입을 파라미터처럼 사용하는 것
function getText<T>(text: T): T { const a: T = '' return text; } getText<string>(10); getText<number>(10); getText<boolean>(true); - 표기
- <>(홀화살괄호) 안에 타입 매개변수
- 인터페이스/클래스 이름 뒤에 위치
- 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용
Class
abstract
추상 클래스
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log("이동 중...");
}
}
class Dog extends Animal {
makeSound(): void {
console.log("멍멍");
}
}
const dog = new Dog();
dog.makeSound(); // 멍멍
dog.move(); // 이동 중...
연산자
typeof
값을 읽어서 타입을 반환한다
const person = {
name: "Alice",
age: 30
};
type PersonType = typeof person;
// type PersonType = {
// name: string;
// age: number;
// }어떻게 사용할까?
typeof와 함께 객체의 프로퍼티 key들을 유니온 타입으로 지정하기 위해 사용했다
const designToken = {
scale: {
xxs: 2,
xs: 4,
s: 8,
m: 12,
base: 16,
l: 24,
xl: 32,
xxl: 40,
xxxl: 48
}
};
type Scale = keyof typeof designToken.scale;리액트
@types/react 패키지
리액트는 자체 타입스크립트 지원이 없다.
커뮤니티 타입 @types/react를 설치해야 한다.
모듈 시스템
리액트 타입 정의에서 CommonJS모듈 시스템을 따른다.
// node_modules/@types/react/index.d.ts
export = React;따라서 ECMAScript 모듈 시스템과의 호환성을 위해 tsconfig 파일에 아래와 같이 설정한다.
{
"compilerOptions": {
"esModuleInterop": true,
}
}