1. 오브젝트 모양을 설명하는 것

   type Player1 = {
   name: "John"
   };

2. type alias를 만드는 것

   type Player2 = number;

3. 특정된 값으로 만드는 것

   type Player3 = "1" | "2"

   ---

type과 interface의 공통점

• 타입스크립트에게 오브젝트의 모양과 타입을 알려주는 역할
• 추상 클래스(abstract class)를 대체한다.

//**type**
type PlayerA = {
  name: string;
};

const playerA: PlayerA = {
  name: "doe",
};

//**interface**
interface PlayerB {
  name: string;
}

const playerB: PlayerB = {
  name: "doe",
};

//class

class User implements PlayerB {
  constructor(name: string){}
}
또는
class User implements PlayerA {
  constructor(name: string){}
}

type과 interface의 차이점

type은 새 property를 추가하기 위해 다시 선언될 수 없지만 interface는 항상 상속이 가능하다.

1. 다른 클래스를 상속할 때의 차이점

   //type
   type PlayerA = {
   name: string;
   };
   

type PlayerAA = PlayerA & { age: number; };

const playerA: PlayerAA = { name: "doe", age: 20 };

//interface

interface PlayerB { name: string; }

interface PlayerBB extends PlayerB{ age: number; }

const playerB: PlayerBB = { name: "doe", age: 20 };

2. 나중에 property를 타입에 추가할 때의 차이점
```ts
//type
type PlayerA = {
  name: string;
};

type PlayerAA = PlayerA & {
  age: number;
};

//🔻 추가할 프로퍼티
type PlayerAA = {
  health: number;
}; // => ❌ type을 쓸 땐 PlayerAA타입이 이미 정의돼있어서 중복된다.

const playerA: PlayerAA = {
  name: "doe",
  age: 20
};

//interface

interface PlayerB {
  name: string;
}

//🔻 추가할 프로퍼티
interface PlayerB{
  age: number;
}
interface PlayerB {
  health: number;
} // => ⭕ 인터페이스를 다시 써주고 추가할 프로퍼티를 써주면 된다.

const playerB: PlayerB = {
  name: "doe",
  age: 20
};

예시

```ts /** ↓ Words타입이 string만을 프로퍼티로 가지는 오브젝트라는 것. 제한된 양의 property 혹은 key를 가지는 타입을 정의해주는 방법이다. 객체의 property에 대해 모르지만 타입만을 알 때 유용하다. **/ type Words = { [whatever: string]: string }

/* let dict: Words = { "potato": "food" } 둘 다 string이어야 한다. number라면 number이어야 한다. */

class Dict { private words: Words constructor() { this.word = {} }//수동으로 초기화 //단어를 추가하기 위한 메소드 //클래스를 타입처럼 사용 //파라미터(word)가 클래스(Word)의 인스턴스이길 원할 때 이렇게 작성. add(word: Word) { if(this.words[word.term] === undefined) { this.words[word.term] = word.def } } }

class Word { constructor() { public term: string, public def: string } }

const kimchi = new Word("kimchi", "한국의 음식");

const dict = new Dict();

dict.add(kimchi);

• poly : many, multi

• morpho : form, structure => many different forms

• concrete type : number, void, boolean 등 지금까지 배운 타입.

• generic type : 타입 placeholder

배열을 받고 그 요소를 하나씩 출력해주는 함수를 만들어 보자

type SuperPrint = {
  (arr: number[]): void)
}

const superPrint: SuperPrint = (arr) => {
  arr.forEach(i => console.log(i))
}

이 때,

superPrint(1, 2, 3, 4)//은 가능하다.
//하지만
superPrint(1, 2, true, "4") //처럼 모든 타입에 대해 함수를 호출하고 싶다고 해서

type SuperPrint = {
  (arr: number[] | string[] | boolean[]): void
} //이렇게 or로 일일히 써주는 것보단 generic을 사용해주는게 좋다.

즉, call signature를 작성할 때, 확실한 타입을 모를 경우에 generic type을 사용한다.

그럴 땐 먼저 타입스크립트에게 generic을 사용하겠다고 말해줘야 한다.

type SuperPrint = {
  <TypePlaceholder>(arr: TypePlaceholder[]): void
  //<>를 아무 이름과 함께 적어주어 generic을 사용하겠다고 말해줌.
  //그리고 타입의 이름도 같은 것으로 적어줌.
}

const superPrint: SuperPrint = (arr) => {
  arr.forEach(i => console.log(i))
}

superPrint(1, 2, 3, 4)
//이제 superPrint함수에 마우스를 올려보면 위에 generic으로 적은 call signature가 나오는 걸 볼 수 있다.
//타입스크립트가 알아서 number array라는걸 유추해서 placeholder를 대체해 call signature로 알려주게 된다.

배열을 받고 그 첫 번째 요소를 출력하는 함수를 만들어 보자

보통 간략하게

<T> 또는 <V> 로 줄여쓴다.

type SuperPrint = {
  <T>(arr: T[]): T
  //이제 void가 아니라 배열을 return하는 함수기 때문에 void대신 TypePlaceholder를 리턴한다고 적어준다.
}

const superPrint: SuperPrint = (arr) => arr[0] 

const a = superPrint([1, 2, 3, 4])// const a: number
const b = superPrint([true, false, true])// const b: boolean
const c = superPrint(["a", "b", "c"])// const c: string
const d = superPrint([1, 2, true, false, "hi"])// const d: string|number|boolean

• 함수에 이렇게 여러 형태가 주어지기 때문에 polymorphism(다형성)이라 한다.

Generic

• any를 사용하지 않고 generic를 사용하는 이유:
  • error에 대해 보호받기 위해서.

여러 개의 generic을 선언하는 방법

type SuperPrint = <T, M>(a: T[], b: M) => T
const superPrint: SuperPrint = (a, b) => a[0]

a = superPrint([1, 2], "b")

• 타입스크립트는 generic을 처음 인식했을 때와 generic의 순서를 기반으로 generic의 타입을 알게 된다.

• 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로,
• 하나의 함수가 서로 다른 여러개의 call signature를 가질 때 발생한다.

단순한 예시)

type Add = {
  (a: number, b: number) : number,
  (a: number, b: string) : number
}

const add: Add = (a, b) => {
  if(typeof b === "string") return a //⭕b가 string이면 return값이 number
  return a + b //⭕return값이 number
}

많이 접할 수 있는 예시)

• Next.js에서 우린 여러 Router를 만들게 된다.
• 그런데 그 라우터를 string으로 보낼 수도 있지만 Object(객체) 형식으로 보낼 수도 있다.
• 오버로딩의 좋은 예시이다.

  Router.push("/home")
  //또는
  Router.push({
  path: "/home",
  state: 1,
  })
  

### 실전예시)
```ts
type Config = {
  path: string,
  state: object
}

type Push = {
  (path: string): void,
  (config: Config): void,
}

const push: Push = (config) => {
  if(typeof config === "string") {
    console.log(config)
  } else {
  console.log(config.path)
  }
}

주의할 점

type Add = {
  (a: number, b: number): number,
  (a: number, b: number, c: number): number,
}

const add: Add = (a, b, c?:number) => {
  if(c) return a + b + c
  return a + b;
}

add(1, 2)
add(1, 2, 3)

• 위와 같이 두 개 이상의 call signature들의 parameter의 개수가 다를 때, c의 경우 옵션이기 때문에 함수를 호출할 때 c의 타입이 아마도 number일 것이다(c?:number) 라고 코드에 적어줘야 한다.

const add = (a: number, b: number) => a + b;

• 함수의 call signature란 위 사진처럼 함수 add에 마우스 커서를 올려보면 보게되는 것을 말함.
• 인자(argument)의 타입과 함수의 반환 타입을 알려준다.
• 함수를 어떻게 호출해야 하는지 알려준다.

  ---

  ## 나만의 call signature 만들기 ```ts type Add = (a: number, b: number) => number;//이게 call signature

const add: Add = (a, b) => a + b;

변수 add를 선언할 때 타입스크립트에게 타입이 number라고 말해줄 필요가 없다.
- 함수를 구현하기 전에 내가 타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있다.
- 내가 타입을 생각하도록 해준다.
- 코드를 구현하면서 타입들을 써줘야 했지만 그 과정을 분리해준다.

<hr>

## 주의할 점

위 함수에서..
```ts
type Add = (a: number, b: number) => number;

const add: Add = (a, b) => {a + b}; //a+b가 아니라 {}안에 a+b를 쓰면

{}안의 {a+b}가 함수 내부 내용으로 처리돼서 return값이void가 된다. 즉,

const add: Add = (a, b) => a + b;

이 화살표 함수는 다음과 같다.

function add(a, b): Add {
  return a + b;
}

그러나

const add: Add = (a, b) => {a + b};

이 화살표 함수는 다음과 같다.

function add(a, b) : Add {
  a + b;
}

• 즉, 화살표 함수에서 {}를 사용하면 그 안의 값은 return(반환)이 아니라 함수 내부 내용으로 처리되기에 반환값이 없는 void로 처리된다.
• 이에 따라 위에서 미리 선언한 type Add = (a: number, b: number) => number; 의 내용과 충돌하여 error가 발생한다.
• number를 return 해야 하는데 return값이 없는 void로 처리되기 때문.

type Player = {
  readonly name: string,
  age?: number
}

const playerMaker = (name: string) :Player => ({name])

const jaehun = playerMaker("jaehun")
jahun.name = "messi" //-> error

const numbers : readonly number[] = [1, 2, 3, 4]
numbers.push(5) // -> 불가능

readonly를 통해 읽기전용으로 만들 수 있다. 최초선언 후 수정 불가

2. Tuple

const player : [string, number, boolean] = ["jaehun", 2, true]

player[0] = 1 //->error

Typescript에게 이 array가 최소 3개의 아이템을 가지며 string, number, boolean의 순서대로여야 함을 알려야 할 때 유용하다.

tuple은 array를 생성할 수 있게 한다. 최소한의 길이를 가져야 하고 특정위치에 특정 타입이 있어야 한다.

let a : undefined = undefined

let a : null = null

• 아무 타입이나 될 수 있음.
• 비어있는 값을 쓰면 기본값이 any가 됨.
• Typescript의 보호장치로부터 빠져나오고 싶을 때 사용

let a = []

• void란 비어있는 것을 말함.
• 아무것도 return하지 않는 함수의 반환값을 나타낸다.
• 함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입이다.

  function hello() {
  console.log("hello");
  }

  hello함수에 커서를 갖다대면 아무것도 return하지 않는 void라는 것을 알려준다. Typescript는 그 함수가 아무것도 return하지 않는다는 것을 자동으로 인식한다.때문에 hello() : void 이렇게 쓰지 않아도 된다.

• 함수가 절대로 return하지 않을 때 발생한다.
• 타입이 두가지 일 수도 있는 상황에 발생한다.

  function hello(name: string | number) {
  if(typeof name === "string") {
    name
    //커서를 올려보면 name은 string
  } else if(typeof name === "number") {
    name
    //name은 number
  } else {
    name
    //name은 never
    //뭘쓰던 그 타입은 never
    //이 코드는 절대 실행되지 않아야 한다는 것.
  }
  }

let a : unknown

• 어떤 변수의 타입을 미리 알지 못하는 경우.
• 어떤 작업을 하려면 이 변수의 타입을 먼저 확인해야 하도록 하는 일종의 보호장치.

if(typeof a === 'number') {
  let b = a + 1;
}

위 if구문 안에서는 a의 타입이 number이기 때문에 error없이 코드를 작성할 수 있다.

if(typeof a === "string") {
  let b = a.toUpperCase();
}

위 if구문 안에서는 a의 타입이 string이기 때문에 error없이 코드를 작성할 수 있다.

player가 여러명인 경우 alias type으로 코드의 양을 줄여준다.

type Player = {
  name: string,
  age?: number
}

const player1 : Player = {
  name: "jaehun"
}

const player2 : Player = {
  name: "messi"
}

또, age의 타입에 대한 다른 Alias를 만들 수도 있다.(예시일 뿐 굳이 이렇게까지 재사용할 필요는 없다.)

type Age = number;
type Name = string;

type Player = {
  name: Name,
  age?: Age
}

const player1 : Player = {
  name: "jaehun"
}

const player2 : Player = {
  name: "messi"
}

type Age = number;
type Name = string;

type Player = {
  name: Name,
  age?: Age
}

function playerMaker(name: string) : Player {
  //argument의 type 지정
  return {
    name: name
    //return값의 type 지정
}

const jaehun = playerMaker("jaehun")
jaehun.age = 26

위의 내용을 arrow function으로 나타내면

```ts const playerMaker = (name: string) : Player => ({name})

1. Javascript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원하는 strongly typed(강타입) 프로그래밍 언어. editor에서 초기에 오류를 잡을 수 있다.
   
2. Typescript 코드는 Javascript가 실행되는 모든 곳(브라우저, Node.js, Deno 및 앱 등) 에서 Javascript로 변환될 수 있다.
   • 변환하는 이유는 브라우저가 Typescript가 아닌 Javascript를 이해하기 때문.
   • Node.js는 둘 다 이해할 수 있다.
     
3. Typescript는 Javascript를 이해하고 타입추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공한다. 개발자가 실수하지 않도록 보호해준다.

Typescript의 변환 과정

1. Typescript코드를 작성
2. Typescript가 에러를 감지하면 Javascript로 컴파일되지 않음
3. 에러가 없다면 Javascript로 컴파일됨.

ex)

[1, 2, 3, 4] + false

위 와같은 코드는 컴파일 조차 되지 않는다.

Typescript의 타입 시스템

1. Typescript에게 구체적으로 말해주는 방법(explicit)

   let b : boolean = "x"

• 변수 b가 boolean타입이어야 한다고 Typescript에게 말해주고 있지만 boolean타입에 string타입을 할당할 수 없기 때문에 error가 뜬다.

  let b : boolean = false

• error가 나지 않는다.
  

2. Typescript가 추론하게 하는 방법(implicit)

   let a = "hello"
   let c = [1, 2, 3, 4]

   라고만 해도 Typescript는 a의 타입이 string이라는 것과 c의 타입이 number array라는 것을 추론해준다.

   
   >**2번째 방법(implicit)으로 코드를 작성하는게 바람직하다.**

3. Typescript의 Typechecker에게 타입을 추론하는 것을 허용해주기 위해.

4. 더 쉽고 코드도 짧아져 가독성이 향상됨.

let c = []

하지만 위처럼 빈 배열을 선언하는 경우에는 Typescript에게 이 array가 어떤 array라고 명시적으로 말해줘야할 필요가 있다.

let c : number[] = []

이와 같은 명시적 표현은 Typescript가 타입을 추론하지 못할 경우에만 최소한으로 사용하는게 좋다.