[TS] Generic

2022. 7. 26. 12:03·Stack/TypeScript

재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언 할 수 있음

타입을 인수로 받아서 사용

 

function toArray(a: numger | string, b: number | string) : (number | string) [] {

                return [a, b];

}

toArray(1, 2)

toArray('a','b')

toArray(1, 'a')

 

function toArray<T>(a: T, b:T) :T [] {

                return [a,b];

}

toArray<number>(1, 2)

toArray<string>('a', 'b')

 

제약조건

T extends U

 

조건부 타입

타입구현 영역에서 사용하는 extends는 삼항 연산자를 사용할 수 있음

이를 조건부 타입이라고 부름

T extends U ? X : Y

 

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 string | number> {
    name: string,
    value: T
}

const dataA : MyType<string> = {
    name: 'Data A',
    value: 'Hello World'
}
const dataB : MyType<number> = {
    name: 'Data B',
    value: 1234
}
// const dataC : MyType<boolean> = {   // error 발생(extends 제약조건 때문에)
//     name: 'Data C',
//     value: true
// }
// const dataD : MyType<number[]> = {  // error 발생(extends 제약조건 때문에)
//     name: 'Data D',
//     value: [1, 2, 3, 4]
// }

// 타입 별칭
// type 키워드를 사용해 새로운 타입 조합을 만들 수 있음
type myStringType = string;
type yourType = string | number | boolean;
let nt : yourType = true
type TUser = {
    name: string,
    age: number,
    isValid: boolean,
} | [string, number, boolean]   // TUser은 객체 또는 배열타입이다.

let tuser1: TUser = {
    name: 'Neo',
    age: 85,
    isValid: true
}
let tuser2: TUser = ['Evan', 36, false]
function someFunc2(arg: myStringType) : yourType {
    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 num2: IUser6<false> = {
    name: 'green',
    age: 12,
    isString: false
}

'Stack > TypeScript' 카테고리의 다른 글

[TS / React] React에서 TS 사용해보기 2 (useReducer)  (0) 2022.07.27
[TS / React] React에서 TS 사용해보기  (0) 2022.07.26
[TS] Interface 함수  (0) 2022.07.26
[TS] 타입 추론 / 타입 단언  (0) 2022.07.26
[TS] 튜플(Tuple) / 열거형(Enum) / union / intersection  (0) 2022.07.26
'Stack/TypeScript' 카테고리의 다른 글
  • [TS / React] React에서 TS 사용해보기 2 (useReducer)
  • [TS / React] React에서 TS 사용해보기
  • [TS] Interface 함수
  • [TS] 타입 추론 / 타입 단언
7ingout
7ingout
  • 7ingout
    Hello, 7ingout world!
    7ingout
  • 전체
    오늘
    어제
    • 분류 전체보기 (205)
      • Project (5)
      • Stack (173)
        • React (40)
        • JavaScript (50)
        • TypeScript (14)
        • HTML (11)
        • CSS (31)
        • Spring (9)
        • PHP (15)
        • SQL (3)
        • Python (0)
      • ETC (9)
      • Design (13)
        • Illustrator (6)
        • Photoshop (7)
      • Articloid (4)
        • 7ingout (4)
  • 공지사항

    • ☻
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
7ingout
[TS] Generic
상단으로

티스토리툴바