TS项目的相关环境搭建

构建TS项目环境

1. 生成项目配置文件package.json

    npm init -y

2. 配置自动化工具用于辅助TS开发。如vite构建工具，在vite搭建的服务器中，ts文件可以无需编译即可执行；或者自动更新脚本的lite-server工具

• 方案一：在项目的开发环境下载vite工具

  npm i vite -D
  

  配置vite使用指令：

  "scripts": {
      "dev": "vite"
  },
  

• 方案二：配置开发环境工具lite-server

  npm i lite-server -D
  

  配置lite-server启动服务器指令：

  "scripts": {
      "start": "lite-server"
  },
  

3. 在配置好的环境上使用TS，如有特殊配置，需要生成tsconfig.json

   tsc --init

此时根据项目需求配置TS：

• 个人编写的项目TS文件的输入及编译输出目录调整。常见规则：

    "rootDir": "./src/",  
    "outDir": "./disk/",  
    "noImplicitAny": true,
    "noImplicitNull": true
    //...
  

• 或者使用第三方的文件库

  第三方库文件并非都由TS编写，即使用TS编写，没有声明文件的库也无法正确被TS识别，因此如果使用npm默认下载的库文件中不具备声明文件，可以自行下载带有@types前缀的对应库文件，实际是TS识别各个三方库的类型声明的文件存放位置，也是下载前缀

  在对应的tsconfig.json文件中配置规则：

  1. typeRoots: 用来指定默认的类型声明文件查找路径
  2. types: TypeScript编译器会默认引入typeRoot下所有声明文件，如果只需要引用部分类型声明，用types手动限制

  {
    "compilerOptions": {
      "typeRoots": ["./typings"],
      "types": ["jquery"]
    }
  }
  

  3. tsconfig.json中设置include包含编译文件或文件夹，files编译文件以及exclude排除文件属性：
     先识别include,files需要编译的文件，再排除不需要编译文件

     "include": [. //包含
       "src/**/*"
     ],
     "exclude": [  //排除编译的文件 ——不设置默认排除三方库
         "node_modules"
     ],
     "files": [. //具体要编译的文件
       "xx.ts"
     ],