تلات أسماء متشابهة · مذكرات سعيد

الاسم مش الوظيفة

الكلمة tsx بتيجي في تلات أماكن، وكل مكان معناه مختلف:

الاسم	ده إيه	بيعمل إيه
`.tsx`	امتداد ملف	TypeScript مكتوب فيه JSX، زي زرار React
`typescript`	حزمة على npm	بتثبت أمر `tsc` عشان الفحص والـ compile
`tsx`	حزمة تانية على npm	بتشغّل `.ts` و`.tsx` على Node

تثبيت typescript مش بيدي أمر tsx، وتثبيت tsx مش بيفحص الأنواع.

الملف ده TypeScript عادي، بس مسموح فيه بـ JSX:

Button.tsx

type Props = { label: string };export function Button({ label }: Props) {  return <button>{label}</button>;}

عشان tsc يفهم السطر اللي فيه <button>، لازم jsx في tsconfig.json. ده إعداد في حزمة typescript، مش الحزمة التانية.

ولو عايز تشغّل ملف .tsx بأمر node لوحده، Node 26 بيرفض الامتداد. ده اللي هنشوفه في فصل حزمة tsx.

🧠 اختبر نفسك

١) نزلت حزمة typescript. تقدر تشغّل pnpm exec tsx file.ts؟

لأ. أمر tsx من حزمة اسمها tsx، مش من حزمة typescript.

٢) ملف Button.tsx معناه إيه؟

ملف TypeScript فيه JSX. الامتداد مش الحزمة اللي بتشغّل الملفات.