Type Safety when reading .md content using GitHub API

[shami-dev]

GitHub API and TypeScript

What should I do to avoid the type error (squiggling my content, const content = result.data.content) when fetching the contents of the .md file from the repo?

Body

Hi,

I'm struggling with an error in TypeScript when receiving content from my .md file in the GitHub repo. It means that the result.data object does not have a property named content.

This is the small part of my code: const data = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}';

This is the first part of the error: "Property 'content' does not exist on type '{ type: "dir" | "file" | "submodule" | "symlink"; size: number; name: string; path: string; content?: string | undefined; sha: string; url: string; git_url: string | null; html_url: string | null; download_url: string | null; _links: { ...; }; }[] | { ...; } | { ...; } | { ...; }'."

Would be grateful, if you could help!

[RaflyLesmana3003]

Hello,

The error you're encountering indicates that the TypeScript compiler is unable to find the 'content' property in the object type you're using. To resolve this issue, you need to ensure that the type of the 'result.data' object aligns with the structure you're expecting.

The GitHub API response for fetching a file's content is an array of objects, where each object represents a file or directory in the repository. To access the content of a specific file, you'll need to identify the correct object in the array and access its 'content' property.

Here's an example of how you can modify your code to avoid the type error:

const data = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}');
const file = data.data.find((item: any) => item.name === 'your-file.md');

if (file && 'content' in file) {
  const content = file.content;
  // Continue with your logic here
} else {
  // Handle the case when the file or content is not found
}

In this example, we use the Array.prototype.find method to search for the object with the desired file name in the data.data array. If the file is found and it has a 'content' property, we can safely access it without triggering a type error.

Make sure to replace 'your-file.md' with the actual name of the Markdown file you're trying to retrieve.

By performing this check, you can ensure that the 'content' property exists before accessing it, preventing the TypeScript compiler from raising a type error.

I hope this helps! Let me know if you have any further questions.

[shami-dev]

Thank you for your help. That makes sense.
Debugged with ChatGPT. It suggested me the following:

const content = (data.data as { content?: string }).content;
if (!content) {
    throw new Error('No content found');
}
//...

Is it a good idea?)

[RaflyLesmana3003]

Yes, that is also a valid approach to handle the type error and ensure that the 'content' property exists before accessing it. By using a type assertion (data.data as { content?: string }), you are telling the TypeScript compiler to treat the 'data.data' object as having an optional 'content' property of type string.