前期准备

Typescript出来很久了，也天天被人吹爆了，耳朵都快磨起茧子了。最近项目做的快，有点空闲时间，就打算学一下。学习之前先搜索了2个关键词“为什么要用Typescript”和“为什么不用Typescript”，看了一圈，挺有意思。
总结一下我理解的结论：

  1. ts是超集可能不准确，没觉得多在哪里？类型检查，装饰器，JS本身也不需要这个，弱语言自有他的灵活性，何苦非得变他；
  2. ts最终的运行还是要编译成js，但是查了一下开发过程中可以使用ts-node；
  3. 如果是开发网页，我觉得没有必要选择ts，业务本身就是灵活多变的，跟js很搭；
  4. 如果是开发框架和通用组件，是可以选择ts的，毕竟框架都是给别人用的，输入输出应该明确；
  5. 如果是node开发，也可以选择，不会java可以过下java的瘾。
    综上所述，我把学习目标先定一下，用node写一简单的评论系统（Ts + Koa + Typeorm + MongoDB）。如果把这个当成教程来看，是需要有前置条件的，假设会node开发，懂基本的开发流程和语法，对ES6有了解。我使用的win10操作系统。

搭建开发环境

一、新建目录 totonoo_comments
二、在 totonoo_comments 下打开cmd，准备开始安装依赖

  1. npm init -y # 初始化node项目
  2. npm install typescript --save-dev # 添加typescript
  3. npm install @types/node --save-dev # 添加node.d.ts
  4. npm install ts-node --save-dev # 添加ts-node 可以直接执行ts文件
  5. npm install nodemon --save-dev # nodemon 实时监听文件变化重启服务，无需手动重启
  6. # 也可以用下面的命令一次性安装
  7. # npm install typescript @types/node ts-node nodemon --save-dev
  9. # 初始化 ts配置
  10. npx tsc --init --rootDir src --outDir dist --esModuleInterop --resolveJsonModule --lib es6,dom  --module commonjs

三、在 package.json 中添加2个任务

  1. {
  2.   "name": "totonoo_comments",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "start": "npm run build",
  8.     "build": "tsc -p .",
  9.     "dev": "nodemon --watch src/**/*.ts --exec \"ts-node\" src/index.ts",
  10.     "test": "echo \"Error: no test specified\" && exit 1"
  11.   },
  12.   "keywords": [],
  13.   "author": "",
  14.   "license": "ISC",
  15.   "devDependencies": {
  16.     "@types/node": "^14.14.7",
  17.     "nodemon": "^2.0.6",
  18.     "ts-node": "^9.0.0",
  19.     "typescript": "^4.0.5"
  20.   }
  21. }

四、新建目录src和src/index.ts、src/operations.ts文件

  1. // operations.ts
  2. export const add = (x: number, y: number): number => {
  3.   return x + y
  4. }
  5. export const sub = (x: number, y: number): number => {
  6.   return x - y
  7. }
  8. export const mul = (x: number, y: number): number => {
  9.   return x * y
  10. }
  11. export const div = (x: number, y: number): number => {
  12.   return x + y
  13. }
  14. export default {
  15.   add,
  16.   sub,
  17.   mul,
  18.   div
  19. }
  1. import { add } from './operations'
  3. const result = add(1, 3)
  4. console.log(result)

五、跑一下结果

  1. npm run dev # 启动开发服务 出现以下界面 说明成功了
  2. # > ts_demo@1.0.0 dev D:\temp\ts_demo
  3. # > nodemon --watch src/**/*.ts --exec "ts-node" src/index.ts
  5. # [nodemon] 2.0.6
  6. # [nodemon] to restart at any time, enter `rs`
  7. # [nodemon] watching path(s): src\**\*.ts
  8. # [nodemon] watching extensions: ts,json
  9. # [nodemon] starting `ts-node src/index.ts`
  10. # 4
  11. # [nodemon] clean exit - waiting for changes before restart

六、任意修改 index.ts 文件，观察一下cmd内容变化，有变化证明监听也成功了。
七、在 TypeScript 中加入 ESLint

  1. # 同一cmd 先用ctrl+c退出当前任务
  2. npm install eslint --save-dev # 添加 eslint
  3. npm install @typescript-eslint/parser --save-dev # 添加eslint ts解析器
  4. npm install @typescript-eslint/eslint-plugin --save-dev # 添加 eslint ts插件
  5. npm install eslint-config-alloy --save-dev # 添加 AlloyTeam 的eslint配置
  7. # 也可以一次性安装
  8. # npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy --save-dev

在项目的根目录下创建eslint配置文件 .eslintrc.js ，内容如下：

  1. module.exports = {
  2.   extends: [
  3.     'alloy',
  4.     'alloy/typescript',
  5.   ],
  6.   env: {
  7.     // 你的环境变量（包含多个预定义的全局变量）
  8.     //
  9.     // browser: true,
  10.     // node: true,
  11.     // mocha: true,
  12.     // jest: true,
  13.     // jquery: true
  14.   },
  15.   globals: {
  16.     // 你的全局变量（设置为 false 表示它不允许被重新赋值）
  17.     //
  18.     // myGlobal: false
  19.   },
  20.   rules: {
  21.     // 自定义你的规则
  22.     '@typescript-eslint/explicit-member-accessibility': 'off'
  23.   }
  24. }

package.json 添加一个任务：

  1. {
  2.     "scripts": {
  3.     "start": "npm run build",
  4.     "build": "npm run eslint && tsc -p .",
  5.     "dev": "nodemon --watch src/**/*.ts --exec \"ts-node\" src/index.ts",
  6.     "eslint": "eslint src --ext .ts",
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9. }

在 index.ts 中加入 var a = 1 ，然后运行下 npm run eslint 就可以看到有错误提示了。
build任务中加入了打包之前先做一下eslint。

到此为止，一个基本的开发环境已经跑起来了。

1.初探typescript，搭建开发环境.mp4 (31.58MB)