node环境搭建typescript
上效果
看这篇文章，你可以收获在node环境中，编写代码，自动运行，编译成js。
安装库
npm install typescript -D 我们要明白一个原理，ts(typescript) 是js的超集，生效的还是js,因此，ts所在的部分是编译成js，把js拉上了一个层次，使用ts就是在开发阶段编译成js,然后和js是一样的。ts 的作用 传送门
安装可以使用局部安装或者全局安装，这里使用局部安装。安装好后，typescript会给我们提供一个命令， tsc, 我们写好的ts的代码可以使用 npx tsc + 文件名 例如： npx tsc index.ts 来进行编译。但是编译好后ts文件会报错如下图：
原因：默认情况下，ts会做出几种假设
1.假设当前的执行环境是dom,因为ts编译的环境，他不知道是node，还是dom,所以默认的执行环境是dom，。
2.如果代码中没有使用模块化（commonjs, cmd, amd es的模块），如：import, export 等便认为该代码是全局执行的
3.编译的目标默认是es3，为了全方面的兼容。我们都知道，dom环境的变量var 是全局的，如果已经有了，再一次var 的话，那就就会重复声明变量
更改方法
1.在使用npx tsc index – 加上选项参数 进行编译
2.使用typescript的配置文件，更改编译选项， 可以自己手动新建文件 tsconfig.json 也可以使用命令 npx tsc --init 来自动生成tsconfig.json 这个文件
添加配置文件
我个人的配置文件：
{ "compilerOptions": { "target": "es2016", //使用es7的标准 "module": "commonjs", //编译目标的模块化标准，由于是node环境，使用commonjs的模块化标准 "lib": ["es2016"], // ts使用的环境是node, 使用es的环境，如果是dom的话，直接使用dom "outDir": "./dist" // 编译输出的目录 }, "include": ["./src"], // 值编译src里面的.ts文件 // "files": [], // 指定编译的文件 }
其他配置文件：
{ // 编译选项 "compilerOptions": { /* Basic Options */ 基础配置 // "incremental": true, /* 启用增量编译 Enable incremental compilation */ "target": "es5", /*指定ECMAScript目标版本,默认ES3 Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /*指定编译模块化代码的生成，node环境使用commonjs Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ // "lib": [], /*指定要包含在编译中的库文件，例如是node环境还是浏览器环境，node环境使用es2015-es2020 ，如果是浏览器环境直接使用dom就好了 Specify library files to be included in the compilation. */ // "allowJs": true, /*允许编译javascript文件 Allow javascript files to be compiled. */ // "checkJs": true, /*报告.js文件中的错误 Report errors in .js files. */ // "jsx": "preserve", /*指定JSX代码生成 Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /*生成相应的.d.ts的文件 Generates corresponding '.d.ts' file. */ // "declarationMap": true, /*为每个对应对象生成一个sourcemap .d.ts文件 Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /*生成.map文件 Generates corresponding '.map' file. */ // "outFile": "./", /*输出单个文件位置 Concatenate and emit output to single file. */ // "outDir": "./", /*输出文件到文件夹的位置，例如vue打包后的结果是到dist文件夹里面 Redirect output structure to the directory. */ // "rootDir": "./", /*指定输入文件的根目录。用于控制输出目录结构 Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /*项目是否需要编译 Enable project compilation */ // "tsBuildInfoFile": "./", /*指定文件去保存编译信息，应该和日志文件一样吧 Specify file to store incremental compilation information */ // "removeComments": true, /*编译是否需要移除注释信息 Do not emit comments to output. */ // "noEmit": true, /*不生成输出文件 Do not emit outputs. */ // "importHelpers": true, /*从 tslib 导入辅助工具函数 Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /*全面支持es5,es3 使用for-of的迭代，解构等， Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /*将每个文件转换为一个单独的模块 Transpile each file as a separate module (similar to 'ts.transpileModule'). */ /* 严格模式的配置 Strict Type-Checking Options */ "strict": true, /*启用所有严格的类型检查选项 Enable all strict type-checking options. */ // "noImplicitAny": true, /*如果编译器无法根据变量的使用来判断类型时，将用 any 类型代替 Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /*启用严格null检查 Enable strict null checks. */ // "strictFunctionTypes": true, /*启用严格的function类型检查 Enable strict checking of function types. */ // "strictBindCallApply": true, /*启用严格的bind,call 和apply的严格检查 Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /*启用严格检查类实例化的属性 Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /*当 this 表达式值为 any 类型的时候，生成一个错误 Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* 以严格模式检查每个模块，并在每个文件里加入 'use strict' Parse in strict mode and emit "use strict" for each source file. */ /*额外的检查 Additional Checks */ // "noUnusedLocals": true, /*报告没有使用的变量错误的地方 Report errors on unused locals. */ // "noUnusedParameters": true, /*报告参数没有使用 Report errors on unused parameters. */ // "noImplicitReturns": true, /*报告函数返回值不匹配的错误 Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /*报告switch中的case的错误 Report errors for fallthrough cases in switch statement. */ // "noUncheckedIndexedAccess": true, /*报告值为undefined的错误 Include 'undefined' in index signature results */ /*模块解析配置 Module Resolution Options */ // "moduleResolution": "node", /*解析模式使用的策略 Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /*用于解析非绝对模块名称的基本目录 Base directory to resolve non-absolute module names. */ // "paths": {}, /*模块名到基于 baseUrl 的路径映射的列表 A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /*根文件夹列表，其组合内容表示项目运行时的结构内容 List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /*包含类型定义的文件夹列表 List of folders to include type definitions from. */ // "types": [], /*编译类型声明文件 Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /*允许从没有默认导出的模块中进行默认导入。这并不影响代码执行，只是类型检查 Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true, /*通过为所有导入创建名称空间对象，实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports” Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /*不适用绝对路径 Do not resolve the real path of symlinks. */ // "allowUmdGlobalAccess": true, /*允许从模块中访问UMD全局变量 Allow accessing UMD globals from modules. */ /*sourcemap的配置选项 Source Map Options */ // "sourceRoot": "", /*指定TypeScript源文件的路径，以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到sourceMap里。 Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /*指定调试器应该找到映射文件而不是生成文件的位置 Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件 Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /*将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性 Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /*实验性的配置 Experimental Options */ // "experimentalDecorators": true, /*启用ES7的装饰器 Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /*装饰器提供元数据的支持 Enables experimental support for emitting type metadata for decorators. */ /*高级配置 Advanced Options */ "skipLibCheck": true, /*跳过声明文件的类型检查 Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /*禁止对同一文件使用大小写不一致的引用 Disallow inconsistently-cased references to the same file. */ } }
注意： 使用配置文件后， npx tsc index 这里不能使用后缀名，如果使用后缀名，会自动忽略配置文件的ts配置
其它库支持类型检查
我们在写代码的时候，我们希望我们的代码接受类型检查，也希望我们引用第三方的库也是使用类型检查，例如我们在node 环境中，那么请按照 @types/node 这个库 npm install @types/node -D
@types 是一个ts的官方库，里面包含了很多对js类型的描述的库，如果我们想要在ts中是使用jquery， 那么我们可以安装 @types/jquery 这个库，对jquery的代码进行类型检查
我们编译好文件后，如果要运行文件，我们需要使用 node ./dist/index.js 每一次都需要重启和修改一点都要重新启动才能看到效果
使用第三方库来方便开发
- npm install ts-node -D 代码的编译在内存中，不输出，直接运行代码，这里会提供一个ts-node 的指令来运行代码, 细心的发现我这里也是局部安装，所以使用方法需要 npx ts-node index.ts 来进行编译运行
- npm install nodemon -D 这个库是用于热加载代码的， 默认是全局加载代码 ，可以使用nodeman.json 这个配置文件，或者使用命令。 这里使用命令 npx nodemon --watch src -e ts --exec npx ts-node src/index.ts 这句话的意思是 使用nodemon 监听 src 里面的带 .ts 的文件变化，变化后执行 ts-node src/index.ts 来编译ts文件，或者在package.json 文件里面加入
"scripts": { "dev": "nodemon --watch src -e ts --exec ts-node src/index.ts", "build": "rd /s /q dist & tsc" // 这行命令是指，编译，先删除dist 文件夹，然后在编译，这个 rd /s /q 是指windows 下面删除文件夹的命令，mac 的请自行百度 },
后面只需要 npm run dev 就可以启动文件
