学习typeScript的最初教程，往往是安装typeScript。官网和许多人的博客在这块都是使用的全局安装，即-g的安装方式。但是我个人比较喜欢封闭的项目环境，尽可能避免全局安装插件。

以下会提供我个人在封闭项目中引入typeScript的方法。

注：以下终端命令都在项目根路径下操作。

初始化项目

首先初始化项目，创建package.json。

npm init -y

安装typeScript

给你的项目安装typeScript，由于只在项目编译时使用，所以我们将插件安装在开发环境里。

npm i typescript -D

初始化typeScript

初始化typeScript，创建tsconfig.json。

tsc --init

tsconfig.json

{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* 指定ECMAScript目标版本 "ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"。 */ "module": "commonjs", /* 指定生成哪个模块系统代码： "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。 ► 只有 "AMD"和 "System"能和 --outFile一起使用。 ► "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。 */ // "lib": [], /* 编译过程中需要引入的库文件的列表。 可能的值为： ► ES5 ► ES6 ► ES2015 ► ES7 ► ES2016 ► ES2017 ► ES2018 ► ESNext ► DOM ► DOM.Iterable ► WebWorker ► ScriptHost ► ES2015.Core ► ES2015.Collection ► ES2015.Generator ► ES2015.Iterable ► ES2015.Promise ► ES2015.Proxy ► ES2015.Reflect ► ES2015.Symbol ► ES2015.Symbol.WellKnown ► ES2016.Array.Include ► ES2017.object ► ES2017.Intl ► ES2017.SharedMemory ► ES2017.String ► ES2017.TypedArrays ► ES2018.Intl ► ES2018.Promise ► ES2018.RegExp ► ESNext.AsyncIterable ► ESNext.Array ► ESNext.Intl ► ESNext.Symbol 注意：如果--lib没有指定默认注入的库的列表。默认注入的库为： ► 针对于--target ES5：DOM，ES5，ScriptHost ► 针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost */ // "allowJs": true, /* 允许编译javascript文件。 */ // "checkJs": true, /* 在 .js文件中报告错误。与 --allowJs配合使用。 */ // "jsx": "preserve", /* 在 .tsx文件里支持JSX： "React"或 "Preserve"。 */ // "declaration": true, /* 生成相应的 .d.ts文件。 */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* 生成相应的 .map文件。 */ // "outFile": "./", /* 将输出文件合并为一个文件。合并的顺序是根据传入编译器的文件顺序和 ///<reference``>和 import的文件顺序决定的。查看输出文件顺序文件了解详情。 */ // "outDir": "./", /* 重定向输出目录。 */ // "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, /* 删除所有注释，除了以 /!*开头的版权信息。 */ // "noEmit": true, /* 不生成输出文件。 */ // "importHelpers": true, /* 从 tslib 导入辅助工具函数（比如 __extends， __rest等） */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /* 将每个文件作为单独的模块（与“ts.transpileModule”类似）。 */ /* Strict Type-Checking Options */ "strict": true, /* 启用所有严格类型检查选项。 启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。 */ // "noImplicitAny": true, /* 在表达式和声明上有隐含的 any类型时报错。 */ // "strictNullChecks": true, /* 在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void）。 */ // "strictFunctionTypes": true, /* 函数参数双向协变检查。 */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* 确保类的非undefined属性已经在构造函数里初始化。若要令此选项生效，需要同时启用--strictNullChecks。 */ // "noImplicitThis": true, /* 当 this表达式的值为 any类型的时候，生成一个错误。 */ // "alwaysStrict": true, /* 以严格模式解析并为每个源文件生成 "use strict"语句 */ /* Additional Checks */ // "noUnusedLocals": true, /* 若有未使用的局部变量则抛错。 */ // "noUnusedParameters": true, /* 若有未使用的参数则抛错。 */ // "noImplicitReturns": true, /* 不是函数的所有返回路径都有返回值时报错。 */ // "noFallthroughCasesInSwitch": true, /* 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿） */ /* Module Resolution Options */ // "moduleResolution": "node", /* 决定如何处理模块。或者是"Node"对于Node.js/io.js，或者是"Classic"（默认）。 */ // "baseUrl": "./", /* 解析非相对模块名的基准目录。 */ // "paths": {}, /* 模块名到基于 baseUrl的路径映射的列表。 */ // "rootDirs": [], /* 根（root）文件夹列表，表示运行时组合工程结构的内容。 */ // "typeRoots": [], /* 要包含的类型声明文件路径列表。 */ // "types": [], /* 要包含的类型声明文件名列表。 */ // "allowSyntheticDefaultImports": true, /* 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。 */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* 不把符号链接解析为其真实路径；将符号链接文件视为真正的文件。 */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ /* Source Map Options */ // "sourceRoot": "", /* 指定TypeScript源文件的路径，以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到 sourceMap里。 */ // "mapRoot": "", /* 为调试器指定指定sourcemap文件的路径，而不是使用生成时的路径。当 .map文件是在运行时指定的，并不同于 js文件的地址时使用这个标记。指定的路径会嵌入到 sourceMap里告诉调试器到哪里去找它们。 */ // "inlineSourceMap": true, /* 生成单个sourcemaps文件，而不是将每sourcemaps生成不同的文件。 */ // "inlineSources": true, /* 将代码与sourcemaps生成到一个文件中，要求同时设置了 --inlineSourceMap或 --sourceMap属性。 */ /* Experimental Options */ // "experimentalDecorators": true, /* 启用实验性的ES装饰器。 */ // "emitDecoratorMetadata": true, /* 给源码里的装饰器声明加上设计类型元数据。 */ /* Advanced Options */ "skipLibCheck": true, /* 忽略所有的声明文件（ *.d.ts）的类型检查。 */ "forceConsistentCasingInFileNames": true /* 禁止对同一个文件的不一致的引用。 */ } }

更多配置项可参考官方配置文档。

编译项目

在package.json文件中配置你的typeScript，以编译项目文件。

{ "scripts": { "tsc": "tsc -w --listEmittedFiles --listFiles" // 监视文件改变，输出编译后的文件和编译文件列表 } }