4.2 KiB

Raw Blame History

コードベースのベストプラクティス

一般的な JavaScript

ほとんどの場合、リンターは、コードベースの好ましいプラクティスに反するフォーマットを警告します。

クラスベースのコンポーネントよりも関数コンポーネントの使用を推奨します。

特定の TypeScript

JavaScript ファイルを TypeScript に移行する

Git のファイル履歴を保持する

ファイル形式を <filename>.js から <filename>.ts (もしくは .tsx) へ変更すると、元のファイルが削除され新しいファイルが作成される場合があります。それ以外の場合は、Git においてファイル名が変更されます。ファイルの履歴を保存できるのが理想です。

そのための最善策は次のとおりです。

ファイル名を変更する
フラグ --no-verify でコミットして、Husky がリントエラーについて不平を言うことを防ぐ
別のコミットで、移行のために TypeScript にリファクタリングする

[!NOTE] VScode 等のエディターは、ファイルが削除され新しいファイルが作成されたことを表示する可能性があります。 git add . に CLI を使用すると、VSCode はファイル名が変更されたものとしてステージに表示します。

命名規則

インターフェースと型

ほとんどの場合、型宣言にインターフェース宣言を使用することを推奨します。

React コンポーネントプロパティ - サフィックスは Props

interface MyComponentProps {}
// type MyComponentProps = {};
const MyComponent = (props: MyComponentProps) => {};

React ステートフルコンポーネント - サフィックスは State

interface MyComponentState {}
// type MyComponentState = {};
class MyComponent extends Component<MyComponentProps, MyComponentState> {}

デフォルト - PascalCase 内のオブジェクト名

interface MyObject {}
// type MyObject = {};
const myObject: MyObject = {};

Redux

Action 定義

enum AppActionTypes = {
  actionFunction = 'actionFunction'
}

export const actionFunction = (
  arg: Arg
): ReducerPayload<AppActionTypes.actionFunction> => ({
  type: AppActionTypes.actionFunction,
  payload: arg
});

Reduce の方法

// Base reducer action without payload
type ReducerBase<T> = { type: T };
// Logic for handling optional payloads
type ReducerPayload<T extends AppActionTypes> =
  T extends AppActionTypes.actionFunction
    ? ReducerBase<T> & {
        payload: AppState['property'];
      }
    : ReducerBase<T>;

// Switch reducer exported to Redux combineReducers
export const reducer = (
  state: AppState = initialState,
  action: ReducerPayload<AppActionTypes>
): AppState => {
  switch (action.type) {
    case AppActionTypes.actionFunction:
      return { ...state, property: action.payload };
    default:
      return state;
  }
};

Dispatch の方法

コンポーネント内で、必要なアクションとセレクターをインポートします。

// Add type definition
interface MyComponentProps {
  actionFunction: typeof actionFunction;
}
// Connect to Redux store
const mapDispatchToProps = {
  actionFunction
};
// Example React Component connected to store
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
  const handleClick = () => {
    // Dispatch function
    actionFunction();
  };
  return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
};

export default connect(null, mapDispatchToProps)(MyComponent);

4.2 KiB Raw Blame History