[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-settings":3,"nav-course-tabs":225,"blog-article-typescript-la-gi":282},{"site":4,"home":19,"footer":172,"payment":214,"promo":221},{"name":5,"tagline":6,"url":7,"logoUrl":8,"primaryColor":9,"contactEmail":10,"hotline":11,"facebookUrl":12,"youtubeUrl":13,"kungfutechUrl":14,"announcement":15},"MelyDemy","Học lập trình thực chiến từ con số 0","https:\u002F\u002Fmelydemy.io.vn","\u002Fimages\u002Fbrand\u002Flogo.svg?v=3","#dc2626","techmely.creation@gmail.com","","https:\u002F\u002Fwww.facebook.com\u002Fmelydemy.techmely\u002F","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely?sub_confirmation=1","https:\u002F\u002Fkungfutech.io.vn",{"enabled":16,"text":17,"link":18},true,"Ưu đãi Mely 29k — học lập trình trọn đời chỉ từ 29.000đ","\u002Fkhoa-hoc\u002F29k",{"seo":20,"hero":26,"banners":49,"sectionCopy":60,"categories":78,"features":100,"onlyMelyDemy":117,"aboutUs":130,"testimonials":142,"newsletter":167},{"title":21,"description":22,"keywords":23},"MelyDemy - Khoá học lập trình thực chiến dành cho bạn","MelyDemy cung cấp khoá học lập trình Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, học trọn đời chỉ từ 29.000đ.",[24,5,25],"Khoá học lập trình","Thực chiến lập trình",{"badge":27,"title":28,"highlight":29,"description":30,"primaryCta":31,"secondaryCta":34,"stats":36},"Nền tảng học lập trình #1 cho người Việt","Học kỹ năng công nghệ","thực chiến, trọn đời","Hơn 40 khoá học Frontend, Backend, DevOps và AI — video bài bản, source code đi kèm, học mọi lúc mọi nơi.",{"label":32,"to":33},"Khám phá khoá học","\u002Fkhoa-hoc",{"label":35,"to":18},"Ưu đãi 29k",[37,40,43,46],{"value":38,"label":39},"40+","Khoá học",{"value":41,"label":42},"15.000+","Học viên",{"value":44,"label":45},"4.8\u002F5","Đánh giá",{"value":47,"label":48},"Trọn đời","Truy cập",[50,56],{"badge":51,"title":52,"description":53,"link":54,"color":55},"Xu hướng 2026","Lộ trình AI thực chiến","Prompt, workflow và tích hợp công cụ — học theo bài lab, áp dụng ngay vào dự án.","\u002Fkhoa-hoc\u002Fai","#7c3aed",{"badge":57,"title":58,"description":59,"link":18,"color":9},"Mely 29k","Học lập trình từ 29.000đ","Video trọn đời, source code đi kèm — bắt đầu Frontend, Backend hoặc DevOps hôm nay.",{"courses":61,"onlyMelyDemy":64,"about":67,"community":70,"blog":74},{"title":62,"subtitle":63},"Khoá học nổi bật","Các khoá học xây dựng bài bản, đáp ứng nhu cầu thực tế của thị trường",{"title":65,"subtitle":66},"Chỉ có tại MelyDemy","Khoá học chất lượng với mức giá dễ tiếp cận nhất",{"title":68,"subtitle":69},"Lộ trình học trên MelyDemy","Ba lộ trình cốt lõi — Full-stack, DevOps và AI — giúp bạn áp dụng ngay vào dự án thực tế.",{"headline":71,"title":72,"subtitle":73},"Được học viên tin tưởng","Học viên nói gì về MelyDemy","Hàng nghìn học viên đã học lập trình thực chiến — từ sinh viên, fresher đến người chuyển ngành.",{"title":75,"subtitle":76,"listPageSubtitle":77},"Blog","Tin tức, kiến thức công nghệ mới nhất từ MelyDemy","Tổng hợp tin tức AI và công nghệ mới nhất — kiến thức thực chiến cho lập trình viên.",[79,84,88,93,97],{"label":80,"to":81,"icon":82,"color":83},"Frontend","\u002Fkhoa-hoc\u002Fkhoa-hoc-frontend","i-lucide-layout-template","#f97316",{"label":85,"to":86,"icon":87,"color":9},"Backend","\u002Fkhoa-hoc\u002Fkhoa-hoc-backend","i-lucide-server",{"label":89,"to":90,"icon":91,"color":92},"DevOps","\u002Fkhoa-hoc\u002Fkhoa-hoc-devops","i-lucide-container","#0ea5e9",{"label":94,"to":54,"icon":95,"color":96},"AI","i-lucide-sparkles","#8b5cf6",{"label":57,"to":18,"icon":98,"color":99},"i-lucide-ticket-percent","#16a34a",[101,105,109,113],{"title":102,"description":103,"icon":104},"Video trọn đời","Mua một lần, học mãi mãi — cập nhật nội dung miễn phí.","i-lucide-infinity",{"title":106,"description":107,"icon":108},"Source code đi kèm","Mỗi bài học đều có code mẫu để bạn thực hành ngay.","i-lucide-code-xml",{"title":110,"description":111,"icon":112},"Tiếng Việt dễ hiểu","Giảng viên giải thích rõ ràng, ví dụ sát dự án thật.","i-lucide-languages",{"title":114,"description":115,"icon":116},"Cộng đồng hỗ trợ","Hỏi đáp nhanh cùng cộng đồng KungFuTech và mentor.","i-lucide-users-round",[118,122,126],{"title":119,"description":120,"image":121},"Giới thiệu chương trình","\u003Cp>Học lập trình với khoá học chất lượng: video bài giảng, source code và quyền truy cập trọn đời.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-1.jpg",{"title":123,"description":124,"image":125},"Học dễ dàng, chi phí thấp","\u003Cp>Khoá học ngắn gọn, thực tế với mức giá chỉ từ 29K. Theo dõi thường xuyên để cập nhật ưu đãi.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-2.jpg",{"title":127,"description":128,"image":129},"Chọn khoá học và bắt đầu","\u003Cp>Khám phá khoá học Frontend, Backend, DevOps, Mobile và AI — bắt đầu hành trình của bạn hôm nay.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-3.jpg",[131,136,139],{"title":132,"description":133,"icon":134,"image":135},"Backend & Frontend","Xây dựng ứng dụng web từ giao diện đến hệ thống phía sau với công nghệ hiện đại.","i-lucide-layers","\u002Fimages\u002Fhome\u002Fabout-track-1.jpg",{"title":89,"description":137,"icon":91,"image":138},"Triển khai, vận hành và tối ưu hệ thống để ứng dụng chạy ổn định, mở rộng dễ dàng.","\u002Fimages\u002Fhome\u002Fabout-track-2.jpg",{"title":94,"description":140,"icon":95,"image":141},"Xây dựng ứng dụng tích hợp AI, tự động hoá workflow và phát triển sản phẩm thông minh.","\u002Fimages\u002Fhome\u002Fabout-track-3.jpg",[143,147,151,155,159,163],{"fullname":144,"role":145,"description":146},"Nguyễn Minh Anh","Sinh viên CNTT — Đại học Bách Khoa TP.HCM","Rất nhiều khoá học bổ ích từ Frontend, Backend đến DevOps — mình chọn lộ trình phù hợp mà không bị lạc. Video và source trọn đời, ôn lại rất tiện.",{"fullname":148,"role":149,"description":150},"Trần Hoàng Nam","Kế toán chuyển ngành IT — Hà Nội","Khoá AI giúp mình hiểu prompt, workflow và cách tích hợp công cụ vào việc học code hằng ngày. Bài ngắn, học buổi tối không bị quá tải.",{"fullname":152,"role":153,"description":154},"Lê Thị Hương","Fresher Frontend — FPT Software Đà Nẵng","Khoá TypeScript làm rõ type, interface và cách refactor code cũ — mình tự tin review PR và làm task trong dự án thật.",{"fullname":156,"role":157,"description":158},"Phạm Quốc Bảo","Kỹ sư cơ khí — tự học lập trình buổi tối","Lộ trình DevOps (CI\u002FCD, Docker) giúp mình hiểu pipeline deploy thay vì chỉ code local. Checklist từng tuần giữ nhịp học ổn định.",{"fullname":160,"role":161,"description":162},"Võ Thanh Tú","Intern Backend — startup tại TP.HCM","Khoá Node.js và thiết kế API giúp mình nắm REST, validation và database qua bài lab thực tế. Slide đính kèm tiện ôn phỏng vấn.",{"fullname":164,"role":165,"description":166},"Đặng Kim Ngân","Designer chuyển sang UI Developer","Khoá HTML\u002FCSS Grid & Flexbox giúp mình chuyển layout Figma sang markup chuẩn, responsive đúng spec.",{"title":168,"description":169,"placeholder":170,"buttonLabel":171},"Nhận tin khoá học & ưu đãi","Đăng ký email để cập nhật lộ trình mới, workshop và chương trình Mely 29k.","Email của bạn","Đăng ký",{"brandLine":173,"description":174,"columns":175},"MELYDEMY — Học lập trình từ con số 0","Nền tảng khoá học lập trình thực chiến thuộc hệ sinh thái KungFuTech.",[176,184,204],{"title":39,"links":177},[178,180,182],{"label":179,"to":33},"Tất cả khoá học",{"label":181,"to":18},"Ưu đãi Mely 29k",{"label":183,"to":54},"Khoá học AI",{"title":185,"links":186},"Tài nguyên",[187,189,192,195,198,201],{"label":75,"to":188},"\u002Fblog",{"label":190,"to":191},"Giới thiệu","\u002Fgioi-thieu",{"label":193,"to":194},"Liên hệ","\u002Flien-he",{"label":196,"to":197},"Câu hỏi thường gặp","\u002Fcau-hoi-thuong-gap",{"label":199,"to":200},"Điều khoản","\u002Fterms-and-conditions",{"label":202,"to":203},"Chính sách bảo mật","\u002Fprivacy-policy",{"title":205,"links":206},"Hệ sinh thái",[207,209,212],{"label":208,"href":14},"KungFuTech",{"label":210,"href":211},"TechMely YouTube","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely",{"label":213,"href":12},"Facebook MelyDemy",{"bankName":215,"bankCode":216,"accountNumber":217,"accountName":218,"qrTemplate":219,"note":220},"MB Bank","MBBank","0680126400005","PHAM NGOC HOA","https:\u002F\u002Fqr.sepay.vn\u002Fimg?acc={accountNumber}&bank={bankCode}&amount={amount}&des={paymentCode}","Khoá học sẽ được gửi vào email của bạn sau khi thanh toán thành công.",{"promo49k":222},{"enabled":16,"displayPrice":223,"title":57,"description":224},29000,"Học lập trình trọn đời chỉ từ 29.000đ",[226,238,249,260,272],{"id":227,"name":228,"slug":229,"title":24,"canonicalSlug":230,"heroDescription":231,"seoTitle":232,"seoDescription":233,"intro":234},1,"Tất cả các khóa học","tat-ca",null,"Khám phá lộ trình Frontend, Backend, DevOps và AI — học thực chiến với video trọn đời.","Khoá học lập trình online tiếng Việt | MelyDemy","Học lập trình online cùng MelyDemy: khoá Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, video xem trọn đời, kèm source code dự án.",[235,236,237],"MelyDemy là nền tảng khoá học lập trình bằng video tiếng Việt, tập trung vào kỹ năng làm được việc: mỗi khoá đi từ kiến thức nền tảng đến dự án thực tế, có source code đi kèm để bạn thực hành theo từng bài.","Danh mục gồm bốn nhóm chính. Frontend dành cho người muốn xây giao diện web với HTML, CSS, JavaScript, ReactJS hay Next.js. Backend dạy lập trình API, cơ sở dữ liệu và kiến trúc hệ thống với nhiều ngôn ngữ và framework. DevOps hướng dẫn Docker, CI\u002FCD, cloud và vận hành hệ thống. Nhóm AI giúp bạn dùng các công cụ và agent AI để tăng năng suất làm việc.","Bạn có thể lọc theo nhóm hoặc tìm theo tên công nghệ. Khoá học được mua một lần và xem lại không giới hạn thời gian, phù hợp cho cả người mới bắt đầu lẫn lập trình viên muốn mở rộng kỹ năng. Nếu chưa biết nên bắt đầu từ đâu, hãy chọn nhóm Frontend hoặc Backend và xem phần nội dung chi tiết của từng khoá để đánh giá độ phù hợp.",{"id":239,"name":85,"slug":240,"title":85,"canonicalSlug":241,"heroDescription":242,"seoTitle":243,"seoDescription":244,"intro":245},2,"khoa-hoc-backend","backend","API, database và kiến trúc hệ thống — từ nền tảng đến dự án thực tế.","Khoá học lập trình Backend online | MelyDemy","Học lập trình Backend bằng tiếng Việt: xây dựng API, làm việc với cơ sở dữ liệu và thiết kế hệ thống qua các khoá video thực chiến tại MelyDemy.",[246,247,248],"Lập trình Backend là phần xử lý đằng sau mọi ứng dụng: nhận yêu cầu từ giao diện, xử lý nghiệp vụ, lưu và truy vấn dữ liệu rồi trả kết quả về cho người dùng. Các khoá Backend tại MelyDemy hướng dẫn bạn xây dựng API, làm việc với cơ sở dữ liệu quan hệ và NoSQL, xác thực người dùng và triển khai ứng dụng.","Mỗi khoá bắt đầu từ nền tảng ngôn ngữ và framework, sau đó đi tới các chủ đề thực tế như thiết kế REST API, tối ưu truy vấn, bảo mật và kiểm thử. Bạn học qua video, làm theo source code và hoàn thành dự án cuối khoá để có sản phẩm đưa vào hồ sơ.","Hãy chọn ngôn ngữ phù hợp với mục tiêu công việc của bạn, xem nội dung từng chương trong trang khoá học rồi bắt đầu học theo tốc độ riêng. Học viên có thể xem lại bài giảng không giới hạn thời gian.",{"id":250,"name":80,"slug":251,"title":80,"canonicalSlug":252,"heroDescription":253,"seoTitle":254,"seoDescription":255,"intro":256},3,"khoa-hoc-frontend","frontend","HTML, CSS, JavaScript và framework hiện đại — xây giao diện responsive chuẩn doanh nghiệp.","Khoá học lập trình Frontend online | MelyDemy","Học Frontend bằng tiếng Việt: HTML, CSS, JavaScript, ReactJS, Next.js và nhiều hơn nữa, xây giao diện responsive qua khoá video thực chiến tại MelyDemy.",[257,258,259],"Lập trình Frontend là kỹ năng xây dựng phần giao diện người dùng nhìn thấy và tương tác trên web. Các khoá Frontend tại MelyDemy đi từ HTML, CSS và JavaScript nền tảng đến các framework hiện đại như ReactJS và Next.js, giúp bạn dựng giao diện responsive đạt chuẩn doanh nghiệp.","Nội dung nhấn mạnh thực hành: bạn xây dựng từng thành phần giao diện, quản lý trạng thái, gọi API, tối ưu hiệu năng và SEO, rồi hoàn thiện một dự án hoàn chỉnh. Source code được cung cấp để bạn đối chiếu và tự chỉnh sửa.","Nếu mới bắt đầu, hãy học chắc JavaScript trước khi chuyển sang framework. Nếu đã có nền tảng, bạn có thể chọn thẳng khoá ReactJS hoặc Next.js. Xem mục nội dung trong từng khoá để biết chính xác bạn sẽ học những gì.",{"id":261,"name":262,"slug":263,"title":262,"canonicalSlug":264,"heroDescription":265,"seoTitle":266,"seoDescription":267,"intro":268},4,"Devops","khoa-hoc-devops","devops","CI\u002FCD, container và vận hành hệ thống — triển khai ổn định, mở rộng dễ dàng.","Khoá học DevOps online tiếng Việt | MelyDemy","Học DevOps bằng tiếng Việt: Docker, CI\u002FCD, cloud và vận hành hệ thống qua các khoá video thực chiến, giúp triển khai ứng dụng ổn định tại MelyDemy.",[269,270,271],"DevOps kết nối phát triển và vận hành: tự động hoá việc build, kiểm thử, triển khai và giám sát để phần mềm được đưa đến người dùng nhanh và ổn định hơn. Các khoá DevOps tại MelyDemy hướng dẫn bạn làm quen với Linux, container, pipeline CI\u002FCD và hạ tầng đám mây.","Bạn sẽ thực hành trực tiếp: đóng gói ứng dụng bằng Docker, thiết lập quy trình tự động triển khai, quản lý cấu hình và theo dõi hệ thống khi chạy thật. Mỗi bài đều đi kèm ví dụ có thể làm lại trên máy hoặc máy chủ của bạn.","Nhóm khoá này phù hợp với lập trình viên muốn tự triển khai sản phẩm của mình, hoặc người muốn chuyển hướng sang vai trò DevOps và cloud. Hãy xem nội dung chi tiết từng khoá để chọn lộ trình phù hợp.",{"id":273,"name":94,"slug":274,"title":94,"canonicalSlug":274,"heroDescription":275,"seoTitle":276,"seoDescription":277,"intro":278},5,"ai","Prompt, workflow và tích hợp công cụ AI — học theo bài lab, áp dụng ngay vào dự án.","Khoá học AI ứng dụng cho lập trình | MelyDemy","Học AI ứng dụng bằng tiếng Việt: prompt, workflow tự động và agent AI qua các bài lab thực hành, áp dụng ngay vào công việc và dự án tại MelyDemy.",[279,280,281],"Các khoá AI tại MelyDemy tập trung vào việc ứng dụng: dùng công cụ AI để viết code nhanh hơn, tự động hoá công việc lặp lại và xây dựng agent hỗ trợ công việc hằng ngày, thay vì chỉ giải thích lý thuyết.","Bạn sẽ học cách viết prompt hiệu quả, thiết kế workflow kết nối nhiều công cụ, tự host agent trên máy chủ riêng và tích hợp AI vào quy trình phát triển phần mềm. Mỗi chủ đề có bài lab để bạn làm theo và áp dụng được ngay.","Nhóm khoá này phù hợp với lập trình viên, người làm nội dung và bất kỳ ai muốn tăng năng suất bằng AI. Hãy xem phần nội dung từng khoá để biết công cụ và kết quả bạn sẽ đạt được.",{"id":283,"slug":284,"title":285,"excerpt":286,"createdAt":287,"updatedAt":287,"category":288,"thumbnail":290,"content":291,"head":292,"author":299,"image":302,"same_category":303,"sameCategory":352},"d7e50156-ec43-4afc-b097-1979e02e8d8a","typescript-la-gi","TypeScript là gì? Vì sao dev JavaScript nên học","TypeScript là gì, khác JavaScript thế nào, kiểu dữ liệu, interface, generic và cách dùng với React.","2026-11-03T15:08:43",{"name":75,"slug":289,"description":11},"blog",{"url":11,"alt":285},"\u003Cp>\u003Cstrong>TypeScript là gì?\u003C\u002Fstrong> TypeScript là ngôn ngữ lập trình mã nguồn mở do Microsoft phát triển, mở rộng JavaScript bằng \u003Cstrong>hệ thống kiểu tĩnh\u003C\u002Fstrong>. Code TypeScript được biên dịch thành JavaScript thuần, nên chạy được ở mọi nơi JavaScript chạy: trình duyệt, Node.js, Deno, Bun. Lợi ích lớn nhất là phát hiện lỗi ngay khi viết code thay vì khi người dùng gặp lỗi. Bài viết giải thích sự khác nhau giữa TypeScript và JavaScript, các kiểu dữ liệu cơ bản, interface, generic và cách dùng TypeScript với React.\u003C\u002Fp>\n\n\u003Ch2>Vì sao lập trình viên JavaScript nên học TypeScript?\u003C\u002Fh2>\n\u003Cp>JavaScript là ngôn ngữ kiểu động: một biến có thể là số lúc này và chuỗi lúc khác. Điều đó linh hoạt nhưng dễ gây lỗi khó phát hiện khi dự án lớn dần. Ví dụ:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function tinhTong(gia, soLuong) {\n  return gia * soLuong;\n}\ntinhTong(\"29000\", 2);   \u002F\u002F 58000 – JavaScript tự ép kiểu\ntinhTong(undefined, 2); \u002F\u002F NaN – lỗi âm thầm\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Với TypeScript:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function tinhTong(gia: number, soLuong: number): number {\n  return gia * soLuong;\n}\ntinhTong(\"29000\", 2); \u002F\u002F Lỗi ngay trong editor: string không gán được cho number\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Những lợi ích chính:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Bắt lỗi sớm:\u003C\u002Fstrong> sai kiểu, gọi thuộc tính không tồn tại, quên xử lý \u003Ccode>null\u003C\u002Fcode> được phát hiện khi viết code.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Gợi ý code tốt hơn:\u003C\u002Fstrong> editor biết chính xác object có những thuộc tính gì.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Refactor an toàn:\u003C\u002Fstrong> đổi tên hoặc cấu trúc dữ liệu, trình biên dịch chỉ ra mọi chỗ cần sửa.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tài liệu sống:\u003C\u002Fstrong> kiểu dữ liệu mô tả rõ hàm nhận gì, trả gì.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Phổ biến:\u003C\u002Fstrong> nhiều framework như Angular, NestJS dùng TypeScript mặc định; React, Vue, Next.js đều hỗ trợ tốt.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>TypeScript và JavaScript khác nhau thế nào?\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Tiêu chí\u003C\u002Fth>\u003Cth>JavaScript\u003C\u002Fth>\u003Cth>TypeScript\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Kiểu dữ liệu\u003C\u002Ftd>\u003Ctd>Động, kiểm tra khi chạy\u003C\u002Ftd>\u003Ctd>Tĩnh, kiểm tra khi biên dịch\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Chạy trực tiếp\u003C\u002Ftd>\u003Ctd>Có\u003C\u002Ftd>\u003Ctd>Cần biên dịch sang JavaScript (một số runtime hỗ trợ chạy trực tiếp)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Phát hiện lỗi\u003C\u002Ftd>\u003Ctd>Thường khi chạy\u003C\u002Ftd>\u003Ctd>Ngay khi viết code\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Đường cong học\u003C\u002Ftd>\u003Ctd>Thấp hơn\u003C\u002Ftd>\u003Ctd>Cần học thêm hệ thống kiểu\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Phù hợp\u003C\u002Ftd>\u003Ctd>Script nhỏ, prototype nhanh\u003C\u002Ftd>\u003Ctd>Dự án vừa và lớn, làm việc nhóm\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Mọi code JavaScript hợp lệ về cơ bản đều là TypeScript hợp lệ, nên bạn có thể chuyển đổi dần dự án cũ thay vì viết lại.\u003C\u002Fp>\n\n\u003Ch2>Cài đặt và chạy TypeScript\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>npm install -D typescript\nnpx tsc --init      # tạo file tsconfig.json\nnpx tsc             # biên dịch sang JavaScript\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Trong \u003Ccode>tsconfig.json\u003C\u002Fcode>, hãy bật \u003Ccode>\"strict\": true\u003C\u002Fcode> ngay từ đầu. Chế độ strict bật các kiểm tra quan trọng như cấm \u003Ccode>any\u003C\u002Fcode> ngầm định và bắt buộc xử lý \u003Ccode>null\u002Fundefined\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Ch2>Các kiểu dữ liệu cơ bản\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>let ten: string = \"MelyDemy\";\nlet gia: number = 29000;\nlet daXuatBan: boolean = true;\nlet tags: string[] = [\"react\", \"typescript\"];\nlet toaDo: [number, number] = [10, 20];   \u002F\u002F tuple\nlet maKhoa: string | number = \"ts1\";       \u002F\u002F union type\nlet trangThai: \"draft\" | \"published\" = \"draft\"; \u002F\u002F literal type\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Ccode>any\u003C\u002Fcode>: tắt kiểm tra kiểu, nên tránh.\u003C\u002Fli>\n\u003Cli>\u003Ccode>unknown\u003C\u002Fcode>: an toàn hơn \u003Ccode>any\u003C\u002Fcode>, buộc kiểm tra trước khi dùng.\u003C\u002Fli>\n\u003Cli>\u003Ccode>void\u003C\u002Fcode>: hàm không trả về giá trị; \u003Ccode>never\u003C\u002Fcode>: hàm không bao giờ kết thúc bình thường.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>TypeScript cũng có khả năng \u003Cstrong>suy luận kiểu\u003C\u002Fstrong>: \u003Ccode>let gia = 29000\u003C\u002Fcode> tự hiểu là \u003Ccode>number\u003C\u002Fcode>, nên bạn không cần khai báo kiểu ở mọi nơi.\u003C\u002Fp>\n\n\u003Ch2>Interface và type\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>interface KhoaHoc {\n  id: number;\n  ten: string;\n  gia: number;\n  moTa?: string;           \u002F\u002F thuộc tính tuỳ chọn\n  readonly slug: string;   \u002F\u002F chỉ đọc\n}\n\ntype HocVien = {\n  id: number;\n  ten: string;\n  khoaHoc: KhoaHoc[];\n};\n\nfunction hienThi(k: KhoaHoc) {\n  return `${k.ten} - ${k.gia.toLocaleString(\"vi-VN\")}₫`;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>interface\u003C\u002Fcode> và \u003Ccode>type\u003C\u002Fcode> đều mô tả hình dạng object. Quy ước phổ biến: dùng \u003Ccode>interface\u003C\u002Fcode> cho object có thể mở rộng, dùng \u003Ccode>type\u003C\u002Fcode> cho union, tuple hoặc kiểu phức hợp. Quan trọng nhất là thống nhất trong dự án.\u003C\u002Fp>\n\n\u003Ch2>Generic – viết code tái sử dụng có kiểu\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>interface ApiResponse<T> {\n  data: T;\n  error?: string;\n}\n\nasync function getJson<T>(url: string): Promise<ApiResponse<T>> {\n  const res = await fetch(url);\n  return res.json();\n}\n\nconst ketQua = await getJson<KhoaHoc[]>(\"\u002Fapi\u002Fcourses\");\nketQua.data[0].ten; \u002F\u002F editor biết đây là string\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Generic giống như “tham số cho kiểu”, giúp một hàm hoặc interface làm việc với nhiều kiểu dữ liệu mà vẫn giữ được kiểm tra chặt chẽ.\u003C\u002Fp>\n\n\u003Ch2>Utility type hay dùng\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Utility\u003C\u002Fth>\u003Cth>Tác dụng\u003C\u002Fth>\u003Cth>Ví dụ\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>\u003Ccode>Partial<T>\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Mọi thuộc tính thành tuỳ chọn\u003C\u002Ftd>\u003Ctd>Dữ liệu form cập nhật\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>Pick<T, K>\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Chọn một số thuộc tính\u003C\u002Ftd>\u003Ctd>\u003Ccode>Pick<KhoaHoc, \"id\" | \"ten\">\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>Omit<T, K>\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Bỏ một số thuộc tính\u003C\u002Ftd>\u003Ctd>Dữ liệu tạo mới không có \u003Ccode>id\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>Record<K, V>\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Object với key và value xác định\u003C\u002Ftd>\u003Ctd>\u003Ccode>Record<string, number>\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>Required<T>\u003C\u002Fcode> \u002F \u003Ccode>Readonly<T>\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Bắt buộc \u002F chỉ đọc mọi thuộc tính\u003C\u002Ftd>\u003Ctd>Cấu hình đã xác thực\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Ch2>Thu hẹp kiểu (type narrowing)\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>function inMa(ma: string | number) {\n  if (typeof ma === \"string\") {\n    return ma.toUpperCase(); \u002F\u002F ở đây ma là string\n  }\n  return ma.toFixed(0);      \u002F\u002F ở đây ma là number\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>TypeScript hiểu các phép kiểm tra như \u003Ccode>typeof\u003C\u002Fcode>, \u003Ccode>instanceof\u003C\u002Fcode>, \u003Ccode>in\u003C\u002Fcode> và so sánh với giá trị cụ thể để tự thu hẹp kiểu trong từng nhánh.\u003C\u002Fp>\n\n\u003Ch2>TypeScript với React\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>type Props = {\n  khoaHoc: KhoaHoc;\n  onDangKy: (id: number) => void;\n};\n\nexport function CourseCard({ khoaHoc, onDangKy }: Props) {\n  const [daChon, setDaChon] = useState<boolean>(false);\n  return (\n    <button onClick={() => { setDaChon(true); onDangKy(khoaHoc.id); }}>\n      {daChon ? \"Đã chọn\" : khoaHoc.ten}\n    <\u002Fbutton>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Khi dùng TypeScript, quên truyền props hoặc truyền sai kiểu sẽ báo lỗi ngay. Xem thêm \u003Ca href=\"\u002Fblog\u002Freactjs-la-gi-lo-trinh-hoc-react\">ReactJS là gì và lộ trình học React\u003C\u002Fa>, hoặc \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-reactjs\">khoá học ReactJS\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>TypeScript ở backend\u003C\u002Fh2>\n\u003Cp>TypeScript cũng rất phổ biến phía server với Node.js. Framework \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-nestjs\">NestJS\u003C\u002Fa> dùng TypeScript mặc định; Express cũng có thể dùng kèm TypeScript. Dùng chung kiểu dữ liệu giữa frontend và backend giúp giảm lỗi khi hai bên giao tiếp qua API. Xem \u003Ca href=\"\u002Fblog\u002Flo-trinh-hoc-backend\">lộ trình học backend\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Khi nào nên học TypeScript?\u003C\u002Fh2>\n\u003Cp>Hãy học TypeScript sau khi đã vững JavaScript cơ bản: biến, hàm, object, mảng, Promise. Nếu học TypeScript quá sớm, bạn sẽ phải xử lý cùng lúc logic lập trình và hệ thống kiểu, dễ nản. Thứ tự gợi ý nằm trong \u003Ca href=\"\u002Fblog\u002Flo-trinh-hoc-lap-trinh-web-cho-nguoi-moi\">lộ trình học lập trình web cho người mới\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Sai lầm thường gặp\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Dùng \u003Ccode>any\u003C\u002Fcode> khắp nơi để “cho hết lỗi”, làm mất ý nghĩa của TypeScript.\u003C\u002Fli>\n\u003Cli>Lạm dụng ép kiểu \u003Ccode>as\u003C\u002Fcode> thay vì kiểm tra dữ liệu thật.\u003C\u002Fli>\n\u003Cli>Tin tưởng tuyệt đối kiểu của dữ liệu từ API: kiểu chỉ tồn tại lúc biên dịch, dữ liệu từ bên ngoài vẫn cần được kiểm tra khi chạy (có thể dùng thư viện như Zod).\u003C\u002Fli>\n\u003Cli>Viết kiểu quá phức tạp khiến code khó đọc.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Chuyển dự án JavaScript sang TypeScript\u003C\u002Fh2>\n\u003Cp>Không cần viết lại toàn bộ dự án. Bạn có thể chuyển dần theo các bước:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Cài TypeScript, tạo \u003Ccode>tsconfig.json\u003C\u002Fcode> với \u003Ccode>allowJs: true\u003C\u002Fcode> để file JS và TS cùng tồn tại.\u003C\u002Fli>\n\u003Cli>Đổi đuôi từng file từ \u003Ccode>.js\u003C\u002Fcode> sang \u003Ccode>.ts\u003C\u002Fcode> (hoặc \u003Ccode>.jsx\u003C\u002Fcode> sang \u003Ccode>.tsx\u003C\u002Fcode>), bắt đầu từ file tiện ích ít phụ thuộc.\u003C\u002Fli>\n\u003Cli>Thêm kiểu cho dữ liệu quan trọng nhất trước: dữ liệu từ API, props của component, tham số hàm dùng chung.\u003C\u002Fli>\n\u003Cli>Cài gói kiểu cho thư viện chưa có sẵn (thường là \u003Ccode>@types\u002Ften-thu-vien\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>Bật dần các tuỳ chọn strict khi số lỗi đã giảm.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Cách làm này giúp dự án vẫn chạy bình thường trong suốt quá trình chuyển đổi.\u003C\u002Fp>\n\n\u003Ch2>Kiểm tra dữ liệu khi chạy với Zod\u003C\u002Fh2>\n\u003Cp>Kiểu TypeScript chỉ tồn tại lúc biên dịch. Dữ liệu đến từ API, form hoặc file cấu hình vẫn có thể sai khi chạy. Thư viện như Zod cho phép khai báo schema một lần, vừa kiểm tra dữ liệu thật, vừa sinh ra kiểu TypeScript tương ứng:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { z } from \"zod\";\n\nconst KhoaHocSchema = z.object({\n  id: z.number(),\n  ten: z.string().min(1),\n  gia: z.number().nonnegative(),\n});\ntype KhoaHoc = z.infer<typeof KhoaHocSchema>;\n\nconst data = KhoaHocSchema.parse(await res.json()); \u002F\u002F báo lỗi nếu dữ liệu sai\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cách này giúp “ranh giới” giữa ứng dụng và thế giới bên ngoài an toàn hơn, đặc biệt ở backend khi nhận dữ liệu từ người dùng.\u003C\u002Fp>\n\n\u003Ch2>Câu hỏi thường gặp\u003C\u002Fh2>\n\u003Ch3>TypeScript có khó học không?\u003C\u002Fh3>\n\u003Cp>Nếu đã biết JavaScript, phần cơ bản của TypeScript khá dễ tiếp cận. Các khái niệm nâng cao như generic phức tạp, conditional type cần thời gian luyện tập thêm.\u003C\u002Fp>\n\u003Ch3>TypeScript có làm ứng dụng chạy chậm hơn không?\u003C\u002Fh3>\n\u003Cp>Không đáng kể khi chạy, vì TypeScript được biên dịch thành JavaScript và phần kiểu bị loại bỏ. Chỉ thời gian build có thể tăng.\u003C\u002Fp>\n\u003Ch3>Có cần học JavaScript trước TypeScript không?\u003C\u002Fh3>\n\u003Cp>Nên. TypeScript là JavaScript cộng thêm kiểu, nên hiểu JavaScript giúp bạn học TypeScript nhanh và đúng bản chất.\u003C\u002Fp>\n\u003Ch3>Dự án nhỏ có cần TypeScript không?\u003C\u002Fh3>\n\u003Cp>Không bắt buộc. Với script ngắn hoặc prototype, JavaScript là đủ. TypeScript phát huy giá trị rõ nhất ở dự án lâu dài, nhiều người cùng làm.\u003C\u002Fp>\n\n\u003Ch2>Kết luận\u003C\u002Fh2>\n\u003Cp>TypeScript giúp code JavaScript an toàn, dễ bảo trì và làm việc nhóm hiệu quả hơn nhờ hệ thống kiểu tĩnh. Hãy bắt đầu với chế độ strict, học các kiểu cơ bản, interface, generic, rồi áp dụng vào dự án React hoặc Node.js. Để học bài bản, tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-typescript\">khoá học TypeScript từ cơ bản đến thực chiến\u003C\u002Fa> và nền tảng \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-javascript\">khoá học JavaScript\u003C\u002Fa> của MelyDemy.\u003C\u002Fp>\n",{"description":286,"keywords":293},[294,295,296,297,298],"TypeScript","sao","dev","JavaScript","nên",{"fullname":300,"avatar":11,"position":301,"quote":11},"Mely Demy","Editor",{"url":11,"alt":285},[304,312,320,328,336,344],{"id":305,"slug":306,"title":307,"excerpt":308,"createdAt":309,"updatedAt":309,"category":310,"thumbnail":311},"9aa1bf78-82ec-4bf0-b0ff-7b0a7bf4b22a","hoc-ai-bat-dau-tu-dau","Học AI bắt đầu từ đâu? Lộ trình cho dev và người mới","Lộ trình học AI: dùng công cụ AI, Python, toán nền, machine learning, deep learning, LLM và AI agent.","2026-11-03T15:09:31",{"name":75,"slug":289,"description":11},{"url":11,"alt":307},{"id":313,"slug":314,"title":315,"excerpt":316,"createdAt":317,"updatedAt":317,"category":318,"thumbnail":319},"f3ad15b5-1753-46e0-ab87-ab9f767c8030","chung-chi-aws-nen-thi-cai-nao","Chứng chỉ AWS nên thi cái nào? Lộ trình từ cơ bản","So sánh Cloud Practitioner, Solutions Architect Associate\u002FProfessional, Developer Associate; lộ trình và cách ôn.","2026-11-03T15:09:08",{"name":75,"slug":289,"description":11},{"url":11,"alt":315},{"id":321,"slug":322,"title":323,"excerpt":324,"createdAt":325,"updatedAt":325,"category":326,"thumbnail":327},"f6d8e6c9-7289-4c91-a5f5-f5f66c9bc5dc","kubernetes-la-gi","Kubernetes là gì? Pod, Node, Service giải thích dễ hiểu","Kubernetes (K8s) là gì, khi nào cần, các khái niệm pod, node, deployment, service và so với Docker.","2026-11-03T15:08:20",{"name":75,"slug":289,"description":11},{"url":11,"alt":323},{"id":329,"slug":330,"title":331,"excerpt":332,"createdAt":333,"updatedAt":333,"category":334,"thumbnail":335},"59f770d8-1fad-4707-99e0-780fc7b997e1","lo-trinh-hoc-devops","Lộ trình học DevOps bắt đầu từ đâu cho người mới","DevOps bắt đầu từ đâu: Linux, Git, Docker, CI\u002FCD, Kubernetes, cloud AWS và giám sát với Grafana.","2026-11-03T15:07:57",{"name":75,"slug":289,"description":11},{"url":11,"alt":331},{"id":337,"slug":338,"title":339,"excerpt":340,"createdAt":341,"updatedAt":341,"category":342,"thumbnail":343},"94151f16-08e8-47d6-95f1-599aeceaec4c","hoc-sql-co-ban","Học SQL cơ bản: SELECT, JOIN, GROUP BY kèm ví dụ","SQL cơ bản cho người mới: truy vấn, lọc, JOIN, GROUP BY, index và bài tập với MySQL.","2026-11-03T15:07:33",{"name":75,"slug":289,"description":11},{"url":11,"alt":339},{"id":345,"slug":346,"title":347,"excerpt":348,"createdAt":349,"updatedAt":349,"category":350,"thumbnail":351},"57b73d1f-a064-4f1e-a57b-0dc9817e8841","cursor-ai-la-gi-huong-dan-su-dung","Cursor AI là gì? Cách dùng Cursor để code nhanh hơn","Cursor AI là gì, khác VS Code ra sao, tính năng Tab, Chat, Agent và cách dùng an toàn trong dự án.","2026-11-03T15:07:10",{"name":75,"slug":289,"description":11},{"url":11,"alt":347},[353,356,359,362,365,368],{"id":305,"slug":306,"title":307,"excerpt":308,"createdAt":309,"updatedAt":309,"category":354,"thumbnail":355},{"name":75,"slug":289,"description":11},{"url":11,"alt":307},{"id":313,"slug":314,"title":315,"excerpt":316,"createdAt":317,"updatedAt":317,"category":357,"thumbnail":358},{"name":75,"slug":289,"description":11},{"url":11,"alt":315},{"id":321,"slug":322,"title":323,"excerpt":324,"createdAt":325,"updatedAt":325,"category":360,"thumbnail":361},{"name":75,"slug":289,"description":11},{"url":11,"alt":323},{"id":329,"slug":330,"title":331,"excerpt":332,"createdAt":333,"updatedAt":333,"category":363,"thumbnail":364},{"name":75,"slug":289,"description":11},{"url":11,"alt":331},{"id":337,"slug":338,"title":339,"excerpt":340,"createdAt":341,"updatedAt":341,"category":366,"thumbnail":367},{"name":75,"slug":289,"description":11},{"url":11,"alt":339},{"id":345,"slug":346,"title":347,"excerpt":348,"createdAt":349,"updatedAt":349,"category":369,"thumbnail":370},{"name":75,"slug":289,"description":11},{"url":11,"alt":347}]