内容简介:使用以下命令创建项目的目录:建立好的目录如下:
一、环境
Node.js v10.15.3 npm 6.9.0 Visual Studio Code 1.33.0 (user setup) 2019/4/6 Koa2-Node.js QQ群:481973071
二、开发 TypeScript
1、建立项目目录
使用以下命令创建项目的目录:
mkdir ts3 cd ts3 mkdir src mkdir dist
建立好的目录如下:
ts3 ├─dist └─src
2、初始化 NPM
在项目的根目录下,执行下面的命令:
npm init -y
现在项目结构如下:
ts3 ├─dist └─src └─package.json
3、安装 TypeScript
在项目的根目录下,执行下面的命令:
npm i -g typescript
4、创建并配置 tsconfig.json
在项目的根目录下,执行下面的命令:
tsc --init
现在项目结构如下:
ts3 ├─dist └─src └─package.json └─tsconfig.json
在 tsconfig.json
中取消下面属性项的注释,并修改其属性的值:
这样设置之后,我们在 ./src
中编码 .ts
文件, .ts
文件编译成 .js
后,输出到 ./dist
中。
"outDir": "./dist", "rootDir": "./src",
5、 Hello Typescript
将下面代码复制到 ./src/index.ts
中:
const hello: string = 'hello, Alan.Tang'; console.log(hello);
在项目的根目录下,执行下面的命令:
tsc
是编译命令,详情查看:
https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
tsc
的编译选项,详情查看: https://www.tslang.cn/docs/handbook/compiler-options.html
tsc node ./dist/index.js
执行结果如下:
PS C:\Users\Alan\TestCode\ts3> tsc PS C:\Users\Alan\TestCode\ts3> node ./dist/index.js hello, Alan.Tang
6、使用自动实时编译
详情查看: https://go.microsoft.com/fwlink/?LinkId=733558
Ctrl + Shift + B
运行构建任务,将显示以下选项:
选择 tsc: 监视 - tsconfig.json
,回车运行之后,编辑的代码保存之后,就会自动编译。
7、简化运行命令
每次输入 node ./dist/index.js
执行代码,有点麻烦,因为命令太长了。
在命令行界面,按键盘 ↑
切换历史输入命令,可以快速使用历史输入过的命令。
三、代码检查
详情查看: https://ts.xcatliu.com/engineering/lint.html
1、安装 ESLint
ESLint
可以安装在当前项目中或全局环境下,因为代码检查是项目的重要组成部分,所以我们一般会将它安装在当前项目中。可以运行下面的脚本来安装:
npm install eslint --save-dev
由于 ESLint
默认使用 Espree
进行语法解析,无法识别 TypeScript
的一些语法,故我们需要安装 typescript-eslint-parser
,替代掉默认的解析器,别忘了同时安装 typescript
:
npm install typescript typescript-eslint-parser --save-dev
由于 typescript-eslint-parser
对一部分 ESLint
规则支持性不好,故我们需要安装 eslint-plugin-typescript
,弥补一些支持性不好的规则。
npm install eslint-plugin-typescript --save-dev
现在项目结构如下:
ts3 ├─dist └─node_modules └─src └─package-lock.json └─package.json └─tsconfig.json
2、创建配置文件 .eslintrc.js
ESLint
需要一个配置文件来决定对哪些规则进行检查,配置文件的名称一般是
.eslintrc.js
或
.eslintrc.json
。
当运行 ESLint
的时候检查一个文件的时候,它会首先尝试读取该文件的目录下的配置文件,然后再一级一级往上查找,将所找到的配置合并起来,作为当前被检查文件的配置。
在项目的根目录下,执行下面的命令:
创建配置文件
./node_modules/.bin/eslint --init
按需求,选择相应的选项:
您想如何使用ESLint? ? How would you like to use ESLint? To check syntax, find problems, and enforce code style 您的项目使用什么类型的模块? ? What type of modules does your project use? JavaScript modules (import/export) 您的项目使用哪个框架? ? Which framework does your project use? None of these 你的代码在哪里运行?(按<space>选择,<a>切换所有,<i>反转选择) ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection) Node 您想如何为您的项目定义一个样式? ? How would you like to define a style for your project? Use a popular style guide 您想遵循哪种风格指南? ? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript) 您希望配置文件的格式是什么? ? What format do you want your config file to be in? JavaScript Checking peerDependencies of eslint-config-airbnb-base@latest 您所选择的配置需要以下依赖项: The config that you've selected requires the following dependencies: eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0 您想现在用npm安装它们吗? ? Would you like to install them now with npm? Yes Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0 npm WARN ts3@1.0.0 No description npm WARN ts3@1.0.0 No repository field. + eslint-config-airbnb-base@13.1.0 + eslint-plugin-import@2.16.0 + eslint@5.16.0 added 53 packages from 37 contributors, updated 1 package and audited 286 packages in 10.303s found 0 vulnerabilities Successfully created .eslintrc.js file in C:\Users\Alan\TestCode\ts3
现在项目结构如下:
ts3 ├─dist └─node_modules └─src └─.eslintrc.js └─package-lock.json └─package.json └─tsconfig.json
编辑 .eslintrc.js
,增加 parser: 'typescript-eslint-parser',
替换掉默认的解析器,使之识别 TypeScript
的一些语法,如下面所示:
module.exports = { parser: 'typescript-eslint-parser', env: { es6: true, node: true, }, extends: 'airbnb-base', globals: { Atomics: 'readonly', SharedArrayBuffer: 'readonly', }, parserOptions: { ecmaVersion: 2018, sourceType: 'module', }, rules: { }, };
3、在 VSCode
中集成 ESLint
检查
在编辑器中集成 ESLint
检查,可以在开发过程中就发现错误,极大的增加了开发效率。
要在 VSCode
中集成 ESLint
检查,我们需要先安装 ESLint
插件,点击「扩展」按钮,搜索 ESLint
,然后安装即可。
VSCode
中的 ESLint
插件默认是不会检查 .ts
后缀的,需要在「文件 => 首选项 => 设置」中,添加以下配置:
{ "eslint.validate": [ "typescript" ] }
将下面代码复制到 ./src/index.ts
中:
let num: number = 1; if (num == 2) { console.log(num); }
现在项目结构如下:
ts3 ├─dist └─node_modules └─src └─index.ts └─.eslintrc.js └─package-lock.json └─package.json └─tsconfig.json
现在编辑器,应该会提示 4
个错误:
我们按照错误提示,修改成正确的代码风格:
console.log
一般是在调试阶段使用,发布正式版本时,应该移除。所以这里没有提示红色的致命错误,而是使用了警告。
4、无法解析到模块的路径
将下面代码复制到 ./src/index.ts
中:
import Cat from './Cat'; const kitty: Cat = new Cat('kitty'); kitty.say();
将下面代码复制到 ./src/Cat.ts
中:
export default class Cat { private name: string; constructor(name: string) { this.name = name; } say() { console.log(this.name); } }
现在项目结构如下:
ts3 ├─dist └─node_modules └─src └─Cat.ts └─index.ts └─.eslintrc.js └─package-lock.json └─package.json └─tsconfig.json
上述代码复制粘贴,保存之后,会提示这样的错误:
Unable to resolve path to module './Cat'.eslint(import/no-unresolved)
解决办法是使用 eslint-import-resolver-alias
,先安装依赖,执行下面的命令:
npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
然后,在 .eslintrc.js
配置中,编辑成如下代码:
module.exports = { parser: 'typescript-eslint-parser', env: { browser: true, es6: true, }, extends: 'airbnb-base', globals: { Atomics: 'readonly', SharedArrayBuffer: 'readonly', }, parserOptions: { ecmaVersion: 2018, sourceType: 'module', }, rules: { }, settings: { 'import/resolver': { alias: { map: [ ['@', './src'] ], extensions: ['.ts'], }, }, }, };
四、调试 TypeScript
F5
开始调试
TypeScript
,并且还具备断点调试功能,答案是,使用
TS-node
。
详情查看: https://github.com/TypeStrong/ts-node
在项目的根目录下,执行下面的命令:
npm install -D ts-node
在 VScode
调试中,添加配置:
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "runtimeArgs": [ "-r", "ts-node/register" ], "args": [ "${workspaceFolder}/src/index.ts" ] } ] }
按 F5
开始愉快的调试吧, F9
是添加断点:
五、参考文章
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 配置vscode调试java代码
- 一场Nginx https配置调试过程
- 前端小纠结--VS Code调试配置分享
- 微信分享在本地调试配置nginx将本地ip映射为公众号配置域名
- Visual Studio 通过修改项目的调试配置文件做到临时调试的时候不要编译(解决大项目编译缓慢问题)
- 工具 | 腾讯开源的,基于 Whistle 实现的多账号多环境远程配置及抓包调试平台
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Powerful
Patty McCord / Missionday / 2018-1-25
Named by The Washington Post as one of the 11 Leadership Books to Read in 2018 When it comes to recruiting, motivating, and creating great teams, Patty McCord says most companies have it all wrong. Mc......一起来看看 《Powerful》 这本书的介绍吧!