{"id":84260,"date":"2025-01-31T21:12:01","date_gmt":"2025-01-31T14:12:01","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=84260"},"modified":"2025-01-31T21:12:01","modified_gmt":"2025-01-31T14:12:01","slug":"interface-typescript-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/","title":{"rendered":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Dinh_nghia_Interface_TypeScript_la_gi\" >\u0110\u1ecbnh ngh\u0129a Interface TypeScript l\u00e0 g\u00ec<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Diem_noi_bat_cua_Interface_TypeScript\" >\u0110i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a Interface TypeScript\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Interface_TypeScript_hoat_dong_nhu_the_nao\" >Interface TypeScript ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Cach_su_dung_Interface_trong_TypeScript\" >C\u00e1ch s\u1eed d\u1ee5ng Interface trong TypeScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Interface_vs_Type_Su_khac_biet_va_uu_nhuoc_diem\" >Interface vs Type: S\u1ef1 kh\u00e1c bi\u1ec7t v\u00e0 \u01b0u nh\u01b0\u1ee3c \u0111i\u1ec3m<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Cau_hoi_thuong_gap_ve_Interface_TypeScript\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Interface TypeScript\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#Tong_ket_ve_Interface_TypeScript\" >T\u1ed5ng k\u1ebft v\u1ec1 Interface TypeScript\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong><em>Interface TypeScript l\u00e0 m\u1ed9t trong nh\u1eefng t\u00ednh n\u0103ng c\u1ee7a TypeScript gi\u00fap \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a d\u1eef li\u1ec7u ho\u1eb7c h\u00ecnh d\u1ea1ng c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng, \u0111em l\u1ea1i s\u1ef1 t\u1ed1i \u01b0u h\u00f3a m\u00e3 ngu\u1ed3n hi\u1ec7u qu\u1ea3. \u0110\u00e2y c\u0169ng l\u00e0 t\u00ednh n\u0103ng gi\u00fap ki\u1ec3m tra v\u00e0 h\u1ed7 tr\u1ee3 l\u1eadp tr\u00ecnh vi\u00ean ph\u00e1t hi\u1ec7n l\u1ed7i li\u00ean quan \u0111\u1ebfn Type trong qu\u00e1 tr\u00ecnh l\u1eadp tr\u00ecnh web.\u00a0<\/em><\/strong><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ed5ng quan c\u1ee7a Interface trong TypeScript v\u00e0 nh\u1eefng t\u00ednh n\u0103ng n\u1ed5i b\u1eadt<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch Interface ho\u1ea1t \u0111\u1ed9ng trong TypeScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch s\u1eed d\u1ee5ng Interface trong TypeScript \u0111\u1ec3 t\u1ed1i \u01b0u qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa Interface v\u00e0 Type trong TypeScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa Interface v\u1edbi c\u00e1c framework kh\u00e1c nh\u01b0 Angular v\u00e0 React<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Dinh_nghia_Interface_TypeScript_la_gi\"><\/span><b>\u0110\u1ecbnh ngh\u0129a Interface TypeScript l\u00e0 g\u00ec<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Interface (hay c\u00f2n g\u1ecdi l\u00e0 giao di\u1ec7n) l\u00e0 m\u1ed9t t\u00ednh n\u0103ng c\u1ee7a TypeScript cho ph\u00e9p \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng. Interface s\u1ebd cung c\u1ea5p c\u00e1ch \u0111\u1ec3 m\u00f4 t\u1ea3 h\u00ecnh d\u1ea1ng c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng, bao g\u1ed3m thu\u1ed9c t\u00ednh v\u00e0 ph\u01b0\u01a1ng th\u1ee9c c\u1ee7a ch\u00fang m\u00e0 kh\u00f4ng c\u1ea7n tri\u1ec3n khai b\u1ea5t k\u1ef3 ch\u1ee9c n\u0103ng n\u00e0o.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Interface ch\u1ec9 t\u1eadp trung v\u00e0o c\u00e1c kh\u00eda c\u1ea1nh c\u1ea5u tr\u00fac v\u00e0 ki\u1ec3m tra ki\u1ec3u, cho ph\u00e9p hi\u1ec3u m\u00e3 t\u1ed1t h\u01a1n v\u00e0 x\u00e1c th\u1ef1c trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n. C\u00fa ph\u00e1p c\u1ee7a Interface c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c bi\u1ec3u di\u1ec5n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface InterfaceName {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0property1: type;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0property2: type;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/\/C\u00e1c thu\u1ed9c t\u00ednh v\u00e0 ph\u01b0\u01a1ng th\u1ee9c b\u1ed5 sung c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a \u1edf \u0111\u00e2y<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>interface:<\/b><span style=\"font-weight: 400;\"> \u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t giao di\u1ec7n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>InterfaceName:<\/b><span style=\"font-weight: 400;\"> T\u00ean c\u1ee7a giao di\u1ec7n theo quy \u01b0\u1edbc \u0111\u1eb7t t\u00ean TypeScript.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>property1, property2:<\/b><span style=\"font-weight: 400;\"> Thu\u1ed9c t\u00ednh c\u1ee7a giao di\u1ec7n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>type: <\/b><span style=\"font-weight: 400;\">Ch\u00fa th\u00edch ki\u1ec3u TypeScript \u0111\u1ecbnh ngh\u0129a ki\u1ec3u c\u1ee7a t\u1eebng thu\u1ed9c t\u00ednh.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 Interface TypeScript, b\u1ea1n c\u00f3 th\u1ec3 xem qua v\u00ed d\u1ee5 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Person {<\/span>\r\n<span style=\"font-weight: 400;\">name: string;<\/span>\r\n<span style=\"font-weight: 400;\">age: number;<\/span>\r\n<span style=\"font-weight: 400;\">sex: \"male\" | \"female\";<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const personOne: Person = {<\/span>\r\n<span style=\"font-weight: 400;\">name: \"Coner\",<\/span>\r\n<span style=\"font-weight: 400;\">age: 24,<\/span>\r\n<span style=\"font-weight: 400;\">sex: \"male\",<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(personOne.name); \/\/ Coner<\/span>\r\n<span style=\"font-weight: 400;\">console.log(personOne.hobbies); \/\/ undefined<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u00ean, trong kh\u1ed1i m\u00e3 b\u1ea1n truy c\u1eadp m\u1ed9t thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong giao di\u1ec7n m\u00e0 kh\u00f4ng c\u00f3 v\u1ea5n \u0111\u1ec1 g\u00ec b\u1eb1ng c\u00e1ch ch\u1ea1y console.log(personOne.name). B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u1ea5y m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c c\u1ed1 g\u1eafng truy c\u1eadp m\u1ed9t thu\u1ed9c t\u00ednh kh\u00f4ng t\u1ed3n t\u1ea1i trong giao di\u1ec7n b\u1eb1ng c\u00e1ch ch\u1ea1y console.log(personOne.hobbies), do \u0111\u00f3 \u0111\u01b0a ra l\u1ed7i ki\u1ec3u.<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><a href=\"https:\/\/itviec.com\/blog\/typescript-la-gi\/\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\"><strong>TypeScript l\u00e0 g\u00ec? Top 20 c\u00e2u h\u1ecfi v\u00e0 \u0111\u00e1p \u00e1n v\u1ec1 TypeScript c\u1ea7n bi\u1ebft<\/strong><\/span><\/i><\/a><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Diem_noi_bat_cua_Interface_TypeScript\"><\/span><b>\u0110i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a Interface TypeScript\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 l\u1ee3i \u00edch n\u1ed5i b\u1eadt c\u1ee7a Interface trong TypeScript c\u00f3 th\u1ec3 k\u1ec3 \u0111\u1ebfn nh\u01b0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ki\u1ec3m tra ki\u1ec3u, l\u00e0m n\u1ed5i b\u1eadt l\u1ed7i trong ki\u1ec3u v\u00e0 v\u1ea5n \u0111\u1ec1 c\u00f3 th\u1ec3 x\u1ea3y ra trong m\u00e3 \u0111\u1ec3 ng\u0103n l\u1eadp tr\u00ecnh vi\u00ean truy c\u1eadp v\u00e0o b\u1ea5t k\u00ec thu\u1ed9c t\u00ednh n\u00e0o c\u00f3 th\u1ec3 kh\u00f4ng t\u1ed3n t\u1ea1i.\u00a0 L\u01b0u \u00fd th\u00eam r\u1eb1ng vi\u1ec7c ki\u1ec3m tra ki\u1ec3u ch\u1ec9 di\u1ec5n ra trong th\u1eddi gian bi\u00ean d\u1ecbch (compile-time), kh\u00f4ng ph\u1ea3i th\u1eddi gian ch\u1ea1y (runtime).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a v\u00e0 t\u1ea1o h\u1ee3p \u0111\u1ed3ng r\u00f5 r\u00e0ng cho c\u00e1c h\u00e0m ho\u1eb7c m\u00e3 s\u1eed d\u1ee5ng giao di\u1ec7n. Ng\u0103n ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c v\u00e0 thu\u1ed9c t\u00ednh kh\u00f4ng t\u1ed3n t\u1ea1i, \u0111\u1ea3m b\u1ea3o tu\u00e2n th\u1ee7 c\u1ea5u tr\u00fac \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t d\u1ea1ng t\u00e0i li\u1ec7u gi\u00fap t\u0103ng c\u01b0\u1eddng kh\u1ea3 n\u0103ng \u0111\u1ecdc m\u00e3 v\u00e0 gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean \u0111\u1ecdc m\u00e3 hi\u1ec3u c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a n\u00f3 c\u0169ng c\u00e1ch m\u00e3 ph\u00f9 h\u1ee3p v\u1edbi nhau.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a c\u00e1c giao di\u1ec7n chung c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u00e1i s\u1eed d\u1ee5ng v\u00e0 m\u1edf r\u1ed9ng trong to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n trong m\u00e3 v\u00e0 logic c\u1ee7a m\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c IDE t\u00edch h\u1ee3p v\u1edbi TypeScript c\u00f3 th\u1ec3 \u0111\u1ecdc c\u00e1c giao di\u1ec7n b\u1ea1n \u0111\u1ecbnh ngh\u0129a v\u00e0 \u0111\u01b0a ra c\u00e1c g\u1ee3i \u00fd t\u1ef1 \u0111\u1ed9ng ho\u00e0n th\u00e0nh t\u1eeb ch\u00fang. \u0110\u1ed3ng th\u1eddi, h\u1ed7 tr\u1ee3 \u0111i\u1ec1u h\u01b0\u1edbng m\u00e3 \u0111\u1ec3 gi\u00fap b\u1ea1n l\u1eadp tr\u00ecnh web n\u0103ng su\u1ea5t v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Giao di\u1ec7n gi\u00fap t\u00e1i c\u1ea5u tr\u00fac d\u1ec5 d\u00e0ng h\u01a1n, b\u1ea1n c\u00f3 th\u1ec3 c\u1eadp nh\u1eadt vi\u1ec7c tri\u1ec3n khai m\u1ed9t \u0111o\u1ea1n m\u00e3 ho\u1eb7c logic v\u00e0 \u0111\u1ea3m b\u1ea3o tu\u00e2n th\u1ee7 c\u00f9ng m\u1ed9t giao di\u1ec7n.\u00a0<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Interface_TypeScript_hoat_dong_nhu_the_nao\"><\/span><b>Interface TypeScript ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>X\u00e1c \u0111\u1ecbnh c\u1ea5u tr\u00fac \u0111\u1ed1i t\u01b0\u1ee3ng (Object Structure)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u1ee8ng d\u1ee5ng c\u01a1 b\u1ea3n c\u1ee7a giao di\u1ec7n TypeScript \u0111\u01b0\u1ee3c th\u1ea5y trong vi\u1ec7c x\u00e1c \u0111\u1ecbnh c\u1ea5u tr\u00fac \u0111\u1ed1i t\u01b0\u1ee3ng. C\u00f3 th\u1ec3 t\u01b0\u1edfng t\u01b0\u1ee3ng \u0111\u1ebfn m\u1ed9t k\u1ecbch b\u1ea3n m\u00e0 b\u1ea1n \u0111\u01b0\u1ee3c giao nhi\u1ec7m v\u1ee5 qu\u1ea3n l\u00fd s\u1ebd c\u00f3 nhi\u1ec1u h\u00ecnh d\u1ea1ng kh\u00e1c nhau trong m\u1ed9t d\u1ef1 \u00e1n.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a interface, b\u1ea1n c\u00f3 th\u1ec3 xem qua v\u00ed d\u1ee5 sau:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Shape {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0area(): number;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"Use Case 1: Defining Object Structures\");<\/span>\r\n<span style=\"font-weight: 400;\">console.log(\"-----------------------------------------\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function calculateArea(shape: Shape): void {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0console.log(`Calculating area of ${shape.name}...`);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0console.log(`Area: ${shape.area()}`);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const circle: Shape = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: \"Circle\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: \"Red\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0area() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return Math.PI * 2 * 2;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0},<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span>\r\n\r\n<span style=\"font-weight: 400;\">calculateArea(circle);<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-84353\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-1-vippro.jpg\" alt=\"interface typescript - itviec blog\" width=\"631\" height=\"172\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-1-vippro.jpg 631w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-1-vippro-300x82.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-1-vippro-200x55.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-1-vippro-100x27.jpg 100w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Qua v\u00ed d\u1ee5 tr\u00ean, \u0111\u1ecbnh ngh\u0129a m\u1ed9t giao di\u1ec7n c\u00f3 t\u00ean l\u00e0 Shape \u0111\u1ec3 bi\u1ec3u di\u1ec5n c\u1ea5u tr\u00fac c\u1ee7a c\u00e1c h\u00ecnh d\u1ea1ng h\u00ecnh h\u1ecdc. Giao di\u1ec7n Shape ch\u1ee9a c\u00e1c thu\u1ed9c t\u00ednh name v\u00e0 color, c\u1ea3 hai \u0111\u1ec1u c\u00f3 ki\u1ec3u chu\u1ed7i v\u00e0 ph\u01b0\u01a1ng th\u1ee9c area() tr\u1ea3 v\u1ec1 m\u1ed9t s\u1ed1. Sau \u0111\u00f3, \u0111\u1ecbnh ngh\u0129a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n tu\u00e2n theo giao di\u1ec7n Shape, ch\u1ec9 \u0111\u1ecbnh c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a n\u00f3 v\u00e0 tri\u1ec3n khai ph\u01b0\u01a1ng th\u1ee9c area() \u0111\u1ec3 t\u00ednh di\u1ec7n t\u00edch c\u1ee7a n\u00f3.<\/span><\/p>\n<h3><b>Ki\u1ec3m tra tham s\u1ed1 h\u00e0m (Type-Check Function Parameters)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t vai tr\u00f2 quan tr\u1ecdng kh\u00e1c c\u1ee7a giao di\u1ec7n l\u00e0 ki\u1ec3m tra ki\u1ec3u tham s\u1ed1 h\u00e0m trong th\u1eddi gian bi\u00ean d\u1ecbch. Ch\u1eb3ng h\u1ea1n v\u00ed d\u1ee5\u00a0 sau, x\u00e9t m\u1ed9t h\u00e0m \u0111\u01b0\u1ee3c giao nhi\u1ec7m v\u1ee5 t\u00ednh chu vi c\u1ee7a shape:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">function calculatePerimeter(shape: Shape): number {<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"\\nUse Case 2: Type-Checking Function Parameters\");<\/span>\r\n<span style=\"font-weight: 400;\">console.log(\"----------------------------------------------\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"Calculating perimeter of a shape...\");<\/span>\r\n<span style=\"font-weight: 400;\">console.log(`Perimeter: ${calculatePerimeter(circle)}`);<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-84352\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro.jpg\" alt=\"interface typescript - itviec blog\" width=\"1065\" height=\"327\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro.jpg 1065w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-300x92.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-640x197.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-200x61.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-768x236.jpg 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-100x31.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-2-vippro-700x215.jpg 700w\" sizes=\"auto, (max-width: 1065px) 100vw, 1065px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb cho \u0111o\u1ea1n m\u00e3 tr\u00ean.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, Interface cho ph\u00e9p ki\u1ec3m tra ki\u1ec3u c\u1ee7a tham s\u1ed1 h\u00e0m. H\u00e0m calculatePerimeter() s\u1ebd l\u1ea5y m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng ki\u1ec3u Shape l\u00e0m tham s\u1ed1. Khi b\u1ea1n c\u1ed1 g\u1eafng g\u1ecdi h\u00e0m n\u00e0y v\u1edbi m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n, TypeScript s\u1ebd \u0111\u01b0a ra l\u1ed7i bi\u00ean d\u1ecbch v\u00ec \u0111\u1ed1i t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n kh\u00f4ng kh\u1edbp ch\u00ednh x\u00e1c v\u1edbi giao di\u1ec7n Shape mong \u0111\u1ee3i, \u0111\u1ea3m b\u1ea3o an to\u00e0n ki\u1ec3u trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n.<\/span><\/p>\n<h3><b>Tri\u1ec3n khai h\u1ee3p \u0111\u1ed3ng l\u1edbp (Implement Class Contract)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, class Circle implements interface Shape, bu\u1ed9c ph\u1ea3i tri\u1ec3n khai \u0111\u1ea7y \u0111\u1ee7 c\u00e1c thu\u1ed9c t\u00ednh v\u00e0 ph\u01b0\u01a1ng th\u1ee9c \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong interface. TypeScript s\u1ebd b\u00e1o l\u1ed7i n\u1ebfu class kh\u00f4ng implement \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a interface:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">class Circle implements Shape {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(public name: string, public color: string, public radius: number) {}<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0area(): number {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return Math.PI * this.radius * this.radius;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"\\nUse Case 3: Implementing Class Contracts\");<\/span>\r\n<span style=\"font-weight: 400;\">console.log(\"------------------------------------------\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const myCircle = new Circle(\"My Circle\", \"Blue\", 3);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(`Area of ${myCircle.name}: ${myCircle.area()}`);<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-84351\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro.jpg\" alt=\"interface typescript - itviec blog\" width=\"700\" height=\"127\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro.jpg 700w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro-300x54.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro-640x116.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro-200x36.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/interface-typescript-3-vippro-100x18.jpg 100w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb cho \u0111o\u1ea1n m\u00e3 tr\u00ean.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, tr\u00ecnh b\u00e0y giao di\u1ec7n cho ph\u00e9p ki\u1ec3m tra ki\u1ec3u c\u1ee7a c\u00e1c tham s\u1ed1 h\u00e0m. C\u00f3 m\u1ed9t h\u00e0m calculatePerimeter() l\u1ea5y m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng ki\u1ec3u Shape l\u00e0m tham s\u1ed1. Khi c\u1ed1 g\u1eafng g\u1ecdi h\u00e0m n\u00e0y v\u1edbi m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n, TypeScript s\u1ebd \u0111\u01b0a ra l\u1ed7i bi\u00ean d\u1ecbch v\u00ec \u0111\u1ed1i t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n kh\u00f4ng kh\u1edbp ch\u00ednh x\u00e1c v\u1edbi giao di\u1ec7n Shape mong \u0111\u1ee3i, \u0111\u1ea3m b\u1ea3o an to\u00e0n ki\u1ec3u trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cach_su_dung_Interface_trong_TypeScript\"><\/span><b>C\u00e1ch s\u1eed d\u1ee5ng Interface trong TypeScript<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 \u1ee9ng d\u1ee5ng c\u1ee7a Interface trong qu\u00e1 tr\u00ecnh l\u1eadp tr\u00ecnh m\u00e3 TypeScript.<\/span><\/p>\n<h3><b>Ki\u1ec3u h\u00e0m (Function Type)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u1ecbnh ngh\u0129a ki\u1ec3u \u0111\u1ed1i t\u01b0\u1ee3ng, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng giao di\u1ec7n \u0111\u1ec3 \u0111\u1ecbnh ki\u1ec3u cho c\u00e1c h\u00e0m, gi\u00e1 tr\u1ecb tr\u1ea3 v\u1ec1 c\u0169ng nh\u01b0 \u0111\u1ed1i s\u1ed1 c\u1ee7a ch\u00fang. V\u00ed d\u1ee5 nh\u01b0:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Args {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">interface Return {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0doubledAge: number<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function ageDoubler({name, age}: Args): Return {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0return {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0name,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0age,\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0doubledAge: age * 2,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const result = ageDoubler({ name: \"John\", age: 25 });<\/span>\r\n<span style=\"font-weight: 400;\">console.log(result); \/\/{ name: \"John\", age: 25, doubledAge: 50 }<\/span><\/pre>\n<h3><b>L\u1edbp (Classes)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">TypeScript c\u00f3 h\u1ed7 tr\u1ee3 g\u1ed1c cho t\u1eeb kh\u00f3a class \u0111\u01b0\u1ee3c tri\u1ec3n khai trong ES2015. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t classes c\u0169ng nh\u01b0 c\u00e1c tr\u01b0\u1eddng v\u00e0 ph\u01b0\u01a1ng th\u1ee9c c\u1ee7a n\u00f3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">class Person {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string = '';<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number = 0;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const me = new Person();<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c \u0111\u1ecbnh ngh\u0129a class n\u00e0y v\u1edbi giao di\u1ec7n \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o class tri\u1ec3n khai \u0111\u00fang t\u1ea5t c\u1ea3 thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u00ean giao di\u1ec7n.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface PersonInt {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<i><span style=\"font-weight: 400;\">\/\/ Class 'Person' tri\u1ec3n khai giao di\u1ec7n 'PersonInt' kh\u00f4ng \u0111\u00fang.<\/span><\/i>\r\n\r\n<i><span style=\"font-weight: 400;\">\/\/ Thu\u1ed9c t\u00ednh 'age' b\u1ecb thi\u1ebfu trong ki\u1ec3u 'Person' nh\u01b0ng b\u1eaft bu\u1ed9c ph\u1ea3i c\u00f3 trong ki\u1ec3u 'PersonInt'<\/span><\/i>\r\n\r\n<span style=\"font-weight: 400;\">class Person implements PersonInt {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string = '';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const me = new Person();<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u00ean, b\u1ea1n c\u00f3 m\u1ed9t giao di\u1ec7n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 PersonInt v\u00e0 s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a implements \u0111\u1ec3 n\u00f3i class Person s\u1ebd c\u00f3 t\u1ea5t c\u1ea3 c\u00e1c ki\u1ec3u \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong PersonInt. \u0110i\u1ec1u n\u00e0y kh\u00f4ng \u0111\u00fang v\u00e0 thu\u1ed9c t\u00ednh \u201cage\u201d b\u1ecb thi\u1ebfu n\u00ean l\u1ed7i s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/span><\/p>\n<h3><b>Thu\u1ed9c t\u00ednh t\u00f9y ch\u1ecdn (Optional Properties)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Khi l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng trong TypeScript, c\u00f3 m\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh ch\u1ec9 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p. Trong nh\u1eefng tr\u01b0\u1eddng h\u1ee3p n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u00e1c thu\u1ed9c t\u00ednh t\u00f9y ch\u1ecdn (optional properties) nh\u01b0 v\u00ed d\u1ee5 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Person {<\/span>\r\n<span style=\"font-weight: 400;\">name: string;<\/span>\r\n<span style=\"font-weight: 400;\">age: number;<\/span>\r\n<span style=\"font-weight: 400;\">color?: string; <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const person1: Person = { name: \"John\", age: 25 }; \/\/ H\u1ee3p l\u1ec7<\/span>\r\n<span style=\"font-weight: 400;\">const person2: Person = { name: \"Jane\", age: 30, color: \"blue\" }; \/\/ C\u0169ng h\u1ee3p l\u1ec7<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh m\u00e0u tr\u00ean m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c g\u00f5 b\u1eb1ng giao di\u1ec7n Person, b\u1ea1n s\u1ebd ph\u1ea3i t\u00ednh \u0111\u1ebfn tr\u01b0\u1eddng h\u1ee3p thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 kh\u00f4ng c\u00f3 (thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh n\u1ebfu kh\u00f4ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh).<\/span><\/p>\n<h3><b>Thu\u1ed9c t\u00ednh ch\u1ec9 \u0111\u1ecdc (Readonly Properties)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong TypeScript, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u00ednh n\u0103ng Readonly v\u1edbi interfaces \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u m\u1ed9t thu\u1ed9c t\u00ednh l\u00e0 ch\u1ec9 \u0111\u1ecdc. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 thu\u1ed9c t\u00ednh m\u1ee5c ti\u00eau kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c ghi v\u00e0o trong qu\u00e1 tr\u00ecnh ki\u1ec3m tra ki\u1ec3u m\u1eb7c d\u00f9 h\u00e0nh vi c\u1ee7a n\u00f3 kh\u00f4ng thay \u0111\u1ed5i trong th\u1eddi gian ch\u1ea1y.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Person {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0readonly name: string;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const person: Person = {<\/span>\r\n<span style=\"font-weight: 400;\">name: 'Coner',<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function updateName(person: Person) {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><i><span style=\"font-weight: 400;\">\/\/ B\u1ea1n kh\u00f4ng th\u1ec3 \u0111\u1ecdc 'person.name'.<\/span><\/i>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0console.log(`name has the value '${person.name}'.`);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><i><span style=\"font-weight: 400;\">\/\/ Nh\u01b0ng b\u1ea1n kh\u00f4ng th\u1ec3 g\u00e1n l\u1ea1i n\u00f3<\/span><\/i>\r\n<i><span style=\"font-weight: 400;\"> \u00a0\/\/ Kh\u00f4ng th\u1ec3 g\u00e1n cho \u201cname\u201d v\u00ec \u0111\u00e2y l\u00e0 thu\u1ed9c t\u00ednh ch\u1ec9 \u0111\u1ecdc.<\/span><\/i>\r\n<span style=\"font-weight: 400;\"> \u00a0person.name = \"hello\";<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>Ch\u1eef k\u00fd (Index Signature)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 c\u00f3 l\u00fac b\u1ea1n bi\u1ebft h\u00ecnh d\u1ea1ng c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng, nh\u01b0ng b\u1ea1n kh\u00f4ng bi\u1ebft c\u00e1c thu\u1ed9c t\u00ednh th\u1ef1c t\u1ebf c\u1ee7a n\u00f3. Ho\u1eb7c, c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 th\u1ec3 thay \u0111\u1ed5i, nh\u01b0ng h\u00ecnh d\u1ea1ng s\u1ebd v\u1eabn nh\u1ea5t qu\u00e1n. \u0110i\u1ec1u n\u00e0y d\u1eabn \u0111\u1ebfn s\u1ef1 kh\u00f4ng th\u1ef1c t\u1ebf ho\u1eb7c kh\u00f4ng th\u1ec3 nh\u1eadp t\u1eebng thu\u1ed9c t\u00ednh tr\u00ean giao di\u1ec7n. \u0110\u1ec3 gi\u1ea3i quy\u1ebft, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ch\u1eef k\u00fd m\u1ee5c (index signature).\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Index {<\/span>\r\n<span style=\"font-weight: 400;\"> [key: string]: boolean<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/\/ V\u00ed d\u1ee5 s\u1eed d\u1ee5ng<\/span>\r\n<span style=\"font-weight: 400;\">const flags: Index = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0isActive: true,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0isLoggedIn: false,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0hasPermission: true<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Giao di\u1ec7n n\u00e0y s\u1ebd gi\u00fap b\u1ea1n l\u1eadp ch\u1ec9 m\u1ee5c m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c nh\u1eadp b\u1eb1ng giao di\u1ec7n Index v\u1edbi m\u1ed9t chu\u1ed7i v\u00e0 s\u1ebd c\u00f3 m\u1ed9t boolean \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1. B\u1ea1n c\u0169ng kh\u00f4ng b\u1ecb gi\u1edbi h\u1ea1n ch\u1ec9 \u1edf c\u00e1c ki\u1ec3u boolean. N\u00f3 c\u0169ng c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t ki\u1ec3u ho\u1eb7c giao di\u1ec7n kh\u00e1c n\u1ebfu b\u1ea1n mu\u1ed1n, \u0111i\u1ec1u n\u00e0y r\u1ea5t tuy\u1ec7t v\u1eddi cho nh\u1eefng l\u00fac b\u1ea1n kh\u00f4ng bi\u1ebft t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0ng bi\u1ebft h\u00ecnh d\u1ea1ng c\u1ee7a ch\u00fang.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, n\u1ebfu b\u1ea1n mu\u1ed1n k\u1ebft h\u1ee3p c\u00e1c ch\u1eef k\u00fd ch\u1ec9 m\u1ee5c v\u00e0 c\u00e1c \u0111\u1ecbnh ngh\u0129a giao di\u1ec7n th\u00f4ng th\u01b0\u1eddng, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 v\u00ed d\u1ee5 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Index {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0one: string;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0two: number;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0[key: string]: string | number | boolean<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>Interface m\u1edf r\u1ed9ng (Extending Interfaces)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Extend Interface l\u00e0 t\u00ednh n\u0103ng gi\u00fap b\u1ea1n m\u1edf r\u1ed9ng m\u1ed9t giao di\u1ec7n hi\u1ec7n c\u00f3 v\u00e0 th\u00eam c\u00e1c tr\u01b0\u1eddng m\u1edbi v\u00e0o \u0111\u00f3 m\u00e0 kh\u00f4ng thay \u0111\u1ed5i giao di\u1ec7n g\u1ed1c, \u0111\u1ed3ng th\u1eddi c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t b\u1ea3n sao c\u1ee7a n\u00f3. V\u00ed d\u1ee5 nh\u01b0:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Person {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: string;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">interface PersonWithHobbies extends Person {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0hobbies: string[];<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Giao di\u1ec7n Person g\u1ed1c v\u00e0 m\u1edf r\u1ed9ng n\u00f3 v\u1edbi thu\u1ed9c t\u00ednh hobby \u0111\u1ec3 t\u1ea1o ra m\u1ed9t giao di\u1ec7n m\u1edbi c\u00f3 t\u00ean l\u00e0 PersonWithHobbies. V\u00ec v\u1eady, t\u1ea1i th\u1eddi \u0111i\u1ec3m n\u00e0y, b\u1ea1n c\u00f3 hai giao di\u1ec7n, Person v\u00e0 PersonWithHobbies gi\u1ed1ng h\u1ec7t nhau ngo\u1ea1i tr\u1eeb giao di\u1ec7n sau c\u00f3 th\u00eam thu\u1ed9c t\u00ednh hobby.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu mu\u1ed1n, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u giao di\u1ec7n hi\u1ec7n c\u00f3 \u0111\u1ec3 t\u1ea1o ra m\u1ed9t giao di\u1ec7n m\u1edbi m\u00e0 kh\u00f4ng c\u1ea7n th\u00eam b\u1ea5t k\u1ef3 thu\u1ed9c t\u00ednh m\u1edbi n\u00e0o v\u00e0o giao di\u1ec7n \u0111\u00f3, c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n nh\u01b0 sau.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Person {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: string;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">interface Hobbies {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0hobbies: string[];<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">interface PersonWithHobbies extends Person, Hobbies {}<\/span><\/pre>\n<h3><b>Ph\u00e2n bi\u1ec7t h\u1ee3p nh\u1ea5t (Discriminating Unions)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u00e2n bi\u1ec7t h\u1ee3p nh\u1ea5t l\u00e0 c\u00e1ch c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t ki\u1ec3u m\u1edbi t\u1eeb nhi\u1ec1u giao di\u1ec7n v\u00e0 s\u1eed d\u1ee5ng m\u1ed9t thu\u1ed9c t\u00ednh chung c\u00f3 tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c giao di\u1ec7n (g\u1ecdi l\u00e0 ph\u00e2n bi\u1ec7t, discriminating) \u0111\u1ec3 ph\u00e2n bi\u1ec7t gi\u1eefa c\u00e1c ki\u1ec3u trong logic.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Circle {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0kind: \"circle\";<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0radius: number;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">interface Square {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0kind: \"square\";<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0sideLength: number;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">type Shape = Circle | Square;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function getArea(shape: Shape): number {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0if (shape.kind === \"circle\") {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><i><span style=\"font-weight: 400;\"> \/\/ Giao di\u1ec7n h\u00ecnh tr\u00f2n \u1edf \u0111\u00e2y<\/span><\/i>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return Math.PI * shape.radius ** 2;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\"> \/\/ Giao di\u1ec7n h\u00ecnh vu\u00f4ng \u1edf \u0111\u00e2y<\/span><\/i>\r\n<span style=\"font-weight: 400;\"> \u00a0return shape.sideLength ** 2;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const circle: Shape = { kind: \"circle\", radius: 5 };<\/span>\r\n<span style=\"font-weight: 400;\">const square: Shape = { kind: \"square\", sideLength: 4 };<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(getArea(circle)); <\/span><i><span style=\"font-weight: 400;\">\/\/ K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb: 78.53981633974483<\/span><\/i>\r\n<span style=\"font-weight: 400;\">console.log(getArea(square)); <\/span><i><span style=\"font-weight: 400;\">\/\/ K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb: 16<\/span><\/i><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed tr\u00ean, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a 2 giao di\u1ec7n (interfaces) cho hai h\u00ecnh d\u1ea1ng kh\u00e1c nhau (h\u00ecnh tr\u00f2n v\u00e0 h\u00ecnh vu\u00f4ng). Sau \u0111\u00f3, s\u1eed d\u1ee5ng m\u1ed9t thu\u1ed9c t\u00ednh c\u00f3 tr\u00ean c\u1ea3 hai giao di\u1ec7n (lo\u1ea1i) \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh giao di\u1ec7n n\u00e0o ch\u00fang ta \u0111ang x\u1eed l\u00fd t\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111\u00f3.<\/span><\/p>\n<h3><b>Interface Generic<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Generic c\u0169ng l\u00e0 m\u1ed9t t\u00ednh n\u0103ng c\u1ee7a TypeScript cho ph\u00e9p truy\u1ec1n nhi\u1ec1u lo\u1ea1i d\u1eef li\u1ec7u kh\u00e1c nhau v\u00e0 t\u1ea1o m\u00e3 c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c \u0111\u1ea7u v\u00e0o kh\u00e1c nhau. Generics gi\u1ed1ng nh\u01b0 m\u1ed9t m\u1eabu (template) c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u l\u1ea7n tr\u00ean c\u00f9ng m\u1ed9t \u0111o\u1ea1n m\u00e3 nh\u01b0ng gi\u00e1 tr\u1ecb kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o m\u1ed7i l\u1ea7n g\u1ecdi h\u00e0m.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Generic Interface s\u1ebd cho ph\u00e9p b\u1ea1n k\u1ebft h\u1ee3p s\u1ee9c m\u1ea1nh c\u1ee7a Type v\u1edbi Interface \u0111\u1ec3 t\u1ea1o ra c\u00e1c giao di\u1ec7n s\u1eed d\u1ee5ng chung m\u1ed9t ki\u1ec3u. \u0110\u1ed3ng th\u1eddi, g\u00e1n c\u00f9ng m\u1ed9t ki\u1ec3u cho m\u1ed9t ho\u1eb7c nhi\u1ec1u thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh trong giao di\u1ec7n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">interface Item&lt;T&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0id: number;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0value: T;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0timestamp: Date;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/\/ V\u00ed d\u1ee5 s\u1eed d\u1ee5ng v\u1edbi nhi\u1ec1u ki\u1ec3u d\u1eef li\u1ec7u<\/span>\r\n<span style=\"font-weight: 400;\">const stringItem: Item&lt;string&gt; = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0id: 1,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0value: 'Hello',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0timestamp: new Date()<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const numberItem: Item&lt;number&gt; = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0id: 2,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0value: 42,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0timestamp: new Date()<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/\/ V\u00ed d\u1ee5 v\u1edbi custom type<\/span>\r\n<span style=\"font-weight: 400;\">interface User {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0email: string;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const userItem: Item&lt;User&gt; = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0id: 3,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0value: { name: \"John\", email: \"john@example.com\" },<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0timestamp: new Date()<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Interface_vs_Type_Su_khac_biet_va_uu_nhuoc_diem\"><\/span><b> Interface vs Type: S\u1ef1 kh\u00e1c bi\u1ec7t v\u00e0 \u01b0u nh\u01b0\u1ee3c \u0111i\u1ec3m<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Giao di\u1ec7n (interface) v\u00e0 ki\u1ec3u (type) \u0111\u1ec1u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh h\u00ecnh d\u1ea1ng c\u0169ng nh\u01b0 c\u1ea5u tr\u00fac c\u1ee7a m\u00e3. Tuy nhi\u00ean, c\u1ea3 hai c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t trong c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 t\u00ecnh hu\u1ed1ng m\u00e0 m\u1ed9t trong hai t\u00ednh n\u0103ng n\u00e0y s\u1ebd ho\u1ea1t \u0111\u1ed9ng t\u1ed1t h\u01a1n t\u00ednh n\u0103ng kia.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 \u0111i\u1ec3m kh\u00e1c bi\u1ec7t gi\u1eefa Interface v\u00e0 Type nh\u01b0 sau:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>T\u00ednh n\u0103ng<\/b><\/td>\n<td><b>Interface<\/b><\/td>\n<td><b>Type<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">M\u1ee5c \u0111\u00edch ch\u00ednh<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a objects v\u00e0 classes<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u1ea3 union types, intersection types, primitives v\u00e0 tuples<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Chi ti\u1ebft tri\u1ec3n khai<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 d\u00f9ng extends v\u00e0 implements<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ch\u1ec9 c\u00f3 th\u1ec3 d\u00f9ng intersection (&amp;)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">T\u00ednh linh ho\u1ea1t<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u1ed1t h\u01a1n cho objects l\u1edbn v\u00ec TypeScript x\u1eed l\u00fd interface hi\u1ec7u qu\u1ea3 h\u01a1n \u0111\u1ea1i di\u1ec7n.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 ch\u1eadm h\u01a1n v\u1edbi objects ph\u1ee9c t\u1ea1p<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Syntax<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ch\u1ec9 c\u00f3 m\u1ed9t c\u00e1ch khai b\u00e1o.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Linh ho\u1ea1t h\u01a1n trong c\u00e1ch khai b\u00e1o\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Nh\u00ecn chung, Interface l\u00fd t\u01b0\u1edfng \u0111\u1ec3 m\u00f4 t\u1ea3 h\u00ecnh d\u1ea1ng c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng (object) v\u00e0 l\u1edbp (classes), th\u1ef1c thi h\u1ee3p \u0111\u1ed3ng c\u0169ng nh\u01b0 duy tr\u00ec t\u00ednh nh\u1ea5t qu\u00e1n trong c\u1ea5u tr\u00fac. \u0110\u1ed3ng th\u1eddi, c\u00e1c ki\u1ec3u d\u1eef li\u1ec7u r\u1ea5t tuy\u1ec7t v\u1eddi trong vi\u1ec7c t\u1ea1o ra c\u00e1c ki\u1ec3u d\u1eef li\u1ec7u ph\u1ee9c t\u1ea1p, x\u1eed l\u00fd d\u1eef li\u1ec7u kh\u00f4ng ph\u1ea3i \u0111\u1ed1i t\u01b0\u1ee3ng v\u00e0 \u0111\u1ecbnh ngh\u0129a ki\u1ec3u d\u1eef li\u1ec7u cho th\u01b0 vi\u1ec7n b\u00ean ngo\u00e0i.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c l\u1ef1a ch\u1ecdn gi\u1eefa interface v\u00e0 type trong TypeScript s\u1ebd ph\u1ee5 thu\u1ed9c v\u00e0o nhu c\u1ea7u c\u0169ng nh\u01b0 t\u00ednh ch\u1ea5t d\u1ef1 \u00e1n, c\u1ea5u tr\u00fac m\u00e3 b\u1ea1n \u0111ang x\u1eed l\u00fd. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u1ea3 hai trong c\u01a1 s\u1edf m\u00e3 TypeScript \u0111\u1ec3 t\u1eadn d\u1ee5ng th\u1ebf m\u1ea1nh c\u1ee7a ch\u00fang trong c\u00e1c ph\u1ea7n c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Interface_TypeScript\"><\/span><b> C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Interface TypeScript\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng Interface trong TypeScript?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Interface n\u00ean \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c tr\u01b0\u1eddng h\u1ee3p sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a objects v\u00e0 classes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi c\u1ea7n declaration merging (m\u1edf r\u1ed9ng interface c\u00f9ng t\u00ean)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi l\u00e0m vi\u1ec7c v\u1edbi OOP v\u00e0 c\u1ea7n implement c\u00e1c contracts cho classes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi \u0111\u1ecbnh ngh\u0129a public API c\u1ee7a m\u1ed9t module\/library<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi c\u1ea7n t\u00e1i s\u1eed d\u1ee5ng c\u1ea5u tr\u00fac d\u1eef li\u1ec7u trong nhi\u1ec1u n\u01a1i\u00a0<\/span><\/li>\n<\/ul>\n<h3><b>\u0110i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh gi\u1eefa Type vs Interface trong TypeScript l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 \u0111i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh gi\u1eefa Type v\u00e0 Interface bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Declaration Merging:<\/b><span style=\"font-weight: 400;\"> Interface c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng c\u00f9ng t\u00ean, Type kh\u00f4ng th\u1ec3<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kh\u1ea3 n\u0103ng bi\u1ec3u di\u1ec5n:<\/b><span style=\"font-weight: 400;\"> Type c\u00f3 th\u1ec3 bi\u1ec3u di\u1ec5n union types, tuples, primitives; Interface ch\u1ee7 y\u1ebfu d\u00f9ng cho objects<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance:<\/b><span style=\"font-weight: 400;\"> Interface x\u1eed l\u00fd t\u1ed1t h\u01a1n v\u1edbi objects ph\u1ee9c t\u1ea1p<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00fa ph\u00e1p:<\/b><span style=\"font-weight: 400;\"> Type c\u00f3 c\u00fa ph\u00e1p linh ho\u1ea1t h\u01a1n cho m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p \u0111\u1eb7c bi\u1ec7t<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Extends vs Intersection: <\/b><span style=\"font-weight: 400;\">Interface s\u1eed d\u1ee5ng extends, Type s\u1eed d\u1ee5ng intersection (&amp;)<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_Interface_TypeScript\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 Interface TypeScript\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">B\u00e0i vi\u1ebft \u0111\u00e3 cung c\u1ea5p v\u00e0 gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1 <\/span><b>Interface TypeScript <\/b><span style=\"font-weight: 400;\">c\u0169ng nh\u01b0 t\u00ednh n\u0103ng v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Interface \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 trong TypeScript. Interface trong TypeScript nh\u01b0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd gi\u00fap \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac d\u1eef li\u1ec7u, \u0111\u1ea3m b\u1ea3o an to\u00e0n cho ki\u1ec3u (type) v\u00e0 th\u00fac \u0111\u1ea9y kh\u1ea3 n\u0103ng b\u1ea3o tr\u00ec m\u00e3. B\u1eb1ng c\u00e1ch khai th\u00e1c Interface, b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp c\u00e1c k\u1ef3 v\u1ecdng cho c\u1ea5u tr\u00fac \u0111\u1ed1i t\u01b0\u1ee3ng, tham s\u1ed1 h\u00e0m ho\u1eb7c h\u1ee3p \u0111\u1ed3ng l\u1edbp h\u1ee3p l\u00fd.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interface TypeScript l\u00e0 m\u1ed9t trong nh\u1eefng t\u00ednh n\u0103ng c\u1ee7a TypeScript gi\u00fap \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a d\u1eef li\u1ec7u ho\u1eb7c h\u00ecnh d\u1ea1ng c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng, \u0111em l\u1ea1i s\u1ef1 t\u1ed1i \u01b0u h\u00f3a m\u00e3 ngu\u1ed3n hi\u1ec7u qu\u1ea3. \u0110\u00e2y c\u0169ng l\u00e0 t\u00ednh n\u0103ng gi\u00fap ki\u1ec3m tra v\u00e0 h\u1ed7 tr\u1ee3 l\u1eadp tr\u00ecnh vi\u00ean ph\u00e1t hi\u1ec7n l\u1ed7i li\u00ean quan \u0111\u1ebfn [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":84350,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-84260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o? - ITviec Blog<\/title>\n<meta name=\"description\" content=\"B\u00e0i vi\u1ebft gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1 Interface TypeScript l\u00e0 g\u00ec c\u0169ng nh\u01b0 t\u00ednh n\u0103ng v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Interface \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 trong TypeScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?\" \/>\n<meta property=\"og:description\" content=\"Interface TypeScript l\u00e0 m\u1ed9t trong nh\u1eefng t\u00ednh n\u0103ng c\u1ee7a TypeScript gi\u00fap \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a d\u1eef li\u1ec7u ho\u1eb7c h\u00ecnh d\u1ea1ng c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng, \u0111em l\u1ea1i s\u1ef1 t\u1ed1i \u01b0u\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-31T14:12:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o? - ITviec Blog","description":"B\u00e0i vi\u1ebft gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1 Interface TypeScript l\u00e0 g\u00ec c\u0169ng nh\u01b0 t\u00ednh n\u0103ng v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Interface \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 trong TypeScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?","og_description":"Interface TypeScript l\u00e0 m\u1ed9t trong nh\u1eefng t\u00ednh n\u0103ng c\u1ee7a TypeScript gi\u00fap \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac c\u1ee7a d\u1eef li\u1ec7u ho\u1eb7c h\u00ecnh d\u1ea1ng c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng, \u0111em l\u1ea1i s\u1ef1 t\u1ed1i \u01b0u","og_url":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-01-31T14:12:01+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg","type":"image\/jpeg"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"15 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?","datePublished":"2025-01-31T14:12:01+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/"},"wordCount":3681,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/","url":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/","name":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o? - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg","datePublished":"2025-01-31T14:12:01+00:00","description":"B\u00e0i vi\u1ebft gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1 Interface TypeScript l\u00e0 g\u00ec c\u0169ng nh\u01b0 t\u00ednh n\u0103ng v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Interface \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 trong TypeScript.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/Interface-TypeScript-vippro.jpg","width":1500,"height":790,"caption":"Interface TypeScript - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/interface-typescript-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Interface TypeScript l\u00e0 g\u00ec? C\u00e1ch \u00e1p d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/84260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=84260"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/84260\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/84350"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=84260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=84260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=84260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}