```ts
export const PeopleType = {
  A: 'A',
  B: 'B',
  C: 'C',
} as const

export type PeopleType = typeof PeopleType[keyof typeof PeopleType]
```

[TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します - LINE ENGINEERING](https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/)

## Memo

`as const`を使用しないと、`PeopleType`が`string`として推論される

```ts
const str: PeopleType = 'Text'
// error発生しない
```


TypeScriptでEnumを使用せずそれっぽいものを作る

<pre><code>export const PeopleType = {
  A: 'A',
  B: 'B',
  C: 'C',
} as const

export type PeopleType = typeof PeopleT...

## 解決方法

`TextFieldProps`ではなく、`StandardTextFieldProps`を使用する。

[Cannot pass underline class through TextField as InputProps · Issue #13794 · mui/material-ui](https://github.com/mui/material-ui/issues/13794)

## 問題

```tsx
import React from 'react'
import { TextField, TextFieldProps } from '@material-ui/core'

type Props = TextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
   // 👇　TypeError
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

## 修正

```tsx
import React from 'react'
// 👇 StandardTextFieldProps に変更
import { TextField, StandardTextFieldProps } from '@material-ui/core'

type Props = StandardTextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

MuiでTextFieldにunderlineを設定しようとしたらType Errorが発生する

[axios/index.d.ts at 6b4fd93e6886c281ef1a51fca556616ce17f8fba · axios/axios](https://github.com/axios/axios/blob/6b4fd93e6886c281ef1a51fca556616ce17f8fba/index.d.ts)

```ts
import axios, { AxiosRequestConfig } from 'axios';

const requestParam: AxiosRequestConfig = {
  method: 'get',
  url: `${process.env.NEXT_PUBLIC_API_ENDPOINT}/users`,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
};

const { data }: any = await axios(requestParam);
```

axiosの型メモ

## ドキュメント

- [intercom/contentful-typescript-codegen: Generate TypeScript interfaces from a Contentful environment](https://github.com/intercom/contentful-typescript-codegen)
    - 使用したライブラリ
- [Contentfulで型安全にコンテンツを取得する](https://silurus.dev/article/7DJobP47XUTkDjNavzyf2s)

## インストール

```bash
yarn add contentful
yarn add -D contentful-management dotenv contentful-typescript-codegen @contentful/rich-text-types
```

```bash
npm install contentful
npm install --save-dev dotenv contentful-management contentful-typescript-codegen @contentful/rich-text-types
```

## 実装

`.env`を作成し、各値を設定する。

```.env
CONTENTFUL_SPACE_ID=
CONTENTFUL_ENVIRONMENT=
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=
```

プロジェクトルートに`getContentfulEnvironment.js`を作成する。

```getContentfulEnvironment.js
require('dotenv').config();
const contentfulManagement = require('contentful-management');

module.exports = function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT));
};
```

`package.json`のscriptを追記する。

```json
"scripts": {
  "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
}
```

## 実行

```bash
yarn contentful-typescript-codegen
```

実行すると、`@types/generated/contentful.d.ts`が生成される。

いくつか要らないContent Typeも入っていたので、消した 🤢

## 使用の一例(Next.js)

```jsx
import { IArticle, IArticleFields } from '@/@types/generated/contentful';

interface Props {
	articles: IArticle[];
}

export default unction IndexPage({ articles }: Props) {
	....
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const articles = await client.getEntries({
    content_type: 'article'
  });

  return {
    props: {
      articles: articles.items,
    },
  };
};
```

TypeScriptでEnumを使用せずそれっぽいものを作る

Memo

Related

Tags

Share

Table of Contents