小肥侠 發表於 2021-1-5 22:00:00

TypeScript开发环境搭建（VSCode+NodeJs）

<h1 id="typescript开发环境搭建vscodenodejs">TypeScript开发环境搭建（VSCode+NodeJs）</h1>
<h2 id="工具安装">工具安装</h2>
<ol>
<li>VS Code简介及安装</li>
</ol>
<p>VS Code是一款免费开源的代码编辑器。其具有跨平台、支持IntelliSence智能提示、内置Git支持、插件可扩展性强等优点。到官网下载并安装。</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215040956-1743738106.png"></p>
<ol start="2">
<li>VS Code插件推荐</li>
</ol>
<ul>
<li>默认下载的VS Code是英文版的。如果习惯中文界面，可以下载中文语言包。</li>
<li>node-snippets可提供一些node.js程序的代码模板，可以快速创建node.js程序。</li>
</ul>
<p>插件安装见图：</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215122690-1576531614.png"></p>
<ol start="3">
<li>Node.js简介及安装</li>
</ol>
<p>TypeScript是JavaScript的超集。合法的JavaScript语句也是合法的TypeScript语句。但是，写出来的TypeScript代码经过TypeScript转译成JavaScript代码后需要有运行的地方。在没有Node.js的过去，需要在浏览器中运行JavaScript代码。</p>
<p>Node.js是一个JavaScript运行平台。它使得JavaScript不再是只能在浏览器上用一下的玩具语言了。Node源自V8 JavaScript引擎。V8负责JavaScript代码的解释和执行，它能将JavaScript代码编译为机器码。</p>
<p>到官网下载并安装。</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215149087-1871868033.png"></p>
<blockquote>
<p>LTS版（长期支持版），有18个月的支持服务，期满后还有12个月的维护性支持服务。</p>
</blockquote>
<p>安装完后在命令行中运行以下命令以确认Node.js和npm已成功安装。</p>
<pre><code>npm -v
node -v
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215212536-1434644364.png"></p>
<p>npm是什么？npm是Node.js的包管理工具，用来安装各种Node.js的扩展。 npm是JavaScript的包管理工具，也是世界上最大的软件注册表。后面要使用的各种开发或运行时程序包，都将用npm来安装。也可以写自己的npm包，来简化重复的开发工作。</p>
<h2 id="创建typescript项目">创建TypeScript项目</h2>
<p>在你想要放置项目的位置创建一个文件夹。此处以F:\ts为例。</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215237533-41727348.png"></p>
<h3 id="必备程序包">必备程序包</h3>
<ol>
<li>在VSCode中使用快捷键Ctrl + ~打开终端。</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215314300-363974692.png"></p>
<ol start="2">
<li>创建package.json。我的理解，npm就是一个node的包管理工具，而package.json是npm的配置文件，描述了项目对包的依赖、项目名称、项目执行入口。在终端里执行以下命令即可自动创建。</li>
</ol>
<pre><code>npm init -y
</code></pre>
<ol start="3">
<li>安装TypeScript。在终端里执行以下命令即可安装TypeScript。</li>
</ol>
<pre><code>npm install typescript --save-dev
</code></pre>
<p>npm install typescript即安装typescript的意思。--save-dev是安装到项目本地且使用开发时依赖。在package.json的devDependencies键下，会看到已安装的开发时依赖的程序包。比如用于压缩js的gulp-uglify。因为在程序发布后用不到它，而只是在开发才用到它。</p>
<blockquote>
<p>如果出现Error: EPERM: operation not permitted错误，请以管理员身份运行VS Code，或者以管理员身份打开命令行，并切换到项目根目录下。（本例是F:\ts）</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215341981-1447351365.png"></p>
<p>安装完后会多出node_modules文件夹，并且package.json的devDependencies键下会出现"typescript"键:"^版本"。"typescript": "^4.1.3"表示最低版本要求是4.1.3版。</p>
<ol start="4">
<li>本地安装node.d.ts。这是对Node.js的内置核心模块的TypeScript类型定义。理解为头文件好了。有了它可以让Intellisence提供代码补全功能。在终端里执行以下命令来安装。</li>
</ol>
<pre><code>npm install @types/node --save-dev
</code></pre>
<blockquote>
<p>如果出现Error: EPERM: operation not permitted错误，请以管理员身份运行VS Code，或者以管理员身份打开命令行，并切换到项目根目录下。（本例是F:\ts）</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215410885-1818575712.png"></p>
<ol start="5">
<li>创建tsconfig.json。如果已经全局安装TypeScript，那么在终端中执行tsc --init命令后会在当前目录下自动地创建tsconfig.json。但前面是用本地安装（--save）的方式安装的，所以不能以tsc --init的方式来运行tsc。这里要用npx。npx是npm5.2之后发布的一个命令。它用来执行npm依赖包的二进制文件。这里运行以下命令来创建tsconfig.json。</li>
</ol>
<pre><code>npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
</code></pre>
<p>解释：</p>
<ul>
<li>--init：初始化一个TypeScript项目并创建一个tsconfig.json文件。</li>
<li>--rootDir：所有非声明文件的最长公共路径。（我理解是）TypeScript项目代码的输入文件路径。</li>
<li>--outDir：转译后的文件.js(包括.d.ts，.js.map等)。源码文件的目录结构也将被保留。（我理解是）想把编译后的代码放到哪里这里就写哪里。</li>
<li>--esModuleInterop：为了兼容不同模块的导入方式，需要设置该选项。(CommonJS/AMD/UMD)</li>
<li>--resolveJsonModule：为了让TypeScript支持解析JSON文件。</li>
<li>--lib es6,dom：编译过程中需要引入的库文件。</li>
<li>--module commonjs：指定生成哪个模块系统代码： "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。</li>
</ul>
<blockquote>
<p>参考资料:</p>
<ul>
<li>npx官网：https://www.npmjs.com/package/npx</li>
<li>偶余杭：https://www.jianshu.com/p/14c813bba544</li>
<li>项目配置-&gt;编译选项：https://www.tslang.cn/docs/handbook/compiler-options.html</li>
<li>https://www.typescriptlang.org/tsconfig#rootDir</li>
</ul>
</blockquote>
<p>打开tsconfig.json，添加include和exclude键。如图：</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215601313-1708222747.png"></p>
<p>include指定的文件会被包含到工程中。<br>
exclude指定的文件会被排除在工程外。</p>
<blockquote>
<p>此时已经可以编译TypeScript代码了。步骤如下：</p>
<ol>
<li>在src文件夹下建立index.ts，输入语句console.log("Hello World!");</li>
<li>在package.json的script小节添加脚本如下："build": "tsc"</li>
<li>在终端中运行命令npm run build。该命令会运行script小节的build脚本。该脚本会运行tsc，tsc又会根据tsconfig.json的配置去转译ts文件，然后在lib（tsconfig里配置的outDir）文件夹里输出index.js文件。</li>
<li>运行node lib/index.js会在命令行中输出Hello World!<br>
如图：<br>
<img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215631321-705019286.png"></li>
</ol>
</blockquote>
<h3 id="可选程序包">可选程序包</h3>
<p>使用上面的方式来编译TypeScript代码有一个不方便的点就是每次修改源代码后都要重新手动输入命令来运行。使用下面的方法可以让node监听代码修改，自动编译，并运行程序。</p>
<ol>
<li>使用ts-node来实时编译和运行。在终端中运行以下命令：</li>
</ol>
<pre><code>npm install --save-dev ts-node
</code></pre>
<ol start="2">
<li>使用nodemon来监听代码修改。只要文件改变，它就会调用ts-node。在终端中运行以下命令：</li>
</ol>
<pre><code>npm install --save-dev nodemon
</code></pre>
<ol start="3">
<li>添加npm脚本。打开package.json，在script小节添加以下脚本：</li>
</ol>
<pre><code>"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts"
},
</code></pre>
<p>"tsc -p"的含义：编译指定目录下的项目。这个目录应该包含一个tsconfig.json文件来管理编译。如果没有指定"-p"参数，tsc会从当前目录往上级查找，直到找到tsconfig.json文件。"."是根目录。</p>
<blockquote>
<p>补充：如果想一次运行多个npm脚本，则可以使用&amp;将多个npm脚本组合在一起。例如把上面的scripts改为这样：</p>
<pre><code>"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts",
    "all": "start &amp; build"
},
</code></pre>
<p>若在终端中输入npm run all，则会运行all这个脚本。</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215706739-1949187871.png"></p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215725963-277488434.png"></p>
<h3 id="创建应用">创建应用</h3>
<p>修改index.ts为如下：</p>
<pre><code class="language-ts">import * as fs from "fs";

const path = "./message.txt";
const data = "Hello World!";
const encoding = "utf8";

console.log(data);

fs.writeFile(path, data, encoding, error =&gt; {
    if (error) {
      console.log(error);
    }
});
</code></pre>
<p>然后在终端中输入命令"npm run start"并运行。则会在终端中输出Hello World!并且在ts项目根目录下创建文件message.txt，其内容为Hello World!</p>
<p><img src="https://img2020.cnblogs.com/blog/2266741/202101/2266741-20210105215748010-540014286.png"></p>
<blockquote>
<p>注：fs是Node.js的核心模块之一。用于文件的读写。</p>
</blockquote>
<blockquote>
<p>参考资料：</p>
<ul>
<li>《TypeScript深入理解》 - 第5章</li>
<li>《Visual Studio Code权威指南》 - 第2章</li>
<li>《NodeJs实战（第2版）》 - 第1章、第2章</li>
</ul>
<p>补充：如果使用npm安装程序包速度慢，可以使用淘宝的国内镜像。安装方法如下：</p>
<pre><code>npm install cnpm -g
</code></pre>
<p>安装完成后，在需要使用npm命令的地方，用cnpm替换即可。</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/kokiafan/p/14238278.html
頁: [1]
查看完整版本: TypeScript开发环境搭建（VSCode+NodeJs）