//package.json
{
  ...
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "@types/lodash": "^4.14.192",
    "@types/jest": "^29.5.0",
    "jest": "^29.5.0"
  }
}

interface SecretName {
    first: string;
    last: string;
}
interface SecretSanta {
    name: SecretName;
    gift: string;
}

export const getGift = (name: SecretName, gift: string): SecretSanta => {
    //...
};

// 타입 추출하기
type MySanta = ReturnType<typeof getGift>;     //SecretSanta
type MyName = Parameters<typeof getGift>[0];   //SecretName

//js 파일에서의 JSDoc

/**
 * 책 데이터를 가져오는 함수
 * @param {number} bookId **도서 ID**
 * @returns {title: string, author: string} 도서명, 저자
 */
function getBookData(bookId) {
    //...
    return {
        title: '이펙티브 타입스크립트',
        author: '댄 밴더캄',
        publisher: '프로그래밍 인사이트'
    };
}

//ts 파일에서의 TSDoc
//타입 정보 제거 -> 어차피 기본으로 보여준다.

/**
 * 책 데이터를 가져오는 함수
 * @param bookId **도서 ID**
 * @returns 도서명, 저자
 */
function getBookData(bookId: number) {
    //...
    return {
        title: '이펙티브 타입스크립트',
        author: '댄 밴더캄'
    }
}

//콜백 함수 첫 번째 매개변수에 있는 this는 특별하게 처리 된다.
//-> 실제로 인자로 넣을 필요는 없다. this 바인딩 체크용이다.
//콜백 함수의 매개변수에 this를 추가하면 this 바인딩을 체크할 수 있다.
function addKeyListener(
    el: HTMLElement,
    fn: (this: HTMLElement, e: KeyboardEvent) => void
) {
    el.addEventListener("keydown", (e) => {
        fn(el, e); //❌
        //1개의 인수가 필요한데 2개를 가져왔습니다.
    });
}

function addKeyListener2(
    el: HTMLElement,
    fn: (this: HTMLElement, e: KeyboardEvent) => void
) {
    el.addEventListener("keydown", (e) => {
        fn(e); //this 바인딩 체크해준다.
        //'void' 형식의 'this' 컨텍스트를 메서드의 'HTMLElement' 형식 'this'에 할당할 수 없습니다
    });
}

//콜백 함수를 call로 호출해서 해결할 수 있다.
function addKeyListener3(
    el: HTMLElement,
    fn: (this: HTMLElement, e: KeyboardEvent) => void
) {
    el.addEventListener("keydown", (e) => fn.call(el, e));
}

//❌ 안 좋은 예: 오버로딩
//타입스크립트는 오버로딩 타입 증에서 일치하는 타입을 찾을 때까지 순차적으로 검색한다.
{
    function double(x: number | string): number | string;
    function double(x: any) {
        return x + x;
    }

    const num = double(2); // type: string | number
    const str = double("x"); // type: string | number
    //선언이 틀리진 않았지만 모호하다.
}

{
    function double<T extends number | string>(x: T): T;
    function double(x: any) {
        return x + x;
    }

    const num = double(2); // type: 2
    const str = double("x"); // type: 'x'
    //타입이 과하게 구체적이다.
}

{
    function double(x: number): number;
    function double(x: string): string;
    function double(x: any) {
        return x + x;
    }

    const num = double(2); // type: number
    const str = double("x"); // type: string
    //타입이 명확해졌지만 버그가 발생한다.

    function f(x: number | string) {
        return double(x); //'string|number' 형식의 인수는 'string'형식의 매개변수에 할당될 수 없습니다.
    }
}

//✅ 좋은 예: 조건부 타입 사용
{
    function double<T extends number | string>(
        x: T
    ): T extends string ? string : number;
    
    function double(x: any) {
        return x + x;
    }
}

//CSV 파일 파싱 함수 예시
function parseCSV(contents: string | Buffer): {[column: string]: string}[] {
    //...
    return [{"key": "value"}];
}
//Buffer 타입 정의는 @types/node 에서 얻을 수 있다.
//그러나 그것을 위해 라이브러리에 @types/node 의존성을 추가하는 것은 비효율적이다.
//(라이브러리 사용자가 ts 를 사용하지 않거나, nodeJS 와 무관한 개발자라면 더더욱)

//Buffer 인터페이스에서 실제 필요한 부분만 떼어 내어 명시(미러링)
interface CsvBuffer {
    toString(encoding: string): string;
}

function parseCSV(contents: string | CsvBuffer): {[column: string]: string}[] {
    //...
    return [{"key": "value"}];
}

interface Person {
    name: string;
    age: number;
}

function fn(x: Person) {
    console.log(x);
}

const student = { name: "yoong", age: 30, class: '1-2' };

fn(student); //✅ student class라는 프로퍼티가 있음에도 Person로써 인정 받음(할당 가능)

const animal = { name: "monkey"};
fn(animal); //❌
//'{ name: string; }' 형식의 인수는 'Person' 형식의 매개 변수에 할당될 수 없습니다.

//-> ❗️타입이 좁아지는 건 가능! 타입이 넓어지는 건 불가능