{"size": 4102, "ext": "js", "max_stars_repo_path": "docs/.vuepress/dist/assets/js/44.29f2b178.js", "max_stars_repo_name": "tannnb/blog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "docs/.vuepress/dist/assets/js/44.29f2b178.js", "max_issues_repo_name": "tannnb/blog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "docs/.vuepress/dist/assets/js/44.29f2b178.js", "max_forks_repo_name": "tannnb/blog", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 4102.0, "max_line_length": 4102, "alphanum_fraction": 0.5860555826}
(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{619:function(s,t,a){"use strict";a.r(t);var e=a(29),n=Object(e.a)({},(function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h1",{attrs:{id:"概念"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#概念"}},[s._v("#")]),s._v(" 概念")]),s._v(" "),a("p",[a("code",[s._v("TypeScript")]),s._v("是"),a("code",[s._v("JavaScript")]),s._v("的一个超集，主要提供了类型系统和对ES6的支持。")]),s._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[s._v("优势")]),s._v(" "),a("ul",[a("li",[s._v("能在开发过程中更快的发现潜在问题。")]),s._v(" "),a("li",[s._v("对编辑器更友好的代码提示功能。")]),s._v(" "),a("li",[s._v("代码语义更清晰易懂")])])]),s._v(" "),a("h1",{attrs:{id:"安装和编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#安装和编译"}},[s._v("#")]),s._v(" 安装和编译")]),s._v(" "),a("h4",{attrs:{id:"node-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#node-js"}},[s._v("#")]),s._v(" Node.js")]),s._v(" "),a("p",[s._v("你首先需要在官网"),a("a",{attrs:{href:"https://nodejs.org/zh-cn/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Node.js"),a("OutboundLink")],1),s._v(" (opens new window)按照你电脑的操作系统下载对应的Node版本进行安装。")]),s._v(" "),a("h4",{attrs:{id:"typescript"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typescript"}},[s._v("#")]),s._v(" Typescript")]),s._v(" "),a("div",{staticClass:"language-shell line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[s._v("$ "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("install")]),s._v(" -g typescript  // 全局安装\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# yarn global add typescript")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 安装完毕后，查看版本号")]),s._v("\n$ tsc -v\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br")])]),a("p",[s._v("创建一个空文件夹，并且生成初始化文件:"),a("code",[s._v("tsc --init")]),s._v("生成"),a("code",[s._v("tsconfig.js")]),s._v("配置文件，并写下基础ts代码,进行编译")]),s._v(" "),a("div",{staticClass:"language-ts line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" price"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[s._v("number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token builtin"}},[s._v("console")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br")])]),a("p",[s._v("执行"),a("code",[s._v("tsc index.ts")]),s._v(",可以看到会生成一个"),a("code",[s._v("index.js")]),s._v("同名文件,并且命令行输出了所打印信息")]),s._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[s._v("不需要编译成js的前提下，可以直接执行 ts 代码吗？ 需要使用`ts-node`库来提供支持:")]),s._v(" "),a("ul",[a("li",[a("p",[s._v("npm install ts-node")])]),s._v(" "),a("li",[a("p",[s._v("ts-node index.ts")])])]),s._v(" "),a("p",[s._v("此时命令行输出了所打印信息")])]),s._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[s._v("每次改动都要手动去执行编译，这样很麻烦，有没有可以实时监听并编译？")]),s._v(" "),a("p",[s._v("执行watch即可每次文件变动ts会自动编译成js： tsc --watch index.ts")])])])}),[],!1,null,null,null);t.default=n.exports}}]);