Add Generic Data Typing for matter Frontmatter Parsing

emadbaqeri commented

2023-12-08 13:07:43 +00:00

(Migrated from github.com)

The matter function currently returns a GrayMatterFile<string>, which loses type information about the expected data shape.

It would be better to allow passing a generic type parameter for the data property, like this:

interface PostMetadata {
  title: string;
  description: string;
}

declare function matter<T>(content: string): GrayMatterFile<string, T>;

const file = matter<PostMetadata>(`markdown string`); 

file.data.title; // typed as string

This way consumer code could get type safety when accessing the metadata.

For example in my case I'm parsing MDX files that expect title and description in the frontmatter. With generic data types I could get code completion and validation for those fields.

Potentially the GrayMatterFile type could be updated to add a second generic parameter:

interface GrayMatterFile<TContent, TData> {
  content: TContent;
  data: TData;   
  // ...
}

Please let me know your idea, and even let me know if I can do this in the current version of the lovely gray-matter.

The `matter` function currently returns a `GrayMatterFile<string>`, which loses type information about the expected `data` shape. It would be better to allow passing a generic type parameter for the `data` property, like this: ```typescript interface PostMetadata { title: string; description: string; } declare function matter<T>(content: string): GrayMatterFile<string, T>; const file = matter<PostMetadata>(`markdown string`); file.data.title; // typed as string ``` This way consumer code could get type safety when accessing the metadata. For example in my case I'm parsing MDX files that expect title and description in the frontmatter. With generic data types I could get code completion and validation for those fields. Potentially the GrayMatterFile type could be updated to add a second generic parameter: ```typescript interface GrayMatterFile<TContent, TData> { content: TContent; data: TData; // ... } ``` Please let me know your idea, and even let me know if I can do this in the current version of the lovely `gray-matter`.

👍 2

emadbaqeri commented

2023-12-08 13:19:40 +00:00

(Migrated from github.com)

I should mention that I'm doing a type casting using as and this doesn't make me happy but it does the job.

type Content = GrayMatterFile<string> & {
  data: { title: string, description: string }
}
const content = parsedContent as Content

I should mention that I'm doing a type casting using `as` and this doesn't make me happy but it does the job. ```typescript type Content = GrayMatterFile<string> & { data: { title: string, description: string } } const content = parsedContent as Content ```

ardunster commented

2023-12-29 00:06:11 +00:00

(Migrated from github.com)

I would enjoy a similar feature. As is, I'm just assigning a new object from my file parsing function using just the fields I expect, and returning that, but being able to specify the type on the return from matter() would be super handy.

I would enjoy a similar feature. As is, I'm just assigning a new object from my file parsing function using just the fields I expect, and returning that, but being able to specify the type on the return from `matter()` would be super handy.

ardunster commented

2023-12-29 00:11:49 +00:00

(Migrated from github.com)

Actually, it looks like this issue has been brought up before, and has been open for a long time with no feedback from the library author. Kind of disappointing. https://github.com/jonschlinkert/gray-matter/issues/135

jrock2004 commented

2024-05-06 23:18:16 +00:00

(Migrated from github.com)

I am trying to find where but someone posted this code snippet and its made my life easier

import matter from 'gray-matter';

const typedMatter = <T = any>(markdown: string) => {
  const rawMatter = matter(markdown);

  return {
    ...rawMatter,
    data: rawMatter.data as T,
  };
};

export default typedMatter;

I am trying to find where but someone posted this code snippet and its made my life easier ``` import matter from 'gray-matter'; const typedMatter = <T = any>(markdown: string) => { const rawMatter = matter(markdown); return { ...rawMatter, data: rawMatter.data as T, }; }; export default typedMatter; ```

👍 5

Rows
Columns

Add Generic Data Typing for matter Frontmatter Parsing #168