TypeScript Academy · บทเรียน

กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน

สร้างแพ็กเกจชนิดเฉพาะสำหรับใช้ในโมโนรีโปร่วมกัน

กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงควรมีแพ็กเกจชนิดข้อมูลร่วม

การใช้ชนิดข้อมูลร่วมกันระหว่างส่วนติดต่อผู้ใช้และส่วนหลังช่วยกำจัดความคลาดเคลื่อนระหว่างสัญญาของส่วนเชื่อมต่อโปรแกรมประยุกต์ แหล่งข้อมูลจริงเพียงแหล่งเดียวทำให้เกิดข้อผิดพลาดขณะคอมไพล์เมื่อโครงสร้างของส่วนเชื่อมต่อโปรแกรมประยุกต์เปลี่ยนแปลง

// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }

โครงสร้างแพ็กเกจ

ทำให้แพ็กเกจชนิดข้อมูลมีขนาดเล็กที่สุด โดยมีเพียงการส่งออกชนิดข้อมูลและไม่มีตรรกะขณะทำงาน วิธีนี้ทำให้แพ็กเกจไม่มีผลข้างเคียงและตัดส่วนที่ไม่ได้ใช้งานออกได้

packages/types/
├── src/
│   ├── index.ts      # re-exports all
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── tsconfig.json
└── package.json

tsconfig สำหรับแพ็กเกจชนิดข้อมูล

เปิดใช้ emitDeclarationOnly เพื่อไม่ให้สร้าง JavaScript โดยสร้างเฉพาะไฟล์ .d.ts ที่ผู้ใช้แพ็กเกจนำไปอ้างอิงได้

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

การใช้งานแพ็กเกจชนิดข้อมูล

อ้างอิงแพ็กเกจชนิดข้อมูลทั้งในส่วนเชื่อมต่อโปรแกรมประยุกต์และแอปเว็บ และนำเข้าชนิดข้อมูลด้วย import type เพื่อหลีกเลี่ยงค่าใช้จ่ายขณะทำงาน

import type { User, ApiResponse } from "@myapp/types";

async function getUser(id: string): Promise<ApiResponse<User>> {
  // ...
}

การรักษาความปลอดภัยต่อการแปลงชนิดข้อมูล

ชนิดข้อมูลที่ใช้ร่วมกันระหว่างไคลเอนต์กับเซิร์ฟเวอร์ควรมีเฉพาะค่าที่แปลงเป็น JSON ได้ หลีกเลี่ยงออบเจ็กต์ Date และใช้ string (ISO) แทน

// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }

การจัดการเวอร์ชันของแพ็กเกจชนิดข้อมูล

จัดการเวอร์ชันแพ็กเกจชนิดข้อมูลด้วยการกำหนดเวอร์ชันเชิงความหมาย การเปลี่ยนแปลงที่ทำให้เข้ากันไม่ได้ เช่น การลบหรือเปลี่ยนชื่อเขตข้อมูล ให้เพิ่มเวอร์ชันหลัก

# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minor

การสร้างชนิดข้อมูลจาก OpenAPI

ทำให้แพ็กเกจชนิดข้อมูลเป็นแบบอัตโนมัติด้วยการสร้างจากข้อกำหนด OpenAPI โดยใช้ openapi-typescript วิธีนี้รับประกันว่าชนิดข้อมูลจะตรงกับส่วนหลังอยู่เสมอ

npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.ts

การใช้ Zod สำหรับชนิดข้อมูลขณะทำงานและขณะคอมไพล์

กำหนดชนิดข้อมูลด้วยแบบแผน Zod และอนุมานชนิดข้อมูล TypeScript จากแบบแผนเหล่านั้น การตรวจสอบขณะทำงานและชนิดข้อมูลแบบสถิติจึงมาจากแหล่งเดียวกัน

import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;

การหลีกเลี่ยงการพึ่งพาแบบวนกลับ

แพ็กเกจชนิดข้อมูลไม่ควรนำเข้าจากแพ็กเกจเวิร์กสเปซอื่น เพื่อป้องกันสายโซ่การพึ่งพาแบบวนกลับ ให้แพ็กเกจนี้เป็นโหนดปลายสุดในกราฟการพึ่งพา

// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/

การทดสอบความถูกต้องของชนิดข้อมูล

ใช้ tsd เพื่อเขียนการยืนยันระดับชนิดข้อมูลที่ตรวจสอบว่าชนิดข้อมูลร่วมตรงตามที่คาดหมาย

import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });

ทบทวน: กลยุทธ์ชนิดข้อมูลร่วม

แพ็กเกจชนิดข้อมูลร่วมช่วยกำจัดความคลาดเคลื่อนของส่วนเชื่อมต่อโปรแกรมประยุกต์ โดยสร้างเฉพาะคำประกาศ เก็บชนิดข้อมูลที่แปลงเป็น JSON ได้ จัดการเวอร์ชันด้วยการกำหนดเวอร์ชันเชิงความหมาย เลือกสร้างอัตโนมัติจาก OpenAPI และทดสอบด้วย tsd

ตรวจสอบอย่างรวดเร็ว

เหตุใดชนิดข้อมูลของส่วนเชื่อมต่อโปรแกรมประยุกต์ที่ใช้ร่วมกันจึงควรใช้ string แทน Date

สิ่งที่ได้เรียนรู้

แพ็กเกจชนิดข้อมูลร่วมเป็นแหล่งข้อมูลจริงเพียงแหล่งเดียวสำหรับสัญญาของส่วนเชื่อมต่อโปรแกรมประยุกต์ ให้แพ็กเกจมีเฉพาะคำประกาศ ปลอดภัยต่อ JSON จัดการเวอร์ชันด้วยการกำหนดเวอร์ชันเชิงความหมาย และเลือกสร้างจาก OpenAPI โดยอัตโนมัติเพื่อกำจัดความคลาดเคลื่อนระหว่างส่วนติดต่อผู้ใช้กับส่วนหลัง

คำถามที่พบบ่อย

บทเรียน “กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน”

สร้างแพ็กเกจชนิดเฉพาะสำหรับใช้ในโมโนรีโปร่วมกัน คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

อธิบายการอ้างอิงโครงการ TypeScript
เวิร์กสเปซ pnpm กับ TypeScript
กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน
การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป

← กลับไปที่ TypeScript Academy