타입 스크립트 Next.js의 인터페이스를 알아보자.

_app.js의 클래스 컴포넌트

const store = () => {
  return createStore(Reducers, {}, composeWithDevTools(applyMiddleware(thunkMiddleware)))
}
 
class Myapp extends App<{ store: object }> {
  render(): JSX.Element {
    const { Component, store, pageProps } = this.props
    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    )
  }
}
 
export default withRedux(store)(Myapp)
 

Redux에 연결된 _app.js 컴포넌트이다.

App 컴포넌트와 제네릭

일반적으로 React.Component를 상속받는 것이 아닌

App이라는 Next의 모듈을 상속받는다.

App은 다음과 같은 형태를 가진다.

export default class App<P = {}, CP = {}, S = {}> extends React.Component<P & AppProps<CP>, S> {
    static childContextTypes: {
        router: PropTypes.Requireable<object>;
    };
    static origGetInitialProps: typeof appGetInitialProps;
    static getInitialProps: typeof appGetInitialProps;
    getChildContext(): {
        router: import("next-server/dist/lib/router/router").NextRouter;
    };
    componentDidCatch(error: Error, _errorInfo: ErrorInfo): void;
    render(): JSX.Element;
}

여기서 주의 깊게 살펴봐야 할 점은 App의 제네릭이다.

<P = {}, CP = {}, S = {}> 를 각각 받아야 하고 default일 경우 빈 객체여야만 한다.

 

다시 _app.js의 Myapp을 살펴보자

 

class Myapp extends App<{ store: object }> {

 

여기서 store를 제네릭에 추가해주지 않으면 App을 상속받는데 에러가 난다.

default일 경우에는 빈 객체를 받아야 하는데, props에 store를 사용한다면

애초에 없는 클래스(다형성)을 상속 받기 때문이다.

Container란 무엇인가?

Next에 제공하는 컴포넌트중 또 하나 Container 컴포넌트를 _app의 wrapper로 사용하였다.

return (       <Container>         <Provider store={store}>           <Component {...pageProps} />         </Provider>       </Container>     )

<_app.tsx>

export declare function Container(p: any): any; // next/app

Container는 함수로 어떤 Parameter도 받고 어떤 Return값도 리턴하는 평범한 함수이다.

이를 통해 유추해보자면 Container라는 이름 그대로 Wrapper 역할 그 이상도 이하도 아닌것 같고 실제로 Cotaniner가 없다고 하더라도 앱에 문제는 없다.

declare

함수가 declare 라는 옵션이 붙은 채로 선언되어 있는데, 이 옵션을 통해 해당 변수가 전역 객체에 선언된다고 한다.

 

getInitialProps와 Props 타입 지정하기

import { NextPage } from "next";
 
const Index: NextPage = props => {
  console.log(props);
  return (
    <div className="IndexPage">
      <div>Index</div>
    </div>
  );
};
 
Index.getInitialProps = async () => {
  const test = {
    data: 1
  };
  return {
    test
  };
};
 
export default Index;
 

조금 생각해보면 getInitialProps는 결국 코드가 실행된 이후에 발생되는 작업이기 때문에 컴파일 타임에서는 props가 빈 객체로 받아들여지는것도 납득이 된다.

interface로 타입 선언

자바를 사용해봤다면 알 수 있지만, 앞으로 만들어질 객체를 인터페이스로 타입을 주게 되면 된다.

interface Iprops {
  test: {
    data: number;
  };
}
 
const Index: NextPage<Iprops> = (props: Iprops) => {
  console.log(props.test);
  return (
    <div className="IndexPage">
      <div>Index</div>
    </div>
  );
};

뿐만 아니라 이를 통해서 자연스럽게 타입 검사또한 할 수 있게 되었다.

interface Iprops {
  test: {
    data: number;
  };
  other: {
    data: string;
  };
  theOther: {
    data: boolean;
  };
}
 
const Index: NextPage<Iprops> = (props: Iprops) => {
  return (
    <div className="IndexPage">
      <div>{props.test.data}</div>
      <div>{props.other.data}</div>
      <div>{props.theOther.data}</div>
    </div>
  );
};
 
Index.getInitialProps = async () => {
  const test = {
    data: 1
  };
  const other = {
    data: "데이터"
  };
  const theOther = {
    data: false
  };
  return {
    test,
    other,
    theOther
  };
};

여러가지 Props를 받아보았다.

Redux 타입

import { createAction, handleActions } from "redux-actions";
 
interface IinitialState {
  init: boolean;
  do: string;
}
 
export const initialState: IinitialState = {
  init: true,
  do: ""
};
 
export const REDUX_TEST: string = "REDUX_TEST";
export const REDUX_DO: string = "REDUX_DO";
 
export const actionTest = createAction(REDUX_TEST);
 
declare interface Ipayload {
  word: boolean;
  gogo: string; // dispatch에까지 영향을 미치지 않는다.
}
 
export const actionDo: Function = createAction(
  REDUX_DO,
  (payload: Ipayload) => payload
);
 
declare interface IreduxDoAction {
  payload: {
    word: string;
    gogo: string;
  };
} //역시 영향을 미치지 않는다.
 
export default handleActions(
  {
    [REDUX_TEST]: state => {
      return {
        ...state,
        init: false
      };
    },
    [REDUX_DO]: (state: IinitialState, action: IreduxDoAction) => {
      return {
        ...state,
        do: action.payload.word
      };
    }
  },
  initialState
);
 

import { createAction, handleActions } from "redux-actions";
 
interface IinitialState {
  init: boolean;
  do: string;
}
 
export const initialState: IinitialState = {
  init: true,
  do: ""
};
 
export const REDUX_TEST: string = "REDUX_TEST";
export const REDUX_DO: string = "REDUX_DO";
 
export const actionTest = createAction(REDUX_TEST);
 
export const actionDo: Function = createAction(REDUX_DO, payload => payload);
 
export default handleActions(
  {
    [REDUX_TEST]: state => {
      return {
        ...state,
        init: false
      };
    },
    [REDUX_DO]: (state: IinitialState, action) => {
      return {
        ...state,
        do: action.payload.word
      };
    }
  },
  initialState
);