DAY 24 - TIL

타입스크립트를 쓰는 이유

• 동적 타입을 정적으로 선언
• 타입 유추를 통한 타입 제어가 가능
• 컴파일 시점에 오류를 포착
• JS에서 찾을 수 없는 추가 코드 기능 제공

let a: numberl
a=1;
a="b";
//Type 'string' is not assignable to type 'number' .ts(2322)

 

타입스크립트의 Type

기본자료형

object와 reference 형태가 아닌 실제 값을 저장하는 자료형

primitive type 내장 함수를 사용 가능한 것은 JS 처리 방식 때문

• string
• boolean
• number
• null
• undefined
• symbol(ES6 추가)

참조자료형

객체,배열,함수 등과 같은 Object형식의 타입

메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력

• objcet
• array
• function

타입스크립트 제공 자료형

• tuple
• enum
• any
• void
• never

튜플

길이와 각 요소의 타입이 정해진 배열을 저장하는 타입

let tuple: [string, number];
tuple = ['a', 0];
console.log(tuple); // ["a", 0]

값으로 타입을 대신할 수도 있다. 처음 선언할 때의 값과 다른 값이 할당 되면 에러가 출력

let user: ['a', number];
user = ['a', 20]; // ["a", 20]
user = ['a', 30]; // ["a", 30]
user = ['b', 30]; // error

튜플은 정해진 타입과 고정된 길이의 배열이지만, 값을 할당할 때만 해당된다. push나 splice같은 메소드를 통해 값을 넣는건 막을 수 없음

let user: [string, number];
user = ['a', 20]
console.log(user); // ["a", 20]
user.push(30);
console.log(user); // ["a", 20, 30]

enum

특정 값(상수)들의 집합을 저장하는 타입

// 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

any는 모든 타입을 의미하며, 기존의 자바스크립트 변수와 마찬가지로 어떠한 타입의 값도 할당 가능

불가피하게 타입을 선언할 수 없는 경우, 유용

컴파일 중 타입 검사를 하지 않음

 

void

빈 타입인 Void는 리턴값이 없는 함수에서 사용

리턴값의 타입을 명시하는 곳에 작성하며, 리턴값이 없는 함수는 undefined를 반환한다.

 

//any
let str: any = "hi";
let num: any = 10;
let arr: any = ["a", 2, true];

// void
// 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
let unknown: void = undefined;
function sayHi(): void {
console.log("hi");

never

never 타입은 절대 발생할 수 없는 타입을 나타냄

항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 종료되지 않는 함수를 의미

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

error 함수는 오류를 발생시키기 때문에 null, undefined를 포함한 어떠한 값도 반환X  -> 이럴 경우 never 타입을 사용

 

Utility types

타입스크립트는 공통 타입 변환을 용이하게 하기위해 유틸리티 타입을 제공

유틸리티 타입은 전역으로 사용 가능

 

Partial<T>

프로퍼티를 선택적으로 만드는 타입을 구성

주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환

 

Readonly<T>

프로퍼티를 읽이 전용(readonly)으로 설정한 타입을 구성

 

Record<T,K>

프로퍼티의 집합 K로 타입을 구성

타입의 프로퍼티를 다른 타입에 매핑시키는데 사용 

interface PageInfo {
	title: string;
}
type Page = 'home' | 'about' | 'contact';
	const x: Record<Page, PageInfo> = {
	about: { title: 'about' },
	contact: { title: 'contact' },
	home: { subTitile: 'home' },  //Error
};

Pick<T,K>

프로퍼티 K의 집합을 선택해 타입을 구성

interface Todo {
	title: string;
	description: string;
	completed: boolean;
}
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
const todo: TodoPreview = {
	title: 'Clean room',
	completed: false,
	description: 'description’ // Error: 'description' is not assignable to type
};

Omit<T,k>

모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성

interface Todo {
	title: string;
	description: string;
	completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = {
	title: 'Clean room',
	completed: false,
	description: 'description' // Error: 'description' is not assignable to type
};

Exclude<T,U>

T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성

 

Extract<T,U>

T에서 U에 할당 할 수 있는 모든 속성을 추출하여 타입을 구성

 

NoNullable<T>

null과 undefined를 제외한 타입

 

Parameters<T>

함수 타입 T의 매개변수 타입들의 튜플 타입을 구성

declare function f1(arg: { a: number, b: string}): void
type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<(<T>(arg: T) => T)>; // [unknown]
type T4 = Parameters<typeof f1>; // [{ a: number, b: string }]
type T5 = Parameters<any>; // unknown[]
type T6 = Parameters<never>; // never
type T7 = Parameters<string>; // 오류
type T8 = Parameters<Function>; // 오류

ConstructorParameters<T>

생성자 함수 타입의 모든 매개변수 타입을 추출

모든 매개변수 타입을 가지는 튜플 타입(T가 함수가 아닌 경우 never)을 생성

 

ReturnType<T>

함수 T의 반환 타입으로 구성된 타입을 생성

 

Requred<T>

T의 모든 프로퍼티가 필수로 설정된 타입을 구성

 

타입스크립트를 이용해 함수 사용

매개변수 : 함수를 정의할 때 사용되는 변수를 매개변수, 인자값 == 매개변수 == Parameter

인수 : 함수를 호출할 때 사용되는 값을 인수

 

일급 객체

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

    조건

• 다른 함수에 매개변수로 제공 가능
• 함수에서 반환 가능
• 변수에 할당 가능

JS와 타입스크립트의 함수는 일급 객체

 

함수 선언 방법

• 함수 선언식
• 함수 표현식
• 화살표 함수 표현식
• 단축형 화살표 함수 표현식
• 함수 생성자 (권장X)

• 타입스크립트 함수 작성시 반환 타입을 추론하도록 하는 것을 권장
• 함수의 매개 변수와 인수의 타입이 호환 가능하게 작성
• 인수의 타입을 잘못 전달하면 에러 발생

타입 추론

타입스크립트 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론

프로그램에서 타입을 유지하기 위한 노력을 줄일 수 있음

let f12 = function (x: number, y: number): number { 
	return x + y;
}

let f12: (baseValue: number, increment: number) => number = function (x, y) {
return x + y;
}

 

함수의 매개변수 

 

기본 매개변수

함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야함

 

선택적 매개변수

JS에서는 모든 매개변수가 선택적으로 인수가 없다면 undefined

TS에서는 선택적 매개변수를 사용 - 변수명 뒤에 '?'

 

기본-초기화 매개변수

TS에서는 값을 제공하지 않거나, undefined로 했을 때에 매개변수 값 할당 가능

 

나머지 매개변수

컴파일러는 생략 부호(...) 뒤의 인자 배열을 빌드해 함수에서 사용가능

나머지 매개변수는 매개변수의 수를 무한으로 취급

아무것도 넘겨주지 않을 수도 있음