gray-matterという便利なライブラリがあります。
「Next.js＋gray-matterのススメ」でも書いたようにコンテンツとコンフィグをまとめて１つのマークダウンにかけるようなやつです。
TypeScript でセクションを使う時に少し困ったのでメモしておきます。
excerpt / 要約 と sections / 章 はオプションで指定する必要があります。
Typescript だと型が決まっているのでどちらかだけ使う時でも、ちゃんと false で指定しないといけません。
|
1 2 3 4 |
import matter from "gray-matter"; console.log( matter(require("./test.md").default, { excerpt: false, sections: true }) ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
--- title: I'm front matter --- main contents. ---sec1 title: First section --- Section one. ---sec2 title: Second section --- Section two. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ content: '\nmain contents.\n', data: { title: "I'm front matter" }, isEmpty: false, excerpt: '', sections: [ { key: 'sec1', data: 'title: First section\n', content: '\nSection one.\n' }, { key: 'sec2', data: 'title: Second section\n', content: '\nSection two.\n' } ] } |
ここまではサンプルにもある通り問題ありません。
セクションに触ろうとすると以下のエラーが出ます。
|
1 2 3 4 5 |
const m = matter(require("./test.md").default, { excerpt: false, sections: true, }); console.log(m.sections); //error |
プロパティ ‘sections’ は型 ‘GrayMatterFile<any>’ に存在しません。ts(2339)
実際に型定義ファイル gray-matter.d.ts を見てみると sections がありません。
かなり有名どころで使われるライブラリなので、見落としや理由があるのかもしれませんがとりあえず、このままだと不便です。
gray-matter.d.ts を自分の types フォルダにコピーして以下の部分を書き換えます。
|
1 2 3 4 5 6 7 8 9 10 |
interface GrayMatterFile<I extends Input> { data: { [key: string]: any }; content: string; excerpt?: string; orig: Buffer | I; language: string; matter: string; stringify(lang: string): string; sections: { [key: string]: any }[]; } |
参照のため tsconfig.json の "paths" にも "gray-matter": ["types/gray-matter"]を加えます。
これで sections の中身を取り出せるようになりました。
|
1 2 3 4 5 |
console.log(m.sections.filter((s) => s.key == "sec1")[0]?.content); //Section one. console.log(m.sections.filter((s) => s.key == "sec2")[0]?.data); //title: Second section |