타입스크립트 심화 (1)

※ 정보
타입스크립트 실행 결과 볼 때 코드가 바뀔때마다 명령어를 입력해서 결과를 볼 수 있다.

• npx tsc => node '파일이름.js'

하지만 너무 번거로움. 그럴 때 ts-node 라이브러리 사용

• npm i -g ts-node
• ts-node '파일명.ts'
• 결과로 가짜 api

axios

요청보내는 라이브러리

• fetch (저수준)
• axios : fetch + 여러 기능
  • fetch 기반 아님.
  • XMLHttpRequest 기반
    

import axios, { AxiosError, AxiosResponse } from "axios";

interface Post {}
interface Data {}

interface A {
  get: <T, R = AxiosResponse<T>>(url: string) => Promise<R>;
  post: <T, R = AxiosResponse<T>, D>(url: string, data: D) => Promise<R>;
  (config: {}): void;
  (url: string, config: {}): void;
  isAxiosError: (error: unknown) => error is AxiosError;
}

// await 붙을 수 있는 애들은 리턴이 Promise다

(async () => {
  try {
    const a: A = await axios;
    const response = await axios.get<Post, AxiosResponse<Post>, Data>(
      "https://jsonplaceholder.typicode.com/posts/1"
    );
    const response2 = await axios.post(
      "https://jsonplaceholder.typicode.com/posts/1",
      {
        name: "nini",
        userId: 1,
      }
    );
  } catch (error) {
    // 커스텀 타입 가드
    if (error instanceof AxiosError) {
      console.error(error.response?.data);
      // 추가로 message 같은 내용을 추가해주고 싶을 때
      // 그러나 최대한 as 를 쓰지 않고 해결하는 것이 좋다.
      console.error(
        (error.response as AxiosResponse<{ message: string }>)?.data.message
      );
    }
  }
})();

리액트 타입 분석

• umd 모듈과 tsconfig.json jsx 설정하기
  리액트는 es 모듈이 아니라 commonjs 모듈임.
  d.ts 파일에 export = React; + export as namespace React; 까지 있으면 umd 모듈이다. export default 는 es
• "esModuleInterop": true
  다음과 같이 사용 가능.
  import React, {useState} from 'react'
• "esModuleInterop": false
  라이브러리나 파일 불러올 때 다음과 같이 작성해야함.
  import * as React from 'react';
import React = require('react')

• 브랜딩 기법
  

리덕스

• 미들웨어

export interface Middleware<DispatchExt = {}, S: any, D extends Dispatch> {
    (api: MiddlewareAPI<D, S>): (next: Dispatch<AnyAction>) => (action: any) => any
}

api는 store고, next는 dispatch와 같다.

• thunk
  액션은 반드시 객체 형태가 기본인데, thunk라는 미들웨어를 만들어 놓으면 함수 형태로 만들 수 있다. (함수 그 자체로 허용)
  • 그러나, 모든 액션이 함수 형태가 되는 것이 아니라 객체도 받는다.
  • 그래서 thunk 미들웨어를 사용할 때, 액션이 함수면 액션을 호출하고, 액션이 함수가 아니면 액션 객체 자체를 호출하도록 분기 처리를 해준다.
    => 분기 처리를 하는 이유 ?
    thunk가 액션을 객체 뿐만 아니라 함수도 허용하기 때문.
  • 액션이 함수 형태### Node, Express 타입 분석
• node되면 좋은 점 ?
  javascript 실행기, 런타임 (서버 x)
  redux는 항상 동기인데 thunk를 사용하면 비동기 액션이 가능하다.
  ex) setTimeOut과 같은 비동기로 dispatch를 여러 번 할 수 있다.
  => 즉, 비동기를 지원하기 위해 thunk를 사용하고, thunk는 미들웨어를 삽입함으로써 돌아간다.

Node, Express 타입 분석

• node
  javascript 실행기, 런타임 (서버 x)

  • 노드 모듈 사용할 때는, 'node: -'와 같이 node를 붙여서 불러오는 것 권장
    ex) import fs from 'node:fs'

• express
  http 기반

※ 추가 개념
1. 타입 선언만 있고, 구현이 없는 것을 'ambient(앰비언트)'라고 한다
declare module .. => 이런 것이 앰비언트 모듈 - 특정 모듈에 대한 작업을 해주는 것.