メインコンテンツへスキップ

セクション 3: その他の懸念事項

React の記述は、React だけに関わることとは限りません。Redux などの他のライブラリには焦点を当てていませんが（詳細は下記参照）、React + TypeScript でアプリケーションを作成する際のその他の一般的な懸念事項に関するヒントをいくつか紹介します。

アプリケーションではなく TypeScript ライブラリの記述​

TypeScript を使用すると、特に React + TypeScript **アプリケーション** を構築する場合、propTypes は不要に見えるかもしれませんが、JavaScript で作業している開発者が使用できる**ライブラリ**を作成する際には依然として関連性があります。

interface MyComponentProps {
  autoHeight: boolean;
  secondProp: number;
}

export class MyComponent extends React.Component<MyComponentProps, {}> {
  static propTypes = {
    autoHeight: PropTypes.bool,
    secondProp: PropTypes.number.isRequired,
  };
}

何か追加したいことですか？ issue を作成してください.

コンポーネントへのコメント​

TypeScript は、TypeScript 用の JSDoc の一種である TSDoc を使用します。これは、コンポーネントライブラリを作成し、オートコンプリートやその他のツール（Docz PropsTable など）で便利な説明を表示させるのに非常に便利です。覚えておくべき重要なことは、注釈を付けるもののすぐ上の行に/** YOUR_COMMENT_HERE */構文を使用することです。

interface MyComponentProps {
  /** Description of prop "label".
   * @default foobar
   * */
  label?: string;
}

/**
 * General component description in JSDoc format. Markdown is *supported*.
 */
export default function MyComponent({ label = "foobar" }: MyComponentProps) {
  return <div>Hello world {label}</div>;
}

TypeScript Playground で表示

何か追加したいことですか？ issue を作成してください.

名前空間付きコンポーネント​

類似のコンポーネント、または親子関係のあるコンポーネントを作成する場合、コンポーネントに名前空間を付けることが役立つことがよくあります。型はObject.assign()を使用して簡単に追加できます。

import { forwardRef } from "react";

const Input = (props: any) => <input {...props} />;

const Form = forwardRef<HTMLDivElement, any>(
  ({ children, ...otherProps }, ref) => (
    <form {...otherProps} ref={ref}>
      {children}
    </form>
  )
);

/**
 * Exported components now can be used as `<Form>` and `<Form.Input>`
 */
export default Object.assign(Form, { Input: Input });

TypeScript Playground で表示

(@bryceosterhaus によって寄稿されました。 詳しい議論 を参照してください)

何か追加したいことですか？ issue を作成してください.

デザインシステム開発​

TypeScript を受け入れるための設定が基本的に1 行 で済む Docz が気に入っています。しかし、まだ新しく、いくつかの粗い部分があります（まだ v1.0 より前なので、多くの破壊的変更があります）。

Storybook を使用した開発については、ここで書いたドキュメントを参照してください。 https://storybook.js.org/configurations/typescript-config/ 自動的なプロパティタイプのドキュメント生成が含まれており、素晴らしいです :)

何か追加したいことですか？ issue を作成してください.

Flow からの移行​

Flow から移行している大規模プロジェクトをチェックして、懸念事項とヒントを収集する必要があります。

便利なライブラリ

この分野で具体的なアドバイスがあれば、PR を提出してください！

何か追加したいことですか？ issue を作成してください.

Prettier​

TypeScript の Prettier に特別な秘密はありません。しかし、すべてのコミットで Prettier を実行するのは良い考えです！

$ yarn add -D prettier husky lint-staged
// inside package.json
{
  //...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "src/*.{ts,tsx,js,jsx,css,scss,md}": [
        "prettier --trailing-comma es5 --single-quote --write",
        "git add"
      ],
      "ignore": ["**/dist/*, **/node_modules/*"]
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5"
  }
}

ESLint との統合は問題になる可能性があります。まだこれについてはあまり書いていません。強い意見があれば、ぜひご協力ください。役に立つ gist がここにあります。

ライブラリアーザーの場合、これは tsdx で設定されています。新しいhttps://ts-engine.dev/ プロジェクトも確認することをお勧めします。

テスト​

はい、型をテストできます！すべてに使用するべきではありませんが、回帰を防ぐのに役立ちます。

TypeScript 以外のライブラリとの連携 (独自の index.d.ts の記述)​

de-indent を使用したいが、型付けされておらず、DefinitelyTyped にない場合、このようなエラーが発生します。

[ts]
Could not find a declaration file for module 'de-indent'. '/Users/swyx/Work/react-sfc-loader/node_modules/de-indent/index.js' implicitly has an 'any' type.
  Try `npm install @types/de-indent` if it exists or add a new declaration (.d.ts) file containing `declare module 'de-indent';` [7016]

そのため、プロジェクト内の任意の場所にモジュール定義を含む.d.tsファイルを作成します。

// de-indent.d.ts
declare module "de-indent" {
  function deindent(): void;
  export = deindent; // default export
}
詳細な議論

その他のヒントはありますか？このトピックについてご協力ください！いくつかの参照を含む進行中の issue がここにあります。 issue でより多くの議論と例を紹介しています。

コンパイル速度​

大規模な TS プロジェクトのコンパイルは遅くなる可能性があります。いくつかのヒントを以下に示します。