{"id":2497,"date":"2022-07-04T17:40:52","date_gmt":"2022-07-04T10:40:52","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=2497"},"modified":"2022-07-04T17:45:25","modified_gmt":"2022-07-04T10:45:25","slug":"cai-typescript-chay-lenh-don-gian","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/cai-typescript-chay-lenh-don-gian.html","title":{"rendered":"TypeScript ph\u1ea7n 2 : C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 ch\u1ea1y nh\u1eefng d\u00f2ng l\u1ec7nh \u0111\u01a1n gi\u1ea3n"},"content":{"rendered":"<h2>C\u00e0i \u0111\u1eb7t TypeScript<\/h2>\n<h3>L\u00e0m sao \u0111\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c \u0111o\u1ea1n m\u00e3 TypeScript<\/h3>\n<p><span style=\"font-weight: 400;\">TypeScript c\u1ea7n bi\u00ean d\u1ecbch th\u00e0nh JavaScript tr\u01b0\u1edbc khi kh\u1edfi ch\u1ea1y<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/06\/27181549\/TypeScript_TypeScript-compiler_JavaScript.png\" alt=\"TypeScript_TypeScript compiler_JavaScript\" width=\"605\" height=\"186\" class=\"aligncenter wp-image-2499 size-full\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/06\/27181549\/TypeScript_TypeScript-compiler_JavaScript.png 605w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/06\/27181549\/TypeScript_TypeScript-compiler_JavaScript-300x92.png 300w\" sizes=\"auto, (max-width: 605px) 100vw, 605px\" \/><\/p>\n<h3>C\u00e0i \u0111\u1eb7t tr\u00ecnh bi\u00ean d\u1ecbch TypeScript v\u00e0 run \u0111o\u1ea1n m\u00e3 sau khi bi\u00ean d\u1ecbch<\/h3>\n<p><span style=\"font-weight: 400;\"><em><u>B\u01b0\u1edbc 1<\/u> :<\/em> C\u00e0i \u0111\u1eb7t NodeJS<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Truy c\u1eadp v\u00e0o link \u0111\u1ec3 t\u1ea3i NodeJS v\u00e0 c\u00e0i \u0111\u1eb7t :<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/nodejs.org\/en\/download\/<\/span><\/a><\/li>\n<li><span style=\"font-weight: 400;\">Sau khi t\u1ea3i v\u00e0 c\u00e0i \u0111\u1eb7t, g\u00f5 command \u0111\u1ec3 ki\u1ec3m tra version :\u00a0<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ node -v\r\n$ npm -v<\/pre>\n<p><span style=\"font-weight: 400;\"><em><u>B\u01b0\u1edbc 2<\/u> :<\/em> C\u00e0i \u0111\u1eb7t TypeScript (tsc)<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng npm \u0111\u1ec3 c\u00e0i \u0111\u1eb7t :<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ npm install -g typescript<\/pre>\n<ul>\n<li><span style=\"font-weight: 400;\">Ki\u1ec3m tra version sau khi c\u00e0i \u0111\u1eb7t ho\u00e0n t\u1ea5t :<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ tsc -v<\/pre>\n<p><span style=\"font-weight: 400;\"><em><u>B\u01b0\u1edbc 3<\/u> :<\/em> Bi\u00ean d\u1ecbch t\u1eeb TypeScript th\u00e0nh JavaScript<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ea1o m\u1ed9t file demo.ts \u200b\u200bv\u1edbi \u0111o\u1ea1n code nh\u01b0 b\u00ean d\u01b0\u1edbi :<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">let message: string = \"Welcome to MEVN\"\r\nconsole.log(message)\r\n<\/pre>\n<ul>\n<li><span style=\"font-weight: 400;\">Bi\u00ean d\u1ecbch file demo.ts \u2192 demo.js<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ tsc demo.ts<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ta s\u1ebd th\u1ea5y m\u1ed9t file demo.js \u0111\u01b0\u1ee3c sinh ra<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Command tr\u00ean ch\u1ec9 bi\u00ean d\u1ecbch demo.ts \u2192 demo.js 1 l\u1ea7n, n\u1ebfu c\u00f3 thay \u0111\u1ed5i source code tr\u00ean demo.ts th\u00ec c\u1ea7n ph\u1ea3i l\u1eb7p l\u1ea1i command tr\u00ean \u0111\u1ec3 bi\u00ean d\u1ecbch l\u1ea1i. N\u1ebfu mu\u1ed1n t\u1ef1 \u0111\u1ed9ng bi\u00ean d\u1ecbch khi c\u00f3 thay \u0111\u1ed5i \u1edf file demo.ts th\u00ec ta th\u00eam &#8211;watch sau command tr\u00ean<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ tsc demo.ts --watch \/\/ hot-reload<\/pre>\n<p><span style=\"font-weight: 400;\"><em><u>B\u01b0\u1edbc 4<\/u><\/em> : Ch\u1ea1y \u0111o\u1ea1n m\u00e3 sau bi\u00ean d\u1ecbch (file demo.js)<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">$ node demo.js \/\/ Welcome to MEVN<\/pre>\n<h2>C\u00e1c ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n nh\u1ea5t v\u1ec1 TypeScript<\/h2>\n<h3>Khai b\u00e1o bi\u1ebfn<\/h3>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p chung<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;t\u1eeb kh\u00f3a&gt; &lt;t\u00ean bi\u1ebfn&gt;: &lt;[ki\u1ec3u d\u1eef 1 | ki\u1ec3u d\u1eef li\u1ec7u 2 | ]&gt; = &lt;gi\u00e1 tr\u1ecb&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 :<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">const GenderMan: number = 1\r\nvar gender: number | string = \"male\"\r\nlet genders: Array&lt;string&gt; = [\"female\", \"male\"]  \r\n \r\nconsole.log(GenderMan, gender, genders) \/\/ 1 male [ 'female', 'male' ]<\/pre>\n<h3>Khai b\u00e1o h\u00e0m<\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u00e0m v\u1edbi ki\u1ec3u d\u1eef li\u1ec7u t\u01b0\u1eddng minh :<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">function welcome(name: string): string {\r\n   return \"Welcome to \" + name\r\n}\r\n \r\nconsole.log(welcome(\"MEVN\")) \/\/ Welcome to MEVN<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u00e0m v\u1edbi ki\u1ec3u d\u1eef li\u1ec7u kh\u00f4ng t\u01b0\u1eddng minh, l\u00fac n\u00e0y ch\u00fang ta d\u00f9ng m\u1ed9t t\u1eeb v\u1ef1ng n\u00e0o \u0111\u00f3 \u0111\u1ec3 thay th\u1ebf ki\u1ec3u d\u1eef li\u1ec7u m\u00e0 ta kh\u00f4ng x\u00e1c \u0111\u1ecbnh tr\u01b0\u1edbc, trong v\u00ed d\u1ee5 n\u00e0y m\u00ecnh s\u1eed d\u1ee5ng l\u00e0 Type<\/span><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">const welcome = &lt;Type&gt;(name: Type): string =&gt; {\r\n   if (typeof name === \"string\") return \"Welcome to \" + name\r\n \r\n   return typeof name\r\n}\r\n \r\nconsole.log(welcome(\"MEVN\")) \/\/ Welcome to MEVN\r\nconsole.log(welcome({message: \"Welcome to\", name: \"MEVN\"})) \/\/ object\r\n<\/pre>\n<h3>H\u00e0m ch\u1ed3ng<\/h3>\n<p><span style=\"font-weight: 400;\">Khi m\u1ed9t ch\u1ee9c n\u0103ng c\u1ea7n x\u1eed l\u00fd m\u1ed9t logic chung nh\u01b0ng s\u1ed1 l\u01b0\u1ee3ng \u0111\u1ed1i s\u1ed1 kh\u00e1c nhau th\u00ec l\u00fac n\u00e0y ch\u00fang ta c\u00f3 th\u1ec3 ngh\u0129 \u0111\u1ebfn k\u1ef9 thu\u1eadt n\u00e0y.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: T\u1ea1o m\u1ed9t ng\u00e0y, c\u00f3 th\u1ec3 t\u1ea1o t\u1eeb m\u1ed9t timestamp ho\u1eb7c t\u1eeb n\u0103m, th\u00e1ng v\u00e0 ng\u00e0y<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">function createDate(timestamp: number): Date;\r\nfunction createDate(year: number, month: number, day: number): Date;\r\n \r\nfunction createDate(timestampOrYear: number, month?: number, day?: number): Date {\r\n   if (month !== undefined &amp;&amp; day !== undefined) return new Date(timestampOrYear, month, day)\r\n   return new Date(timestampOrYear)\r\n}\r\n \r\nconsole.log(createDate(20192022)) \/\/ 1970-01-01T05:36:32.022Z\r\nconsole.log(createDate(2019, 12, 1)) \/\/ 2019-12-31T17:00:00.000Z\r\n<\/pre>\n<h3>Any<\/h3>\n<p><span style=\"font-weight: 400;\">Khi kh\u00f4ng x\u00e1c \u0111\u1ecbnh ki\u1ec3u d\u1eef li\u1ec7u ch\u00ednh x\u00e1c, ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng any. H\u1ea1n ch\u1ebf s\u1eed d\u1ee5ng ki\u1ec3u d\u1eef li\u1ec7u n\u00e0y, v\u00ec n\u1ebfu c\u00e1c b\u1ea1n qu\u00e1 l\u1ea1m d\u1ee5ng n\u00f3 th\u00ec th\u00f4i c\u00e1c b\u1ea1n quay l\u1ea1i JavaScript cho n\u00f3 l\u00e0nh.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">let anyVariable: any = \"Welcome to MEVN\"\r\nanyVariable = {recruit: \"https:\/\/www.marketenterprise.vn\/#recruit\", message: \"Welcome to MEVN\"}\r\n \r\nconsole.log(anyVariable)\r\n\/* {\r\nrecruit: 'https:\/\/www.marketenterprise.vn\/#recruit',\r\nmessage: 'Welcome to MEVN'\r\n} *\/\r\n<\/pre>\n<p>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 :<\/p>\n<ul>\n<li>TypeScript ph\u1ea7n 1 : <a href=\"https:\/\/www.marketenterprise.vn\/blog\/tai-sao-nen-su-dung-typescript-p1.html\">T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng TypeScript?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ch\u00e0o m\u1eebng c\u00e1c b\u1ea1n \u0111\u00e3 gh\u00e9 th\u0103m trang blog c\u1ee7a MarketEnterprise Vi\u1ec7t Nam ! H\u00f4m nay ch\u00fang ta h\u00e3y c\u00f9ng nhau ti\u1ebfp t\u1ee5c t\u00ecm hi\u1ec3u v\u1ec1 ch\u1ee7 \u0111\u1ec1 TypeScript ph\u1ea7n 2 : \u201cC\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 ch\u1ea1y nh\u1eefng d\u00f2ng l\u1ec7nh \u0111\u01a1n gi\u1ea3n\u201d nh\u00e9.<\/p>\n","protected":false},"author":8,"featured_media":2508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[102],"class_list":["post-2497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-typescript"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=2497"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2497\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/2508"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=2497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=2497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=2497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}