Typescript 공부하기 2일차 (2022.09.22)
1. 기본 Type
Typescript는 type을 나타내기 위해 타입 표기(Type Annotation)를 사용함
let str: string = "hi";
Typescript의 Type은 아래 세 가지 이다.
1) 기본 자료형(Primitive type): object와 reference 형태가 아닌 실제 값을 저장하는 자료형
- string
let str: string = "hi";- boolean
let isSucceeded: boolean = true;- number
let decimal: number = 6;- null: 값이 의도적으로 비워져있는 상태 (object)
let n: null = null;
typeof null // 'object'-undefined: 아무런 값이 할당되어 있지않은 상태 (undefined)
let u: undefined = undefined;
typeof undefined // 'undefined'- symbol (ES6 추가)
2) 참조 자료형(reference type): 객체, 배열, 함수 등과 같은 Object형식의 타입
- object: 기본 자료형을 제외한 모든 타입
function create(0: object): voide{}
create({prop : 0}) // 성공
create([1,2,3]) // 성공
create("string") // error- array: 배열
let arr: number[] = [1,2,3]
let arr: Array<number> = [1,2,3] // 제네릭을 사용한 타입 표기 가능- function
3) 추가 제공 자료형: 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: Car = Car[2];
enum Car {BUS=2, TAXI, SUV};
let taxi: Car = Car[3];- any: 모든 타입을 저장 가능, 컴파일 중 타입 검사를 하지 않음
- void: 보통 함수에서 변환 값이 없을 때, any의 반대 타입. 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
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);
}
2. Utility Types
- 공통 타입 변환을 용이하기 위해 제공
- 전역으로 사용가능
1) 종류
- Partial<T>: 프로퍼티를 선택적으로 만드는 타입 구성. 주어진 타입의 모든 하위 타입을 나타내는 타입을 반환.
- Readonly<T>: 프로퍼티를 읽기전용으로 설정한 타입 구성.
- Record<T>: 프로퍼티의 집합 K로 타입 구성. 타입의 프로퍼티들을 타입에 매핑시키는데 사용.
- Pick<T,K>: 프로퍼티 K의 집합을 선택해 타입 구성
- Omit<T,K>: 모든 프로퍼티를 선택 후 K를 제거한 타입을 구성.
- Exclude<T,U>: T에서 U에 할당할 수 있는 모든 속성을 제외한 타입 구성.
- Extract<T,U>: T에서 U에 할당할 수 있는 모든 속성을 추출하여 타입 구성.
- NonNullable<T>: null과 undefined를 제외한 타입.
- Parameters<T>: 함수 타입 T의 매개변수 타입들의 튜플 타입 구성.
- ConstructorParameters<T>: 생성자 함수 타입의 모든 매개변수 타입 추출. 모든 매개변수 타입을 가지는 튜플 타입(T가 함수가 아닌 경우 never)을 생성.
- ReturnType<T>: 함수 T의 반환 타입으로 구성된 타입 생성.
- Required<T>: T의 모든 프로퍼티가 필수로 설정된 타입 구성.
// 너무 많아서 다 쓰게 될지 의문. 있다는 것만 기억해두면 용법은 쓸 때 확인 해야할듯
3. Typescript로 함수 사용
1) 용어 정의
- 매개변수: 함수를 정의 할 때 사용되는 변수. (매개변수 == 인자 값 == Parameter)
- 인수: 함수를 호출할 때 사용되는 값.
function add(x, y) { // 매개변수: x, y
return x + y;
}
add(2, 5); // 인수 2, 5
- 일급 객체(first-class object)
ㄴ 정의: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 의미.
ㄴ 조건: 다른 함수에 매개변수로 제공 가능 / 한수에서 반환 가능 / 변수레 할당 가능
ㄴ JS와 TS의 함수는 일급 객체이다.
2) 함수 선언 방법 5가지
- 함수 선언식
function world(name) {
return `hello ${name}';
}- 함수 표현식
let world2 = function (name) {
return `hello ${name}';
}- 화살표 함수 표현식
let world3 = (name) => {
return `hello ${name}`;
}- 단축형 함수 표현식
let world4 = (name) => `hello ${name}`;- 함수 생성자 (권장X)
let world5 = new Function("name", 'return "hello" + name');* TS함수 작성 시 반환 타입을 추론 하도록 하는 것을 권장
* 함수의 매개변수와 인수의 타입이 호환 가능하게 작성
* 인수의 타입을 잘못 전달 시 에러 발생
3) 매개변수
- 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다.
- 선택적 매개변수(Optional Parameter)
ㄴ JS에서는 모든 매개변수가 선택적으로 인수가 없다면 undefined가 됨
ㄴ TS에서도 선택적 매개변수 사용 가능. 변수명 뒤에 '?' 사용
function buildName(firstName: string, lastName?: string) {
// 위의 'lastName?'에서 '?'를 사용하여 '선택적 매개변수'를 사용하였다.
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}- 기본-초기화 매개변수(Default Parameter)
ㄴ TS에서는 값을 제공하지 않거나 undefined로 했을 때, 매개변수의 값 할당 가능.
function buildName(firstName: string, lastName = "Smith") {
// 위의 'lastName = "Smith"'에서 "Smith"를 'Default Parameter'로 할당하였다.
return firstName + " " + lastName;
}- 나머지 매개변수(Rest Parameter)
ㄴ 컴파일러는 생략 부호(...) 뒤의 인자 배열을 빌드하여 한수에 사용할 수 있다.
ㄴ 나머지 매개변수는 매개변수의 수를 무한으로 취급한다.
ㄴ 아무것도 넘겨주지 않을 수도 있다.
function buildName(firstName: string, ...restOfName: string[]) {
// restOfName = ['Samuel', 'Lucas', 'MacKinzie']
return firstName + " " + restOfName.join(" ");
}