Strategi Paket Tipe Bersama
Buat paket types khusus yang digunakan di seluruh monorepo.
Strategi Paket Tipe Bersama adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.
Mengapa Menggunakan Paket Tipe Bersama
Berbagi tipe antara frontend dan backend menghilangkan perbedaan antara kontrak API. Satu sumber kebenaran berarti galat saat kompilasi ketika bentuk API berubah.
// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }Struktur Paket
Jaga agar paket tipe tetap minimal: hanya ekspor tipe, tanpa logika saat dijalankan. Dengan begitu, paket bebas efek samping dan dapat dihapus dari bundel jika tidak digunakan.
packages/types/
├── src/
│ ├── index.ts # re-exports all
│ ├── user.ts
│ ├── product.ts
│ └── api.ts
├── tsconfig.json
└── package.jsontsconfig untuk Paket Tipe
Aktifkan emitDeclarationOnly agar tidak ada JavaScript yang dihasilkan—hanya berkas .d.ts yang dirujuk oleh konsumen.
{
"compilerOptions": {
"composite": true,
"declaration": true,
"emitDeclarationOnly": true,
"outDir": "./dist",
"rootDir": "./src"
}
}Menggunakan Paket Tipe
Referensikan paket tipe di API dan aplikasi web, lalu impor tipe dengan import type untuk menghindari beban saat dijalankan.
import type { User, ApiResponse } from "@myapp/types";
async function getUser(id: string): Promise<ApiResponse<User>> {
// ...
}Menjaga Tipe Tetap Aman untuk Serialisasi
Tipe yang digunakan bersama oleh klien dan server sebaiknya hanya menyertakan nilai yang dapat diserialisasi menjadi JSON. Hindari objek Date—gunakan string (ISO) sebagai gantinya.
// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }Membuat Versi Paket Tipe
Beri versi pada paket tipe Anda dengan semver. Perubahan yang memutus kompatibilitas (menghapus atau mengganti nama suatu bidang) merupakan kenaikan versi mayor.
# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minorMembuat Tipe dari OpenAPI
Otomatiskan paket tipe dengan membuatnya dari spesifikasi OpenAPI menggunakan openapi-typescript. Dengan demikian, tipe selalu sesuai dengan backend.
npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.tsMenggunakan Zod untuk Tipe Saat Dijalankan dan Saat Kompilasi
Definisikan tipe dengan skema Zod dan simpulkan tipe TypeScript darinya. Validasi saat dijalankan dan tipe statis sama-sama berasal dari satu sumber.
import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;Menghindari Dependensi Melingkar
Paket tipe sebaiknya tidak mengimpor paket ruang kerja lain untuk mencegah rantai dependensi melingkar. Jadikan paket ini simpul daun dalam graf dependensi.
// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/Menguji Ketepatan Tipe
Gunakan tsd untuk menulis pernyataan tingkat tipe yang memverifikasi bahwa tipe bersama sesuai dengan yang diharapkan.
import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });Ringkasan: Strategi Tipe Bersama
Paket tipe bersama menghilangkan perbedaan API: hasilkan hanya deklarasi, jaga agar tipe dapat diserialisasi menjadi JSON, gunakan versi semver, buat secara otomatis dari OpenAPI jika diperlukan, dan uji dengan tsd.
Pemeriksaan Singkat
Mengapa tipe API bersama sebaiknya menggunakan string, bukan Date?
Yang Anda Pelajari
Paket tipe bersama merupakan satu sumber kebenaran untuk kontrak API. Jadikan paket ini hanya berisi deklarasi, aman untuk JSON, diberi versi dengan semver, dan bila diperlukan dibuat dari OpenAPI untuk menghilangkan perbedaan antara frontend dan backend.
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Strategi Paket Tipe Bersama” gratis?
Ya — teks lengkap “Strategi Paket Tipe Bersama” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Strategi Paket Tipe Bersama”?
Buat paket types khusus yang digunakan di seluruh monorepo. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Strategi Paket Tipe Bersama” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penjelasan Referensi Proyek TypeScript
- Workspace pnpm dengan TypeScript
- Strategi Paket Tipe Bersama
- Build Inkremental dan Cache dalam Monorepo