Array<T> 및 타입스크립트를 사용하는 예제 연습

ex

타입스크립트로 배열타입을 나타내는 두가지 방법

아래의 예제에서 2번 방법 Array<타입명> 은 제너릭을 사용한 배열 타입의 선언방법이다

즉 Array[타입명]으로 선언한다면 타입명으로 선언된 내용만이 들어가있는 배열타입을 선언하게 된다

interface Bread{}; 

let applePie:Bread[];  // 1.타입명[]
let meatPie:Array<Bread>; // 2.Array<타입명>

Promise를 타입스크립트에서 사용할때

기본적으로 Promise에서 제네릭을 이용하는 것은, 제네릭 타입을 적용하고 그 타입을 돌려받는 것이라고 생각하면 편하다

function fetchItems(): Promise<string[]> {
  const items: string[] = ['a', 'b', 'c'];
  return new Promise(function(resolve) {
      // 이 부분에서 보통 비동기처리 함수가 포함된다
      resolve(items);
  });
}

타입스크립트 예제1

// 아래의 예제는 defineEventHandler라는 함수에 대한 타입을 정의한 내용이다 
const defineEventHandler: <EventHandlerRequest, {
    data: {name:string}[];
}>(handler: EventHandler<...> | EventHandlerObject<...>) => EventHandler<...>

// 위의 함수타입 시그니쳐를 사용한 예제
const definedEventHandler = defineEventHandler<EventHandlerRequest, typeof eventHandlerObject>(eventHandlerObject);

// 아래의 형식임을 알수있다
함수명<제네릭타입>(매개변수)


타입스크립트 예제2

SerializeObject<{...}>[] 인 형태이다

SerializeObject가 배열로 들어가있는 타입


const response: {
    data: SerializeObject<{
        createdAt: string;
        expression: {
            'Thank you for Calling': string;
            'Thank you for Waiting': string;
            'Thank you for Your trouble': string;
        };
        dialogue: {
            A: {
                'Thank you for joining us': string;
            };
            B: {
                ...;
            };
        };
        exercises: {
            ...;
        }[];
    }>[]; // 1.여기를 보면 배열임
}
const response = await $fetch('/api/english')
      if (response.data !== null) {
        this.createdAt = response.data[0].createdAt // 2. 그래서 사용시 [0]로 몇번째 배열을 사용할지 정함
        this.expression.push(response.data[0].expression)
        this.dialogue.push(response.data[0].dialogue)
        this.exercises.push(...response.data[0].exercises)
      }

참조

Array에 대해서

Promise에 대해서

Oct 28, 2023 Views 129