下面是TypeScript的基本使用方式,
1.TypeScript的全局安装
首先进行全局安装Typescript(也可以局部安装,看个人喜好)。
npm install -g typescript
安装完成后可使用命令行工具tsc,可用来编译单个文件。
tsc helloworld.ts
需要注意的是,使用tsc编译单个文件时不会寻找项目下的tsconfig.json文件,而是使用默认配置,如果需要修改配置必须在在命令行中修改。
tsc helloworld.ts --allowJs --allowSyntheticDefaultImports
2.tsconfig.json的配置
tsconfig.json有许多配置项,要完全熟悉每一项不是个容易的事,当你在代码中使用了某些需要开启配置项的行为,TypeScript会提醒你去打开它,因此,只需要知道常用的几个就好了,其他的可以遇到问题的时候再去了解他的作用。
// 生成一个tsconfig.json初始文件
tsc --init
{
"compilerOptions": {
/* 基本选项 */
"incremental": true, /* 增量编译,第一次编译后会在项目下生成一个tsconfig.tsbuildinfo文件,以后编译可以提高速度*/
"target": "es5", /* 指定编译后生成的ECMAScript版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* 指定编译后生成哪种模块: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": [], /* 指定包含哪些库文件 */
"allowJs": true, /* 允许编译 JS 文件(js、jsx) */
"checkJs": true, /* 允许指出在 JS 文件中的报错信息,通常与 allowJs 一起使用 */
"jsx": "preserve", /* 指定jsx代码用于的开发环境:'preserve'、'react-native' 或 'react'*/
"declaration": true, /* 编译后生成(.d.ts)声明文件 */
"declarationMap": true, /* 为每个对应的“.d.ts”文件生成一个源映射。 */
"sourceMap": true, /* 生成相应的“.map”文件。 */
"outFile": "./ss.js", /* 当moudle 为 amd时,编译时会将多个 ts 文件合并打包成一个 js 文件 */
"outDir": "./dist", /* 指定输出目录 */
"rootDir": "./src", /* 指定编译根目录 */
"composite": true, /* 启用项目编译 */
"tsBuildInfoFile": "./", /* 指定增量文件存储位置 */
"removeComments": true, /* 不在输出文件中产生注释 */
"noEmit": true, /* 编译后不生成文件(只编译不生成) */
"importHelpers": true, /* Import emit helpers from 'tslib'. */
"downlevelIteration": true, /* 面向 ES5 和 ES3 时,将 for..of, spread and destructuring 降级 */
"isolatedModules": true, /* 将每个文件转换为一个单独的模块(类似于 'ts.transpileModule')。 */
/* 严格类型检查选项 */
"strict": true, /* 开启所有的严格类型选项,此时下面的选项全部开启 */
"noImplicitAny": true, /* 不允许隐式的 any 类型 */
"strictNullChecks": true, /* 严格空检查,不允许把 null、undefined 赋值给其它类型变量 */
"strictFunctionTypes": true, /* 启用函数类型的严格检查。 */
"strictBindCallApply": true, /* 在函数上启用严格的 'bind'、'call' 和 'apply' 方法。 */
"strictPropertyInitialization": true, /* 类的实例属性必须初始化 */
"noImplicitThis": true, /* 不允许 this 有隐式的 any 类型 */
"alwaysStrict": true, /* 在代码中注入 "use strict" */
/* 附加检查 */
"noUnusedLocals": true, /* 报告只声明,未使用的局部变量 */
"noUnusedParameters": true, /* 报告未使用的函数参数 */
"noImplicitReturns": true, /* 函数中每个分支都要有返回值,如 if else 中都要有返回值 */
"noFallthroughCasesInSwitch": true, /* 防止 switch 语句贯穿(如果某一个分支没有 break,下面的分支将会依次执行) */
/* 模块解析选项 */
"moduleResolution": "node", /* 指定模块解析策略:'node' (Node.js) 或 'classic' */
"baseUrl": "./", /* 解析非相对模块名称的基本目录 */
"paths": {}, /* 路径映射,相当于别名,相对于 baseUrl. */
"rootDirs": [], /* 将多个编译目录放在一个虚拟目录下,用于运行时 */
"typeRoots": [], /* 声明文件目录,默认 node_modules/@types */
"types": [], /* 指定需要加载的声明文件的包,如果指定了某一个包,就会只加载这个包的声明文件 */
"allowSyntheticDefaultImports": true, /* 打开sModuleInterop后,默认会打开 */
"esModuleInterop": true, /* 如果一个模块用 export = 导出, 既可以用 import from 导入,也可以用 import = 导入 */
"preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
"allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* 源映射选项 */
"sourceRoot": "", /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置 */
"mapRoot": "", /* 指定调试器应该定位map文件而不是生成文件的位置 */
"inlineSourceMap": true, /* 指定是否将map文件的内容和js文件编译在同一个js文件中 */
"inlineSources": true, /* 在单个文件中与源映射一起发出源;需要设置“--inlineSourceMap”或“--sourceMap” */
/* 实验性选项 */
"experimentalDecorators": true, /* 指定是否启用实验性的装饰器特性 */
"emitDecoratorMetadata": true, /* 用于指定是否为装饰器提供元数据支持 */
/* 高级选项 */
"skipLibCheck": true, /*跳过声明文件的类型检查 */
"forceConsistentCasingInFileNames": true /* 禁止对同一文件的大小写不一致的引用 */
}
}