初探typescript

前期准备

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,准备开始安装依赖

npm init -y # 初始化node项目
npm install typescript --save-dev # 添加typescript
npm install @types/node --save-dev # 添加node.d.ts
npm install ts-node --save-dev # 添加ts-node 可以直接执行ts文件
npm install nodemon --save-dev # nodemon 实时监听文件变化重启服务,无需手动重启
# 也可以用下面的命令一次性安装
# npm install typescript @types/node ts-node nodemon --save-dev

# 初始化 ts配置
npx tsc --init --rootDir src --outDir dist --esModuleInterop --resolveJsonModule --lib es6,dom  --module commonjs

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

{
  "name": "totonoo_comments",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "tsc -p .",
    "dev": "nodemon --watch src/**/*.ts --exec \"ts-node\" src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.7",
    "nodemon": "^2.0.6",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.5"
  }
}

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

// operations.ts
export const add = (x: number, y: number): number => {
  return x + y
}
export const sub = (x: number, y: number): number => {
  return x - y
}
export const mul = (x: number, y: number): number => {
  return x * y
}
export const div = (x: number, y: number): number => {
  return x + y
}
export default {
  add,
  sub,
  mul,
  div
}
import { add } from './operations'

const result = add(1, 3)
console.log(result)

五、跑一下结果

npm run dev # 启动开发服务 出现以下界面 说明成功了
# > ts_demo@1.0.0 dev D:\temp\ts_demo
# > nodemon --watch src/**/*.ts --exec "ts-node" src/index.ts

# [nodemon] 2.0.6
# [nodemon] to restart at any time, enter `rs`
# [nodemon] watching path(s): src\**\*.ts
# [nodemon] watching extensions: ts,json
# [nodemon] starting `ts-node src/index.ts`
# 4
# [nodemon] clean exit - waiting for changes before restart

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

# 同一cmd 先用ctrl+c退出当前任务
npm install eslint --save-dev # 添加 eslint
npm install @typescript-eslint/parser --save-dev # 添加eslint ts解析器
npm install @typescript-eslint/eslint-plugin --save-dev # 添加 eslint ts插件
npm install eslint-config-alloy --save-dev # 添加 AlloyTeam 的eslint配置

# 也可以一次性安装
# npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy --save-dev

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

module.exports = {
  extends: [
    'alloy',
    'alloy/typescript',
  ],
  env: {
    // 你的环境变量(包含多个预定义的全局变量)
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量(设置为 false 表示它不允许被重新赋值)
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
    '@typescript-eslint/explicit-member-accessibility': 'off'
  }
}

package.json 添加一个任务:

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

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

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