[기초] 타입스크립트 1장 (Call Signature, Overloading, Polymorphsm...)

타입스크립트 코드 테스트
https://www.typescriptlang.org/play

타입스크립트 핸드북
https://typescript-kr.github.io/pages/basic-types.html

타입스크립트란? (feat. 노마드 코더. ID:sugar)
1.TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다.
2. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.
3. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.

---

Type Script 기본 시스템

Type 시스템이란 변수 선언시 타입을 지정하는 시스템이다.

let a: boolean = "x"
# boolean 타입에 string타입 할당 불가 알림
let b = "hello"
# b가 string 타입이라고 추론(Inffer) => let b:strong = "hello"
b = 1
# string 타입에 number타입 할당 불가 알림

Types of TS(기본)
- 배열: 자료형[]
- 숫자: number
- 문자열: string
- 논리: boolean
- optional: ?

- any: 아무 타입
- undefined: 선언X 할당X
- null: 선언O 할당X
- unknown

- void: 아무것도 return하지 않는 함수

- never: 함수가 return을 허용하지 않는 함수

// Alias설정
type Player = {
    name: string,
    age?:number
    }
// 변수
const player : Player = {
    name: "nico"
    }
// 함수
function playerVer1(name:string) : Player {
    return {name}
    } 
// 화살표함수
const playerVer2 = (name:string) : Player => ({name})
const nico = playerV1("nico")
nico.age = 12
// 리드온리,readonly: immutability(불변성) 부여 / readonly가 있으면 최초 선언 후 수정 불가
type Player = {
    readonly name:string
    age?:number
    }
const playerMaker = (name: string): Player => ({name})
const nico = playerMaker("nico")
const numbers: readonly number[] = [1, 2, 3, 4]
❌ nico.name = "aa"
❌ numbers.push(1)
// 튜플,Tuple : 정해진 개수와 순서에 따라 배열 선언
const player: [string, number, boolean] = ["nico", 1, true]
// 네버,never
function temp(name:string|number):never {
    if(typeof name === "string"){
        name
    } else if(typeof name === "number"){
        name
    } else {
        name
    }
}
// if 안에서는 string형의 name 반환
// else if 안에서는 number형의 name 반환
// else 안에서는 never형의 name 반환
// ⇒ 즉, 제대로 인자가 전달되었다면 else로 올 수 없음

Alias

재활용을 위해, 타입을 선언하는 것.

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

Call Signature

재활용을 위해, 타입을 선언하는 것은 Alias와 같다. 하지만, 타입을 반환한다는 점이 큰 차이점이다.

type Add = (a:number, b:number) => number;

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

Overloading

동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말한다.

TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출 할 수 있는 함수"를 지정할 수 있다.

// type이 다른 경우
type Add = {
(a: number, b: number): number,
(a: number, b: string): number
}
const add: Add = (a, b) => {
if (typeof b === "string") return a;
return a + b;
}
// 인자의 갯수가 다른 경우
type Add2 = {
(a: number, b: number): number,
(a: number, b: number, c: number): number
}
const add2: Add2 = (a, b, c?: number) => {
if (c) return a + b + c;
return a + b;
}

Polymorphism

다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미합니다.

• generic type (Polymorphism)
  - 타입의 placeholder
• concrete type
  - number, boolean, void 등 지금까지 배운 타입

(구체적인 타입을 지정하지 않고 다양한 인수와 리턴 값에 대한 타입을 처리할 수 있다.)
타입스크립트에서 제네릭을 통해 인터페이스, 함수 등의 재사용성을 높일 수 있습니다.

Generic 선언: Generic을 사용할 것이다. 그의 이름은 T로 사용할 것이다. *다른 것을 써도 됨

인자타입:  받는 아이는 ~ 이다. Generic을 붙여서 사용

Return 값은 Generic T로 할 것이다

# V1
type Last = <T>(arr:T[]) => T;
const lastV1: Last = (arr) => (arr[arr.length-1])
# V2
function lastV2<T>(arr: T[]): T {
    return arr[arr.length-1];
}

function toPair<T, U>(a: T, b: U): [ T, U ] {
	return [ a, b ];
}