Storybook에서의 Typescript

공식문서의 일부 내용을 번역 및 재해석한 글입니다.

 

Storybook에서 Typescript 사용하기

Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용할 수 있다.

 

기본 설정

기본적으로 ts 변환을 위해 babel-loader를 사용하고, 옵션으로 타입 체킹을 위한 fork-ts-checker-webpack-plugin을 제공한다.

[fork-ts-checker-webpack-plugin?]

간단하게 말하면 기본적으로 ts-loader, babel-loader와 같은 것들을 이용해 Typescript 컴파일을 수행하게 되면,

타입 변환과 타입 검사 과정을 수행하게 된다.

이때, 이 두 과정이 순서대로 이뤄지기에 컴파일하는데 시간 소요가 많아지게 되고,

이를 방지하기 위해 fork-ts-checker-webpack-plugin을 사용해 타입 검사 작업을 따로 수행하게 해

소요 시간을 감소시켜준다,

 

또, 리액트의 경우엔 기본 설정에 react-docgen-typescript-plugin 이 추가로 설정된다.

(react-docgen : 리액트 컴포넌트에서 사용된 타입스크립트 타입들을 추출해 문서로 만들어주는 도구)

(typescript 유무의 차이는 propTypes 대신 Typescript 에서 정의된 속성에 대한 파싱 여부) 

 

 

설정값을 입력하는 방법

.storybook/main.js 영역에 아래와 같이 typescript 코드를 작성함으로서 세부 설정이 가능하다.

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [].
  typescript: {
    // fork-ts-checker-webpack-plugin 사용 여부 옵션 (default : false)
    check: false,
    
    // 위에서 fork-ts-checker-webpack-plugin을 사용한다 설정시, 그에 전달할 옵션들
    checkOptions: {},
    
    // 프로세서가 실행시킬 docgen의 종류 ('react-docgen-typescript', 'react-docgen', false)
    reactDocgen: 'react-docgen-typescript',
    
    // 위에서 react-docgen-typescript를 사용한다 설정시, 전달해줄 옵션들
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};