<step88>'react_typescript_interface, keyof, Generic'

1)

ex07_interfacefun.ts

interface IUser10 {
    name: string
}

interface IGetUser {
    (name: string): IUser10
}

const getUser: IGetUser = function(n) {
    let user: IUser10 = {
        name: n
    }
    return user;
}
let result2 = getUser('green');
console.log(result2);

// 함수 선언부
function add(a: string, b: string) : string;
function add(a: number, b: number) : number;
// 함수 구현부
function add(a: any, b: any): any {
    return a + b;
}
add('hello','type')
add(10,20)
// add('hello',20)  // Error

interface nUser {
    name: string,
    age: number,
    getData(x: string) : string [],
    getData(x: number) : string
}

let user: nUser = {
    name: 'son',
    age: 36,
    getData: (data: any) => {
        if(typeof data === 'string'){
            return data.split('');
        } else {
            return data.toString();
        }
    }
}

user.getData("Hello");  // ['H','e','l','l','o']
user.getData(123);  // "123"

// keyof
interface ICountries {
    KR: '대한민국',
    US: '미국',
    CP: '중국'
}
let country: ICountries[keyof ICountries];
country = "대한민국";

let country2: keyof ICountries;
country2 = 'KR';

 

2)

ex08_generic.ts

// 제네릭(Generic)
// 재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을
// 선언할 수 있는 방법을 제공합니다.
// 타입을 인수로 받음

function toArray(a: number | string, b: number | string) : (number | string) []{
    return [a, b];
}
toArray(1,2);
toArray('a','b');
toArray(1,'a');

function toArray2<T>(a: T, b: T): T[] {
    return [a, b];
}
toArray2<string>('a','b');
toArray2<number>(1,2);
toArray2<string | number>(1,'a');

// 인터페이스 제약조건 사용하기 - 타입 제약조건은 extends 키워드로 선언
type U = string | number

interface MyType<T extends U> {
    name: string,
    value: T
}

const dataA : MyType<string> = {
    name: 'Data A',
    value: 'Hello World'
}
const dataB : MyType<number> = {
    name: 'Data B',
    value: 1234
}

// 제약조건 때문에 Error발생
// const dataC : MyType<boolean> = {
//     name: 'Data C',
//     value: true
// }
// const dataD : MyType<number[]> = {
//     name: 'Data D',
//     value: [1,2,3,4]
// }

// 타입 별칭
// type 키워드를 사용해 새로운 타입 조합을 만들 수 있음.
type myStringType = string;
type youType = string | number | boolean;
let nt : youType = true;
type TUser = {
    name: string,
    age: number,
    isValid: boolean
} | [string, number, boolean]
let tuser1: TUser = {
    name: 'Neo',
    age: 85,
    isValid: true
}
let tuser2: TUser = ['Evan', 36, false]
function someFunc2(arg: myStringType): youType {
    switch(arg){
        case 's':
            return arg.toString();
        case 'n':
            return parseInt(arg);
        default:
            return true;
    }
}

// 조건부 타입 T extends U ? X : Y
type U2 = string | number | boolean;

// type 식별자
type MyType2<T> = T extends U2 ? string : number;

// 타입구현
interface IUser5<T> {
    name: string,
    age: T extends U2 ? string: number
}
interface IUser6<T extends boolean> {
    name: string,
    // T타입이 true인 경우 string을 반환 아닌 경우 number를 반환
    age: T extends true ? string : number,
    isString: T
}
const str: IUser6<true> = {
    name: 'green',
    age: '12',
    isString: true
}
const strnum2: IUser6<false> = {
    name: 'green',
    age: 12,
    isString: false
}