{Typescript} 7.클래스 / 8.제네릭 / 9.타입 호환

7. class : 클래스

class Person3{

    name: string;
    age: number;
    readonly log: string; //읽기만 가능


    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

8. generic : 제네릭

• union을 사용할 경우

function logText3(text: string | number) {
    // input type이 string | number 가 되어서 공통적인 요소만 호출 가능하다
    console.log(text);
    return text;
}

let a = logText3('hi');
// 호출은 문제 없지만, 위의 a는 string | number 타입을 갖게된다. 

• Generic을 사용하면 해당 타입의 속성을 그대로 사용할 수 있다.

function logTextGen<T>(text: T): T{
    console.log(text);
    return text;
}

const str3 = logTextGen<string>('하이');
str3.split('');

• interface에 적용

interface Dropdown<T>{
    value: T;
    selected: boolean;
}

const obj: Dropdown<string> = { value: 'abc', selected: false };
const objNumber: Dropdown<number> = { value: 1200, selected: false };

• 함수에 적용

function logTextLength<T>(text: T[]): T[] {
    console.log(text.length);
    text.forEach(function (text) {
        console.log(text);
    })
    return text;
}

logTextLength<string>(['hi', 'abc']);

• 상속 타입도 가능

//LengthType에 정의된 속성을 가지고 있으면 수용 가능함
function logTextLength2<T extends LengthType>(text: T): T {
    Text.length;
    return text;
}
// logTextLength2(10); //10: number는 length 속성이 없기 때문에 오류

logTextLength2({ length: 10 }); // length 속성이 있기 때문에 가능

• keyof로 타입 제한

interface ShoppingItem{
    name: string;
    price: number;
    stock: number;
}

// ShoppingItem에 정의된 name, price, stock key만 인자로 넘길수있음
function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
    return itemOption;
}

getShoppingItemOption("price");

9. 타입 호환

• interface 호환
  오른쪽에 있는 type이 같거나 더 큰 범위의 변수를 가져야 가능하다.

interface Developer{
    name: string;
    skill: string;
}
interface Person{
    name: string,
}
let developer: Developer;
let person: Person;

// develper = person; // 불가
person = developer;

• 함수 호환
  오른쪽에 있는 함수의 범위가 왼쪽에 있는 함수 범위에 속해야 가능

let add5 = function (a: number) {
        
}
let sum5 = function (a: number, b: number) {
 //   return a + b;
}
// add=sum; // sum 함수가 add 함수보다 크므로 불가
sum5 = add5;

• 제네릭 호환

interface Empty<T> {
    //
}

let empty1: Empty<string>;
let empty2: Empty<number>;

// 비어있기 때문에 호환됨
empty1 = empty2;
empty2 = empty1;

interface NotEmpty<T>{
    data: T;
}

let notEmpty1: NotEmpty<string>;
let notEmpty2: NotEmpty<number>;

// 제네릭으로 변경된 부분이 있기 때문에 불가하다.
// notEmpty1 = notEmpty2;
// notEmpty2 = notEmpty1;

참고 자료

[인프런] 타입스크립트 입문 - 기초부터 실전까지
[공식문서] https://www.typescriptlang.org/docs/
[타입스크립트핸드북] https://joshua1988.github.io/ts/intro.html