타입스크립트를 쓰는 이유
- 동적 타입을 정적으로 선언 가능
- 타입 유추를 통한 타입 제어 가능
- 런타임이 아닌 컴파일 시점에 오류 포착
- Javascript에서 찾을 수 없는 추가 코드 기능 제공(?)
Typescript의 Type
- 기본 자료형(primitive type)
: object와 reference 형태가 아닌 실제 값을 저장하는 자료형
→ string, boolean, number, null, undefined
- 참조 자료형(reference type)
: 객체, 배열, 함수 등과 같은 Object 형식의 타입
메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력
→ object, array, function
- 추가 제공 자료형
: Typescript에서 개발자의 편의를 위해 추가로 제공하는 타입
→ tuple, enum, any, void, never
Utility Types
- Typescript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공
- 유틸리티 타입은 전역으로 사용 가능
→ Partial<
Type>: TYPE의 모든 속성을 선택적(?)으로 변경한 새로운 타입을 반환
→ Readonly<
Type>: TYPE의 모든 속성을 읽기 전용(readonly)으로 변경한 새로운 타입을 반환
→ Required<
Type>: TYPE의 모든 속성을 옵셔널에서 필수(required)로 변경한 새로운 타입을 반환
→ Record<KEY, TYPE>
: 제네릭의 KEY를 속성으로, 제네릭의 TYPE를 속성값의 타입으로 지정하는 새로운 타입을 반환
→ Pick<TYPE, KEY>
: 제네릭 TYPE으로 부터 제네릭 KEY에 해당하는 속성을 선택하여 따로 모아 타입을 반환
→ Omit<TYPE, KEY>
: 제네릭 TYPE으로 부터 제네릭 KEY에 해당하는 속성을 제외한 나머지들을 따로 모아 타입을 반환(<-> pick)
→ ExcludeL<T,U>
:유니언 TYPE1에서 유니언 TYPE2를 제외한 나머지 타입을 반환
→ Extract<T,U>
: 유니언 TYPE1에서 유니언 TYPE2 과 겹치는 부분을 추출
→ NonNullable<
T>: 유니온 Type에서 null과undefined를 제외한 타입을 반환
→ Parameters<
T>: 함수를 제네릭 TYPE으로 받아, 함수의 매개변수 타입을 튜플(Tuple) 타입으로 반환
→ ConstructorParameters<
T>: 클래스를 제네릭 TYPE으로 받아, 클래스 생성자의 매개변수 타입을 새로운 튜플 타입으로 반환
→ ReturnType<
T>: 함수를 제네릭 TYPE으로 받아, Return 타입을 반환
→ InstanceType<
T>: 클래스를 제네릭 TYPE으로 받아, 클래스의 생성자 인스턴스를 타입으로 반환
즉, new를 사용하여 생성된 인스턴스의 내용들을 타입으로 반환
Typescript와 함수
- 일급 객체(first-class-object)
: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
- 일급 객체의 조건
- 다른 함수에 매개변수로 제공 가능
- 함수에서 반환 가능
- 변수에 할당 가능
→ Javascript와 Typescript의 함수는 일급 객체이다.
- 함수 선언 방법
- 함수 선언식
- 함수 표현식
- 화살표 함수 표현식
- 단축형 화살표 함수 표현식
- 함수 생성자(사용 비권장)
→ Typescript 함수 작성 시 반환 타입을 추론 하도록 하는 걸 권장
→ 함수의 매개 변수와 인수의 타입이 호환 가능케 작성
→ 인수의 타입을 잘못 전달하면 에러 발생
타입 추론(contextual typing)?
: typescript의 컴파일러는 방정식의 한쪽에만 타입이 있더라도 추론이 가능
함수의 매개변수
- 기본 매개변수
- 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다!
- 선택적 매개변수(Optional Parameter) - Javascript에서는 모든 매개변수가 선택적으로, 인수가 없다면 undefined를 리턴한다.
- Typescript에서도 이처럼 선택적 매개변수를 사용할 수 있다.
→ 변수명 뒤 '?'
function buildName(firstName: string, lastName?: string) {
if(lastName) return firstName + "" + lastName;
else return firstName;
}- 기본-초기화 매개변수(Default Parameter)
- Typescript에서는 값을 제공하지 않거나, undefined로 제공 하였을 때 매개변수의 값 할당 가능
function buildName(firstName: string, lastName = "Smith") {
return firstName + "" + lastName;
}
let result1 = buildName("Bob"); // "Bob Smith"
let result2 = buildName("Bob", undefined); // "Bob Smith"
let result3 = buildName("Bob", "Adams"); // "Bob Adams"
let result4 = buildName("Bob", "Adams", "Sir."); // Error- 나머지 매개변수(Rest Parameters)
- 컴파일러는 생략 부호(...) 뒤의 인자 배열을 빌드해 함수에서 사용 가능
- 나머지 매개변수는 매개변수의 수를 무한으로 취급
- 아무것도 넘겨주지 않을 수 있다.
function buildName1(firstName: string, ...restOfName: string[]) {
// restOfNmae = [ 'Samuel', 'Lucas', 'Mackinzie' ]
return firstName + "" + restOfName.join(' ');
}
let employeeName = buildName1("Joseph", "Samuel", "Lucas", "Mackinzie");
// "Joseph Samuel Lucas Mackinzie"Typescript Compiler(TSC) 과정
-
개발자가 타입스크립트 코드를 작성
-
컴파일러가 타입스크립트 코드를 AST(추상구문트리)라는 자료구조로 변환
-
타입검사기(Typechecker)가 AST의 코드의 타입 안정성을 검증
-
타입스크립트 AST → 자바스크립트 소스로 변환
– 아래부터 브라우저, NodeJS, 기타 자바스크립트 엔진(node.js) 등이 수행—
-
자바스크립트 소스 → 자바스크립트 AST로 변환
-
자바스크립트 AST → Bytecode로 변환
-
JS 런타임이 Bytecode를 평가, 실행 결과 보여줌
출처 - [엘리스 강의 자료], [Inpa Dev님 블로그]
