1. Typescript

---

1.1 why TS?

1. 동적 타입을 정적으로 선언할 수 있다.
2. 타입 유추를 통한 타입 제어가 가능하다.
3. 컴파일 시점에 오류를 포착할 수 있다.
4. JS에서 찾을 수 없는 추가 코드 기능을 제공한다. (interface등)

---

1.2 basic type of TS

• TS는 JS코드의 변수나 함수에 type을 정의할 수 있고 이를 나타내기 위해 Type Annotation을 사용한다.

1. 기본 참조형(primitive type)
2. 참조 자료형(reference type)
3. 추가 제공 자료형

1.2.1 기본 자료형

• object와 reference 형태가 아닌 실제 값을 저장하는 차료형
• string, boolean, number, null, undefined, symbol

let str: string = 'hi';
let isSucceeded: boolean = true;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;

let n: null = null;
let u: undefined = undefined;

1.2.2 참조 자료형

• 객체, 배열, 함수등과 같은 Object형식의 타입
• 메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력
• object, array, function

function create(o: object): void{}
// success
create({prop:0})
create([1,2,3])
// error
create('string')

// 배열을 저장하는 타입
let arr: number[] = [1, 2, 3]
// 제네릭을 사용한 타입 표기
let arr: Array<number> = [1, 2, 3]

1.2.3 추가 제공 자료형

• 개발자의 편의를 위해 추가 제공하는 타입
• tuple, enum, any, void, never

// tuple
let arr:[string, number] = ['Hi', 6];
arr[1].concat('!'); // error
arr[3] = 'hello'; // 정의하지 않은 index 호출 시 오류

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

// void
// 변수로 사용하면 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);
}

---

1.3 Utility types

• 공통 타입 변환을 용이하게 하기 위해 제공하는 타입들이며 전역으로 사용 가능하다.

1. Partial<T>: 프로퍼티를 선택적으로 만드는 타입을 구성한다. 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.

interface ToDo {
  title: string;
  description: string;
}

function updateTodo(todo: ToDo, fieldsToUpdate: Partial<ToDo>) {
  return {...todo, ...fieldsToUpdate}
}

const todo2 = updateTodo(todo1, {
  description: 'abc',
});

2. Readonly<T>: 프로퍼티를 읽기 전용으로 설정한 타입

const todo: Readonly<ToDo> = {
  title: 'Delete inactive users',
}
// error
todo.title = 'hello';

3. Record<T, K>: 프로퍼티의 집합 K로 타입을 구성한다.
4. Pick<T, K>: 프로퍼티의 K의 집합을 선택해 타입을 구성한다.
5. Omit<T, K>: 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성한다.

interface Todo {
  title: string;
  description: string;
  flag: boolean
}

type TodoPreview = Pick<Todo, 'title' | 'flag'>
const todo: TodoPreview = {
  title: 'clean room',
  flag: true,
  description: 'description',
  // error: description type이 선택되지 않았기 때문
}

type TodoPreview2 = Omit<Todo, 'description'>;
const todo2: TodoPreview2 = {
  title: 'watch tv',
  flag: false,
  description: 'description',
  // error: description type이 제거되었기 때문
}

6. Exclude<T, U>: T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성한다.

// string | number
type T0 = Exclude<string | number | (() => void), Function>;

7. Extract<T, U>: T에서 U에 할당할 수 있는 모든 속성을 추출하여 타입을 구성한다.

// () => void
type T0 = Extract<string | number | (() => void), Function>;

8. NonNullable<T>: null과 undefined를 제외한 타입이다.

// string | number
type T0 = NonNullable<string | number | undefined | null>

9. Parameters<T>: 함수 타입 T의 매개변수 타입들의 튜플 타입을 구성한다.

type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<(<T>(arg: T) => T)>; // [unknown]
type T3 = Parameters<string>; // error

10. ConstructorParameters<T>: 생성자 함수 타입의 모든 매개변서 타입을 추출한다.
11. ReturnType<T>: 함수 T의 반환 타입으로 구성된 타입을 생성한다.
12. Required<T>: T의 모든 프로퍼티가 필수로 설정된 타입을 구성한다.

interface Props {
  a?: number;
  b?: string;
}
const obj: Props = {a: 5};

// error => property b가 없기 때문
const obj2: Required<Props> = {a: 5};

---

1.4 Typescript를 이용해 함수 사용하기

JS와 TS에서 함수는 1급 객체!
1. 다른 함수에 매개변수로 제공 가능
2. 함수가 함수를 반환 가능
3. 변수에 할당가능(익명 함수)

• 인자의 타입을 선언해주고 반환값의 타입도 선언해준다.
  다만 반환값의 타입은 인자의 타입으로부터 추론이 가능해야한다.

function hello(name: string): string{
	return `hello${name}`;
}
let hello = function (name: string): string{
	return `hello${name}`;
}
let hello = (name: string): string => {
	return `hello${name}`;
}

1.4.1 타입 추론(contextual typing)

• 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있다.
• 타입을 유지하기 위한 노력을 줄일 수 있다.

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

type add = (a: number, b: number) => number;
type sub = {
	(a: number, b: number): number;
}
// (baseValue: number, increment: number) => number 부분이 옆의 function의 타입을 추론하는 데 도움을 줌
// x나 y의 type을 any로 변경해도 타입 에러가 발생하지 않는다.
let f2: (baseValue: number, increment: number) => number
  = function (x, y) {
    return x + y;
  }
let f3: add = (a, b) => a + b;

---

1.5 매개변수 & 선택적 매개변수

• TS에서는 함수에 주어지는 인자의 수와 함수가 기대하는 매개변수의 수가 일치해야한다.
• 다만 선택적 매개변수를 사용해 JS처럼 정의할 수 있다.(?를 사용)
  선택적 매개변수를 사용하면 뒤따라오는 변수는 모두 선택적 매개변수다.
• JS처럼 인자의 초기 값을 설정할 수 있다.

function buildName(firstName: string, lastName?: string) {
  return lastName ? `${firstName} ${lastName}` : `${firstName}`; 
}

let result1 = buildName('sam');
let result2 = buildName('sam', 'adams');
// error: 인자의 개수가 초과됐기 때문
let result3 = buildName('sam', 'adams', 'paul');

// (lastName: string | undefined = 'unknown')과 동일하다.
function buildName(firstName: string, lastName = 'unknown') {
  return `${firstName} ${lastName}`;
}
let result1 = buildName('park'); // park unknown
let result2 = buildName('kim', undefined); // kim unknown

function buildName(firstName: string, ...restOfName: string[]) {
  return `${firstName} ${restOfName.join(' ')}`;
}
// sam adams paul
let result = buildName('sam', 'adams', 'paul');

interface IDBConfig {
  host: string;
  port: number;
  user: string;
  password: string;
  schema?: string;
}