修复fuwari构建时的类型警告

第一次用Astro搭建博客，看中了个叫fuwari的主题，就clone下来部署。按照文档pnpm install然后pnpm dev。本地构建没问题，但是在github的Actions构建时，Code quality和Build and Check就老是failures。其实这没什么，但是只要一出错，github 工作流那边就会发邮件报告failures给我。 receive error email 想到每次发文章都会触发这个，于是我尝试着修一下。

Fix ts报错#

既然是github Actions触发的，那么就先看.github/workflows下的文件，找到了一个名为build.yml文件

1
check:
2
    steps:
3
        - name: Run Astro Check
4
          run: pnpm astro check

所以push上去工作流会自动执行pnpm astro check 视角再转到package.json

1
"scripts": {
2
  "dev": "astro dev",
3
  "start": "astro dev",
4
  "check": "astro check",
5
  "build": "astro build && pagefind --site dist",
6
  "preview": "astro preview",
7
  "astro": "astro",
8
  "type-check": "tsc --noEmit --isolatedDeclarations",
9
  "new-post": "node scripts/new-post.js",
10
  "format": "biome format --write ./src",
11
  "lint": "biome check --write ./src",
12
  "preinstall": "npx only-allow pnpm"
13
},

根据build.yml 和工作流的报错，不难看出每次push上去都会执行 pnpm check 和 pnpm type-check。我们本地运行脚本试一下。果然 type check error astro check error

解决方法一#

解决掉提出问题的人,修改package.josn中的type-check，

1
  "scripts": {
2
    "type-check": "tsc --noEmit",
3
  },

解决方法二#

TypeScipt报的错误都是文件的函数没有显式的写出返回值类型。只要在每个报错的文件里的函数写上返回值类型就好。对比下面的代码修改一下就好。

1
export const LIGHT_MODE = "light";
2
export const DARK_MODE = "dark";
3
export const AUTO_MODE = "auto";
4
export const DEFAULT_THEME: typeof AUTO_MODE = AUTO_MODE;
5

6
export const BANNER_HEIGHT_HOME: number = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND;

1
export const collections: Record<
2
  string,
3
  ReturnType<typeof defineCollection>
4
> = {

1
export async function GET(context: APIContext): Promise<Response> {

1
export function pluginCustomCopyButton(): ReturnType<typeof definePlugin> {

1
export function pluginLanguageBadge(): ReturnType<typeof definePlugin> {
2
  return definePlugin({
3
    name: "Language Badge",
4
        baseStyles: () => `
5
      [data-language]::before {
6
        position: absolute;
7
        z-index: 2;

1
export async function getSortedPosts(): Promise<CollectionEntry<"posts">[]> {

1
export function applyThemeToDocument(theme: LIGHT_DARK_MODE): void {

1
export function pathsEqual(path1: string, path2: string): boolean {

1
export function url(path: string): string {

Fix astro check时的报错#

1
export let tags: string[] = [];
2
export let categories: string[] = [];
3

4
const params = new URLSearchParams(window.location.search);
5
  data: {
6
    title: string;
7
    tags: string[];
8
    category?: string;
9
    category: string | null;
10
    published: Date;
11
  };
12
}

1
let mode: LIGHT_DARK_MODE = AUTO_MODE;
2
panel?.classList.remove("float-panel-closed");
3
panel?.classList.add("float-panel-closed");

这些都修改完后再执行pnpm check 和 pnpm type-check还有pnpm format格式化代码就能顺利通过，github Actions那边也不会有问题。

ts check success and astro check success

总结#

仓库作者使用—isolatedDeclarations会导致每个声明文件独立生成，不依赖其他文件，所以ts在检查类型时发现没有显式标注类型会报错。svetle部分就是svetle4和svetle5混用了。