TypeScript-入门（一）-安装配置

一、安装环境

全局安装typescript

npm i typescript -g

二、ts配置

在ts中，可以通过tsconfig.json进行ts的相关配置，我们可以手动创建这个文件，也可以通过tsc --init自动创建。

{
  "compilerOptions": {
    "target": "ES2016", // 编译后的目标产物
    "module": "CommonJS", // 使用的模块化 常见的有commonjs、es6
    "lib": [ // 配置当前代码的环境， dom：浏览器环境，目前没有node的环境，所以要使用node环境，可以通过安装node的ts声明来实现（@types/node)
      "ES2016"
    ],
    "outDir": "./dist", // 编译后产物存放位置
    "strictNullChecks": true, // 限制null/undefined 赋值给除自身之外的类型
    "removeComments": true, // 编译结果移除注释
    "noImplicitUseStrict": true, // 编译结果中不包含 ”use strict" 字段
    "noEmitOnError": true, // 错误时不生成编译结果
    "esModuleInterop": true, // 启用es模块化交互非es模块导出
    "moduleResolution": "Node", // 设置解析模块的模式（require引入时，怎么找到模块）
  },
  "include": [ // 编译哪个目录
    "./src"
  ],
  // "files": ["./src/index.ts"] // 表示仅编译index.ts这个文件
}

三、使用第三方库简化开发流程

• ts-node：自动编译ts文件并运行（在内存中执行，即不会生成打包文件，类似vue和react的开发环境）
• nodemon：监测文件变化后执行特定脚本（可检测文件类型比较多，如js、ts、html等）

npm i ts-node -g
npm i nodemon -g

配置命令脚本

{
  "scripts": {
  
  // nodemon命令解析
  // --watch 表示监听的目录
  // -e 表示要监听的文件后缀
  // --exec 表示要执行的命令
  
  // ts-node命令解析
  // ts-node src/index.ts 表示编译并执行该文件
    "dev": "nodemon --watch src -e ts --exec ts-node src/index.ts",
    "build": "tsc"
  },
  "devDependencies": {
    "@types/node": "^20.9.1"
  }
}