使用vscode写typescript(node.js环境)起手式
动机
一直想把typescript在服务端开发中用起来,主要原因有:
- javascript很灵活,但记忆力不好的话,的确会让你头疼,看着一月前自己写的代码,一脸茫然。
- 类型检查有利有敝,但在团队开发中,限制个人的天马行空还是很有效的;
- node对模块等es6特性的支持不尽人意,目前我只用node长期支持版所能支持的特性,个人不愿用babel之类的工具;
- 开始用webstorm开发,结果它象visual studio系列一样,越来越臃肿;转而用vscode,但它的绝配是typescript;
问题
之前也陆陆续续试着用了,但总被一些困难绊住了,主要有以下几点:
- vscode开发调试typescript环境的搭建,因为vscode版本更新也快,网上资料繁杂;
- tsconfig.json的配置
- tslint.json的配置
- 全局变量的使用与设定;
解决
经过多次的不断尝试,今天终于达到自己满意的地步了。
环境搭建,基于最新版(1.26.1)
安装node.js
从官网下载对应操作系统的安装包,按说明安装。
全局安装typescript
npm i -g typescript
生成并配置tsconfig.json
运行命令:
tsc --init
配置文件:
{
"compilerOptions": {
"target": "es2017", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
"module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
"moduleResolution": "node", // 选择模块解析策略: 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
"emitDecoratorMetadata": true, // 为装饰器提供元数据的支持
"experimentalDecorators": true, // 启用装饰器
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
"strict": true, // 启用所有严格类型检查选项
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
"alwaysStrict": true, // 以严格模式检查没个模块,并在没个文件里加入 'use strict'
"sourceMap": true,
"noEmit": false, // 不生成输出文件
"removeComments": true, // 删除编译后的所有的注释
"importHelpers": true, // 从 tslib 导入辅助工具函数
"strictNullChecks": true, // 启用严格的 null 检查
"lib": ["es2017"], // 指定要包含在编译中的库文件
"typeRoots": ["node_modules/@types"],
"types": [
"node",
],
"outDir": "./dist",
"rootDir": "./src"
},
"include": [ // 需要编译的ts文件一个*表示文件匹配**表示忽略文件的深度问题
"./src/*.ts",
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
"public"
]
}
生成项目配置package.json
运行命令:
npm init
配置文件:
{
"name": "arest",
"version": "0.1.0",
"description": "a rest server use kao2, typescript & mongo db.",
"main": "app.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhoutk/arest.git"
},
"keywords": [
"rest",
"koa2",
"typescript",
"mongo"
],
"dependencies": {
"koa": "^2.5.2"
},
"author": "zhoutk@189.cn",
"license": "MIT",
"bugs": {
"url": "https://github.com/zhoutk/arest/issues"
},
"homepage": "https://github.com/zhoutk/arest#readme",
"devDependencies": {
"@types/koa": "^2.0.46",
"@types/node": "^10.9.4",
"tslint": "^5.11.0",
"typescript": "^3.0.3"
}
}
监测文件改动并编译
运行命令:
tsc -w
配置vscode项目启动launch.json
配置好后,按F5即可开始调试运行程序
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/dist/app.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
tslint的配置与生效
使用tslint可以定制团队共同使用的一些编码规则,这里需要注意的是,不但要全局安装typescript,tslint,还要在项目中安装,不然不能生效。这个鬼折腾了我好久!
{
"rules": {
"class-name": true,
"comment-format": [
false,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": false,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"semicolon": [true, "never"],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
全局变量的使用
全局变量虽然不能滥用,便也不能没有,以下几点是关键:
- tsconfig.json中加入 "types": [ "node"]
- npm i @types/node
- 建立globals.d.ts(文件名可以随意取),在其中声名全局变量(这是让ide知道)
- 在入口文件(app.ts)中引入全局模块并赋值给node的全局变量global(这是让代码知道)
项目地址
这个项目我准备将express+mysql的成功经验移植到koa2+mongo中来。
https://github.com/zhoutk/arest
使用方法
git clone https://github.com/zhoutk/arest
cd arest
npm i
tsc -w
用vscode打开项目,并按F5运行
小结
终于迈入typescript坑中,痛并快乐着!
来源:https://segmentfault.com/a/1190000016305647
使用vscode写typescript(node.js环境)起手式的更多相关文章
- 阿里云 CentOS7.2 配置FTP+Node.js环境
本人小白,写下这篇博客意在记录踩过的坑,大神请绕道~ 准备工作 安装自己喜欢的连接软件(一般是putty或者xshell),本人选择的是xshell,软件如图 : 通过软件中的ssh连接连接上已经购买 ...
- 手把手教你webpack、react和node.js环境配置(上篇)
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- 手把手教你webpack、react和node.js环境配置(下篇)
上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...
- 如何在 Windows 10 中搭建 Node.js 环境?
[编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
- win 环境下 node.js环境变量
在win 环境下 node.js环境变量有两种情况: (1)开发环境(development):开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告. ...
- node.js环境安装,及连接mongodb测试
1.node.js环境安装 npm config set python python2.7npm config set msvs_version 2013npm config set registry ...
- paip.最好的脚本语言node js 环境搭建连接mysql
paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world .js 2 #---------模 ...
- KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- mac 上node.js环境的安装与测试
如果大家之前做过web服务器的人都知道,nginx+lua与现在流行的Node.js都是可以做web服务器的,前者在程序的写法和配置上要比后者麻烦,但用起来都是差不多.在这里建议大家如果对lua脚本语 ...
随机推荐
- [CentOS]怎样解决gcc版本号冲突?
今天碰到一个比較坑爹的问题.在centos上用yum安装编译环境,执行: yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel o ...
- 报错: Access restriction: The type JPEGImageEncoder is not accessible due to restriction on required library
报错: Access restriction:The type JPEGCodec is not accessible due to restriction on required library C ...
- Free Code Camp社区对数百计编程学习者进行的统计希望告诉你什么?
文章来源:https://www.sdk.cn/news/5044 著名编程学习社区Free Code Camp对超过1.5万名编程学习者进行了调查.其中有一个问题为:“你对哪个编程职位最感兴趣?”有 ...
- vue2.X 自定义 模态框 modal
1.自定义 modal Modal.vue <!-- 模态框 --> <template> <div class="modal-mask" v-sho ...
- Vue避免 v-if 和 v-for 用在一起
永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users" ...
- JSON 值转换
var Txt = '{"a":"1","b":"5","c":"5",&quo ...
- json和jsonp以及ajax
简单的说: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后 ...
- uva 11885 - Number of Battlefields(矩阵高速幂)
题目连接:uva 11885 - Number of Battlefields 题目大意:给出周长p,问多少种形状的周长为p的,而且该图形的最小包围矩阵的周长也是p,不包含矩形. 解题思路:矩阵高速幂 ...
- <LeetCode OJ> 141 / 142 Linked List Cycle(I / II)
Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without using ex ...
- Android 虚化图片的方法
Android 虚化图片 模糊图片 图片毛玻璃效果. 效果如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaDNjNGxlbm92bw==/font/ ...