JavaScript ban \u0111\u1ea7u \u0111\u01b0\u1ee3c gi\u1edbi thi\u1ec7u nh\u01b0 l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh h\u01b0\u1edbng client, sau m\u1ed9t th\u1eddi gian s\u1eed d\u1ee5ng th\u00ec c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n nh\u1eadn ra r\u1eb1ng JavaScript c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng h\u01b0\u1edbng server. Tuy nhi\u00ean, khi d\u1ef1 \u00e1n c\u00e0ng m\u1edf r\u1ed9ng th\u00ec m\u00e3 ngu\u1ed3n s\u1eed d\u1ee5ng JavaScript c\u00e0ng ph\u1ee9c t\u1ea1p v\u00e0 kh\u00f3 b\u1ea3o tr\u00ec v\u00ec JavaScript<\/a> c\u00f2n thi\u1ebfu kh\u00e1 nhi\u1ec1u t\u00ednh n\u0103ng c\u1ea7n thi\u1ebft. V\u00e0 TypeScript sinh ra \u0111\u1ec3 thu h\u1eb9p c\u00e1c thi\u1ebfu s\u00f3t n\u00e0y.<\/span><\/p>\n T\u00ednh n\u0103ng n\u00e0y gi\u00fap h\u1ea1n ch\u1ebf c\u00e1c l\u1ed7i v\u1ec1 type errors v\u00ec h\u1ea7u h\u1ebft s\u1ebd \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong qu\u00e1 tr\u00ecnh bi\u00ean d\u1ecbch. Nh\u1edd \u0111\u00f3 gi\u00fap c\u00e1c th\u00e0nh vi\u00ean trong c\u00f9ng d\u1ef1 \u00e1n hi\u1ec3u r\u00f5 h\u01a1n khi s\u1eed d\u1ee5ng m\u1ed9t bi\u1ebfn s\u1ed1 ho\u1eb7c m\u1ed9t function t\u1eeb th\u00e0nh vi\u00ean kh\u00e1c v\u00ec \u0111\u00e3 r\u00f5 ki\u1ec3u d\u1eef li\u1ec7u truy\u1ec1n v\u00e0o l\u00e0 g\u00ec, ki\u1ec3u d\u1eef li\u1ec7u tr\u1ea3 ra l\u00e0 nh\u01b0 th\u1ebf n\u00e0o.<\/span><\/p>\n R\u1ea5t h\u1eefu \u00edch \u0111\u1ec3 t\u1ea1o ra quy t\u1eafc giao ti\u1ebfp gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ee9c t\u1ea1p, \u0111i\u1ec1u n\u00e0y gi\u1ea3m thi\u1ec3u r\u1ea5t nhi\u1ec1u th\u1eddi gian \u0111\u1ecdc hi\u1ec3u c\u1ee7a l\u1eadp tr\u00ecnh vi\u00ean khi s\u1eed d\u1ee5ng ch\u00fang, thay v\u00ec ph\u1ea3i \u0111\u1ecdc t\u1ea5t c\u1ea3 \u0111\u1ec3 hi\u1ec3u th\u00ec ch\u1ec9 c\u1ea7n \u0111\u1ecdc interface l\u00e0 c\u00f3 th\u1ec3 \u0111\u1ee7.\u00a0<\/span><\/p>\n Khi b\u1ea1n mu\u1ed1n mang c\u1ea3 th\u1ebf gi\u1edbi v\u00e0o c\u00e1c class th\u00ec TypeScript s\u1ebd gi\u00fap b\u1ea1n. <\/span>V\u00e0 m\u00ecnh s\u1ebd kh\u00f4ng ph\u00e2n t\u00edch t\u00ednh \u01b0u \u0111i\u1ec3m v\u00e0 khuy\u1ebft \u0111i\u1ec3m c\u1ee7a OOP<\/a> so v\u1edbi FP \u1edf \u0111\u00e2y.<\/span><\/i><\/p>\n \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap gi\u1ea3m thi\u1ec3u l\u1ed7i trong qu\u00e1 tr\u00ecnh th\u1ef1c thi c\u1ee7a ph\u1ea7n m\u1ec1m v\u00e0 gi\u1ea3m th\u1eddi gian t\u00ecm v\u00e0 s\u1eeda l\u1ed7i.<\/span><\/p>\n B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 TypeScript trong nh\u1eefng b\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y :<\/span><\/p>\nNh\u1eefng t\u00ednh n\u0103ng m\u00e0 TypeScript h\u1ed7 tr\u1ee3 c\u00f2n JavaScript th\u00ec kh\u00f4ng<\/h2>\n
Ki\u1ec3u c\u1ed1 \u0111\u1ecbnh cho bi\u1ebfn s\u1ed1 ho\u1eb7c k\u1ebft qu\u1ea3 tr\u1ea3 v\u1ec1 t\u1eeb function (static typing)<\/h3>\n
\r\nconst ColorClosing: string = \"red\"\r\nconst ColorOpening: string = \"green\"\r\n \r\nvar isClosing: boolean = true\r\n \r\nfunction btnOpen(): string {\r\n let color: string = (isClosing) ? ColorOpening : ColorClosing\r\n isClosing = !isClosing\r\n return color\r\n}\r\n \r\nconsole.log(btnOpen()); \/\/ Output is green\r\nconsole.log(btnOpen()); \/\/ Output is red\r\n<\/pre>\nInterface<\/h3>\n
interface Btn {\r\n color: string,\r\n click: Function\r\n}\r\n \r\nlet btn: Btn = {\r\n color: \"red\",\r\n click: function () {\r\n \/\/ code here\r\n },\r\n}\r\n \r\nconsole.log(btn) \/\/ Output is { color: 'red', click: [Function: click] }\r\n<\/pre>\nH\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng (object oriented)<\/h3>\n
interface Btn {\r\n color: string,\r\n click: Function\r\n}\r\n \r\nclass BtnCls implements Btn {\r\n color: string = \"red\"\r\n click(): void {\r\n console.log(\"MEVN\")\r\n }\r\n}\r\n \r\nlet btn: Btn = new BtnCls()\r\nconsole.log(btn) \/\/ Output is BtnCls { color: 'red' }\r\nbtn.click() \/\/ Output is MEVN<\/pre>\nNh\u1eadn bi\u1ebft l\u1ed7i trong qu\u00e1 tr\u00ecnh bi\u00ean d\u1ecbch<\/h3>\n
let str: string\r\nstr = 1\r\n\/\/ error: Type 'number' is not assignable to type 'string'.\r\n<\/pre>\n
T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng TypeScript<\/h2>\n
\n