公众号前言之前一直在用的Vue技术栈。我在大型无代码平台上的商业项目中使用了TypeScript。在创建了一个React+TS的项目后，我深刻体会到用TypeScript写业务代码真的很酷。之前在Vue项目中没想到TS这么好用。JavaScript代码只能在运行时（runtime）发现错误。言下之意就是运行项目，在浏览器中查看效果或者在控制台报错，然后查找错误。TypeScript可以在编写代码的过程中发现错误，而无需等到运行时。.吐槽了一番，直入正题。接下来我们来讲解一下如何搭建一个学习TypeScript的开发环境TypeScript中文官方地址：https://www.typescriptlang.or...Playground微软也提供了在线开发TypeScript环境。学习和测试都非常方便。对于刚接触TypeScript的初学者来说是一个不错的选择。他们可以先关注语法，暂时不用关心如何搭建TypeScript的编译和运行环境。地址：https://www.typescriptlang.or...还有一个好处。当你在线开发TypeScript环境写的代码遇到问题，你可以直接把url给别人，他就可以看到你输入的代码，帮你发现问题。例如：https://www.typescriptlang.or...打开上面的链接，可以在左边的编辑区看到输入的内容，和上图的内容是一致的。TypeScript编辑环境接下来我将介绍如何为项目添加支持TypeScript的编辑环境。1.创建项目并初始化package.json#创建文件夹mkdirlearn-ts#进入文件夹cdlearn-ts#初始化项目npminit-y#创建src文件夹并在src文件夹下添加index.tsmkdirsrctouchsrc/index.ts2。安装所需的依赖项npminstalltypescript--save-dev并执行tsc以运行TypeScript编译器。npxtsc看一下tsc命令的用法：参数很多，我们只列出其中的一部分：语法：tsc[options][file...]例子：tschello.tstsc--outFilefile.jsfile.tstsc@args.txttsc--buildtsconfig.jsonOptions:-w,--watch监控输入文件变化--prettyseterrorandmessagestyles--all显示所有编译选项-v,--version打印版本--initcreatetsconfig.jsonFile-b,--build-d,--declaration创建声明文件.d.ts........--allowJs允许js文件参与编译3.创建tsconfig.json文件如果在一个目录下存在一个tsconfig.json文件，那么就说明这个目录是TypeScript项目的根目录。用于编译该项目的根文件和编译选项在tsconfig.json文件中指定。可以通过files属性指定要编译的文件来运行命令，创建一个tsconfig.json文件和默认配置npxtsc--init执行上面的命令后，会在根目录下创建一个tsconfig.json文件.文件中有很多默认配置。下面我们展示了一个带有详细编译选项的示例文件。您可以查看此链接：https://www.typescriptlang.or...tsconfig.json示例文件：{"compilerOptions":{"module":"system","noImplicitAny":true,"removeComments":true,"preserveConstEnums":true,"outFile":"../../built/local/tsc.js","sourceMap":true,"declaration":true,//创建声明文件},"files":["core.ts","sys.ts"]}4.使用"include"和"exclude"属性node_module不需要编译，只需要编译文件夹中的src文件，所以我们需要修改tsconfig.json文件{“compilerOptions”:{“module”:“system”,“noImplicitAny”:true,“removeComments”:true,“preserveConstEnums”:true,“outFile”:“../../built/local/tsc.js","sourceMap":true,"declaration":true,//创建声明文件"declarationMap":true,"inlineSourceMap":true,"inlineSources":true,},"include":["src/**/*"],"exclude":["node_modules","**/*.spec.ts"]}include:见Compiledfilesexclude:Excludefiles5.details"compilerOptions"可以忽略，编译器会使用默认值。有关编译器选项的完整列表，请参见此处。“include”和“exclude”属性指定了一个文件全局匹配模式列表。支持的glob通配符是：*匹配0个或多个字符（不包括目录分隔符）？匹配任何字符（不包括目录分隔符）**/如果glob模式的一部分仅包含*或.*，则递归匹配任何子目录，则仅包括支持的文件扩展名类型（例如默认的.ts、.tsx和.d。ts，还有.js和.jsx（如果allowJs设置为true）。如果“files”和“include”均未指定，则编译器默认包含当前目录和子目录中的所有TypeScript文件（.ts、.d.ts和.tsx），不包括“exclude”中指定的文件。如果allowJs设置为true，则还包含JS文件（.js和.jsx）。如果指定了“files”或“include”，编译器会将它们一起包含。使用“outDir”指定的目录中的文件将始终被编译器排除，除非您明确地将它们包含在“files”中（即使此时使用exclude指定）。使用命令行界面#根据项目根目录下的tsconfig.json编译ts文件tsc#指定具体要编译的文件，比如下面的例子：只编译index.ts文件tscindex.ts#编译src下的所有.ts文件tscsrc/*.ts#指定tsconfig.jsontsc--projecttsconfig.production.json#生成.d.ts文件和index.js文件tscindex.js--declaration--emitDeclarationOnly#App.ts和util.ts的内容被编译并合并到index.js文件中tscapp.tsutil.ts--targetesnext--outfileindex.js#tsc设置一个watch参数来监听文件内容变化，实时进行类型检测和代码翻译tscindex.ts--strict--alwaysStrictfalse--watchdemo在src/index.ts中添加如下内容interfaceLabeledValue{label:string;}functionprintLabel(labeledObj:LabeledValue){console.log(labeledObj.label);}letmyObj={label:"Size10Object"};printLabel(myObj);在项目和目录下运行编译命令，npxtsc结果会根据目录的tsconfig.json进行编译："usestrict";functionprintLabel(labeledObj){console.log(labeledObj.label);}varmyObj={label:"Size10Object"};printLabel(myObj);也可以在package.json中添加脚本，一直监听"scripts":{"version":"tsc-v","dev":"tsc--buildtsconfig.json--watch"}添加ts-node的上面的代码示例演示了TypeScript文件已经编译好了，但是编译后想直接运行怎么办？这时候就要用到ts-node了。你可以大致认为ts-node=tsc+nodetsc是一个将TS转JS的编译器。ts-node是将TS转换为JS并执行的执行环境。安装ts-nodenpmits-node-Dnpmi@types/node-D用法#以`node`+`tsc`的形式执行脚本。ts-nodesrc/index.ts#启动TypeScriptREPL.ts-node#使用TypeScript.ts-node-e'console.log("Hello,world!")'#执行并打印代码，使用TypeScript.ts-node-p-e'"Hello,world!''#管道使用TypeScript.echo'console.log("Hello,world!")'|执行的脚本ts-node#相当于ts-node--transpile-onlyts-node-transpile-onlyscript.ts#相当于ts-node--cwd-modets-node-cwdscript.tsOthers如果你想了解更多ts-node的用法，可以查看官方文档：https://typestrong.org/ts-node/更多文章请关注公众号：前端学会
