نيو ويسبر نشاط خدمات تقنية معلومات مسجل في طوكيو. نقدم تطوير البرمجيات والألعاب والتطبيقات وإنتاج الويب/المحتوى والترجمة لعملاء من أسواق مختلفة.
الخبرة: Next.js • TypeScript • React • Node.js • مواقع متعددة اللغات • SEO • تحسين الأداء
بصراحة، كنت أكره TypeScript.
كنت أشعر أنني أكتب كودًا فقط "لإرضاء" المترجم، بدلًا من بناء الميزات التي أحتاجها.
لكن بعد بناء عدة تطبيقات Full-Stack باستخدام Next.js، أدركت الحقيقة: TypeScript هو الشيء الوحيد الذي يقف بينك وبين تلف قاعدة البيانات في الساعة الثالثة فجراً.
المشكلة ليست في TypeScript. المشكلة هي أن معظم الدروس تعلمك كيف تكتب "الأنواع"، ولا تعلمك كيف تكتب "التطبيقات".
إليك كيف تتوقف عن التخمين وتجعل TypeScript يعمل لصالحك.
إذا كان لديك واجهة User في مجلد الفرونت-إند، ونسخة طبق الأصل منها في الباك-إند، فأنت تفعل ذلك بشكل خاطئ.
بمجرد أن يتغير أحدهما، سينكسر الآخر بصمت، وسترسل Bug للإنتاج.
الحل: ضع نماذج البيانات الأساسية في مجلد مشترك.
// packages/types/src/user.ts
export interface User {
id: string;
email: string;
role: "admin" | "user";
}
الآن استورد هذا الملف في كل مكان. إذا غيرت الـ role، سيتحول الكود للون الأحمر في المشروع كاملًا. هذه ميزة.
"ماذا يرجع هذا الرابط (Endpoint)؟"
إذا كانت إجابتك "أعتقد أنه كائن..."، فقد خسرت المعركة. اجبر كل Endpoint على إرجاع نفس الهيكل تمامًا.
// types/api.ts
export interface ApiResponse<T> {
data: T;
success: boolean;
error?: string;
}
الاستخدام:
app.get("/users", async (req, res) => {
const users = await db.users.findMany();
// TypeScript سيجبرك على الالتزام بهذا الهيكل
const response: ApiResponse<User[]> = {
data: users,
success: true,
};
res.json(response);
});
أرى هذه "الجريمة" ترتكب يومياً:
// خطأ
const { data } = useQuery(["user"], fetchUser);
// data يعتبر 'any' أو 'unknown'
أنت بهذا الشكل تخليت عن كل فوائد TypeScript في اللحظة الأخيرة. افعل هذا بدلًا من ذلك:
// صحيح
function useUser(id: string) {
return useQuery<User>({
queryKey: ["user", id],
queryFn: () => fetchUser(id),
});
}
الآن عندما تكتب data.، المحرر يعرف بالضبط ما هي الحقول الموجودة.
TypeScript يختفي بمجرد تشغيل الكود (Runtime). إذا أرسل المستخدم بيانات JSON خاطئة، TypeScript لن ينقذك. Zod سينقذك.
استخدم Zod عند كل حدود الـ API.
import { z } from "zod";
const UserSchema = z.object({
email: z.string().email(),
age: z.number().min(18),
});
type UserInput = z.infer<typeof UserSchema>;
app.post("/users", (req, res) => {
// سيرمي خطأ إذا كانت البيانات غير مطابقة
const body = UserSchema.parse(req.body);
saveUser(body);
});
هذه هي المنطقة المثالية: أمان أثناء التشغيل (Zod) + أمان أثناء الكتابة (TypeScript).
لا تحتاج لتعقيدات الـ Generics لتكتب كوداً جيداً. تحتاج فقط للانضباط.
ApiResponse<T> موحدuseUser مقابل useQuery)هل تحتاج مساعدة في بناء تطبيق آمن ومحكم؟ في NeoWhisper، نحن نبني تطبيقات جاهزة للإنتاج باستخدام TypeScript وNext.js. تحقق من خدماتنا أو تواصل معنا.