理系公務員のプログラミング日記

ESLintを導入したらめちゃくちゃ指摘された

この前勉強したESLintをこのブログにも導入したらアホみたいに大量に指摘されました。厳しい。
直すために同じようなNext.jsでブログを作ってる人のソースコードを見たりして片っ端から調べてたら3日かかりました。

直す過程で引っかかった箇所をメモしておきます。

非同期処理

非同期処理を行うには、その処理をPromiseオブジェクトで包んで生成する。
Promiseオブジェクトの生成にはnew Promiseを使う方法と、 Promise.resolveを使う方法がある。

違いについてはこちら
Qiita:new PromiseとPromise.resolveの違い
内部でエラーが出ないのなら、シンタックス・シュガーのPromise.resolveを使っておけば良いかな？

ここでTypeScriptでは戻り値はPromiseオブジェクトなので、その型定義はPromiseオブジェクトであることを示し、<>内にPromiseで包まれているデータの型を記述する。

// PostData[]の入ったPromiseオブジェクトを生成
export const getAllPostsData = (): Promise<PostData[]> => {
    // Get file names under /posts
    const allPostsData = fileNames.map(
        (fileName: string) => getPostDataByFileName(fileName)
    )

    // 日付順にソート
    return Promise.resolve(allPostsData.sort((a: PostData, b: PostData) => a.date < b.date ? 1 : -1));
}

TypeScriptの型をasで変換する

下記のコードはMarkDownのファイル名からメタデータ(title,date,image)と本文(content)を生成するコード。
matterResultに定義された型であるGrayMatterFileが{ data: {[key: string;]: string} content: string; } となっていた。

このまま使うとmatterResultから生成する(title,date,image)が{[key:string]: string}型になって嬉しくなかったので、 as（型アサーション）でdataType型に無理矢理変換した。
（あまり上手な方法ではない気がするが・・・）

const getMatterFileContents = (id: string): GrayMatterFile<Input> => {
    // マークダウンファイルのフルパス
    const fullPath = path.join(postsDirectory, `${id}.md`)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    // use gray-matter to parse the post metadata section
    return matter(fileContents)
}

const getPostDataByFileName = (fileName: string): PostData => {
    const id = fileName.replace(/\.md$/, '')

    // matterResult: matter.GrayMatterFile<matter.Input>

    // type matter.GrayMatterFile<matter.Input>  = {
    //     data: { [key: string]: string; }
    //     content: string;
    // }
    const matterResult　= getMatterFileContents(id);

    type dataType = {
        title: string,
        date: Date,
        image: string,
    }
    const { data } = matterResult;
    const { title, date, image } = data as dataType;
    const { content } = matterResult;

    return {
        id,
        title,
        date,
        image,
        content
    };
};