astro check

ในโปรเจกต์ Next.js การตรวจสอบ TypeScript เป็นกระบวนการสองขั้น: tsc --noEmit จัดการไฟล์ .ts/.tsx และ ESLint (มักใช้กับ @typescript-eslint) จับปัญหาเพิ่มเติม ไฟล์ .astro ไม่ใช่ไฟล์ TypeScript — มี frontmatter block และ HTML template — ดังนั้น tsc จึงไม่สามารถ parse ได้โดยตรง Astro มาพร้อม astro check เพื่อครอบคลุมทั้งคู่ในคำสั่งเดียว

รัน `astro check`

# One-shot check — exit code 1 หากมี errors
npx astro check

# Watch mode — รันใหม่ทุกครั้งที่บันทึกไฟล์ (เหมาะสำหรับ development)
npx astro check --watch

# ตรวจสอบ directory เฉพาะ
npx astro check --root src/content

Output จะเหมือน TypeScript compiler output: file path, line number, column และข้อความ error Errors ใน .astro frontmatter, template expressions และ .ts modules ที่ import มาทั้งหมดจะแสดงที่นี่

`astro check` ครอบคลุมอะไรบ้าง

# astro check จับทั้งหมดนี้:
# 1. Type errors ใน .astro frontmatter
# 2. Missing หรือ wrong-typed Astro.props (หากประกาศ interface Props)
# 3. Type errors ใน template expressions: {someVar}
# 4. Type errors ในไฟล์ .ts / .tsx ที่ import
# 5. Missing imports

เปรียบเทียบกับ `tsc` และ ESLint

// tsconfig.json — Next.js project
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }]
  }
}

// package.json
// "type-check": "tsc --noEmit",
// "lint":       "next lint"
// (สองคำสั่งแยกกัน — สอง pass แยกกัน)

// tsconfig.json — Astro project
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}

// package.json
// "check": "astro check"
// (คำสั่งเดียว — ครอบคลุมไฟล์ .astro + .ts)

// astro/tsconfigs/strict extends:
//   "strict": true
//   "jsx": "react-jsx"        (เมื่อติดตั้ง @astrojs/react)
//   "jsxImportSource": "react"
//   etc.

Astro มาพร้อม base tsconfigs ที่ astro/tsconfigs/strict, astro/tsconfigs/strictest และ astro/tsconfigs/base — extend หนึ่งใน tsconfig.json เพื่อหลีกเลี่ยงการดูแล compiler options object ด้วยตนเองทั้งหมด

Editor tooling

ติดตั้ง VS Code extension อย่างเป็นทางการเพื่อดู errors แบบ inline ในไฟล์ .astro โดยไม่ต้องรัน CLI:

# ใน VS Code — ค้นหา:
# "Astro" โดย "Astro" (astro.build)
# Extension ID: astro-build.astro-vscode

Extension ใช้ language server เดียวกับที่ขับเคลื่อน astro check เมื่อติดตั้งแล้ว คุณจะได้รับ:

เส้นสีแดงบน type errors ใน frontmatter และ template expressions
Autocomplete สำหรับ Astro.props, component imports และ HTML attributes
Go-to-definition ข้ามไฟล์ .astro

`astro check` ใน CI

- name: Type check
  run: npx astro check

เพิ่ม step นี้ก่อน build step ใน CI เพื่อจับ type errors ก่อนที่จะถึง production astro check exit code 1 เมื่อมี error ดังนั้น workflow จะ fail อย่างถูกต้อง

astro check

รัน astro check

astro check ครอบคลุมอะไรบ้าง

เปรียบเทียบกับ tsc และ ESLint

Editor tooling

astro check ใน CI

รัน `astro check`

`astro check` ครอบคลุมอะไรบ้าง

เปรียบเทียบกับ `tsc` และ ESLint

`astro check` ใน CI