TypeScript
왜 타입스크립트인가
-
동적 타입을 정적으로 선언
-
타입 유추를 통한 타입 제어
-
컴파일 시점에 오류 포착
-
추가 코드 기능 제공
TypeScript 추가 제공 자료형
tuple
- 길이와 각 요소의 타입이 정해진 배열
let arr :[string, number] = ["Hi", 6];enum
- 특정 값(상수)들의 집합을 저장하는 타입
enum Car { BUS, TAXI, SUV };
let bus: Car = Car.BUS;
let bus: Car = Car[0]; // 인덱스로 접근
// 인덱스를 사용자 편의로 변경
enum Car { BUS = 1, TAXI = 2, SUV = 3 };
let taxi :String = Car[2];
enum Car { BUS = 2, TAXI, SUV };
let taxi :String = Car[3];any
- 모든 타입을 저장 가능(컴파일 중 타입 검사를 하지 않음)
let str :any = "hi";
let num :any = 10;
let arr :any = ["a", 2, true];void
-
보통 함수에서 반환 값이 없을 때 사용, any의 반대 타입
-
변수에 사용 시 null, undefined만 할당, 함수에 사용 시 반환 값이 없음을 의미
let unknown :void = undefined;
function sayHi() :void {
console.log("hi");
}never
- 발생할 수 없는 타입
- 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입
- 종료되지 않는 함수
function neverEnd() :never {
while (true) {}
}
function error(message :string) :never {
throw new Error(message);
}Utility types
- 이미 정의해 놓은 타입이나 인터페이스를 변화하고 싶을 때 사용
- 유틸리티 타입은 전역에 사용 가능하다.
Partial<T> : T의 프로퍼티를 선택적으로 구성
Readonly<T> : T의 프로퍼티를 읽기 전용으로 설정, 값을 재할당할 경우 에러 발생
Record<K, T> : 프로퍼티의 키를 K, 값을 T로 하는 타입을 구성
Pick<T, K> : T 타입 중에서 K 프로퍼티만 지정하여 타입을 구성
Omit<T, K> : T 타입의 모든 프로퍼티 중 K를 제거하여 타입 구성
Exclude<T, U> : 타입 T에서 U와 겹치는 타입을 제외한 타입을 구성
Extract<T, U> : 타입 T에서 U와 겹치는 타입만 포함하여 타입 구성
NonNullable<T> : T 타입에서 null과 undefined를 제외한 타입 구성
Parameters<T> : 함수 타입 T의 매개변수의 타입들의 튜플로 타입을 구성
ConstructorParameters<T> : 클래스의 생성자를 비롯한 생성자 타입의 모든 매개변수 타입을 추출
ReturnType<T> : 함수 T가 반환한 타입으로 타입을 구성
Required<T> : 타입 T의 모든 프로퍼티가 필수로 설정된 타입을 구성
TypeScript에서 함수 사용하기
// 함수 선언식
function world(name :string) :string {
return `hello ${name}`
}
// 함수 표현식
let world2 = function(name :string) :string {
return `hello ${name}`
}
// 화살표 함수 표현식
let world3 = (name :string) :string => {
return `hello ${name}`;
}
// 단축형 화살표 함수 표현식
let world4 = (name :string) :string => `hello ${name}`;함수의 매개변수
기본 매개변수(Parameter)
- 함수에 주어진 인자의 수는 함수의 매개변수의 수와 일치해야 한다.
function buildName(firstName :string, lastName :string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // Error
let result2 = buildName("Bob", "Adams", "Sr."); // Error
let result3 = buildName("Bob", "Adams");선택적 매개변수(Optional Parameter)
- 매개변수명 뒤에
? - 인자의 수가 기본 매개변수의 수만큼 들어오면 문제 없음
function buildName(firstName :string, lastName? :string) {
if (lastName) return firstName + " " + lastName;
else return firstName;
}
let result1 = buildName("Bob");
let result3 = buildName("Bob", "Adams");
let result2 = buildName("Bob", "Adams", "Sr."); // Error기본-초기화 매개변수(Default Parameter)
- 인수로 값이 들어오지 않거나 undefined일 때 매개변수의 값 할당
function buildName(firstName :string, lastName = "Smith") {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // "Bob Smith"
let result3 = buildName("Bob", undefined); // "Bob Smith"
let result3 = buildName("Bob", "Adams"); // "Bob Adams"
let result2 = buildName("Bob", "Adams", "Sr."); // Error나머지 매개변수(Rest Parameter)
- 컴파일러는 생략 부호
...뒤의 인자 배열을 빌드해 함수에서 사용 - 나머지 매개변수는 무한으로 취급
- 아무것도 없을 수 있다.
function buildName(firstName: string, ...restOfName: string[]) {
// restOfName = ['Samuel', 'Lucas', 'Mackinzie']
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "Mackinzie"); // "Joseph Samuel Lucas Mackinzie"출처
이 글은 엘리스 SW 엔지니어 트랙을 기반으로 작성되었습니다.
