【.com快译】不可否认，TypeScript凭借Intellisense、静态分析（又名“类型检查”）和内联文档等特性在JavaScript社区中获得了普及。这些功能虽然不是TypeScript独有的，但可以通过以下方式提高开发团队的工作效率并提高代码质量：通过实时、自动完成的代码建议实现更快的代码编写。查找代码中的拼写错误并提出建议。方便新成员熟悉代码库。促进具有不同编程能力的团队成员之间更好地协作。这可以防止自动部署损坏的代码。便于更方便、安全地修改和维护旧代码。可用于项目的自动文档化。下面，我将分别为大家介绍一下如何在不同的阶段深入浅出地开启TypeScript之旅。第一阶段：在JavaScript文件中启用TypeScript作为最流行的代码编辑器之一，VisualStudioCode被广泛用于编写JavaScript。不过VSCode也内置了TypeScript，可以提供上面提到的intellisense和自动建议等基础功能。例如，我们可以创建一个具有属性hello的对象世界。当我们尝试访问对象的属性时，VSCode会自动推荐hello。不仅如此，它还告诉我们该属性是字符串类型。这是一个非常基本但有用的类型检查。此外，这种类型检查甚至可以识别代码库中最轻微的错误。例如，如果我们不小心将一个数字传递给一个需要字符串类型的函数，我们就会被及时抓住。因此，要启用对JavaScript文件的完整类型检查，只需在要检查的JavaScript文件顶部添加注释//@ts-check即可。因此，对于前面的示例，如果我们尝试用数字类型覆盖对象的hello属性，那么我们将收到“Type'number'isnotassignabletotype'string'”警告。我们之前的函数之所以没有给出任何错误信息，是因为TypeScript不知道输入只能是字符串类型。为此，我们可以使用JSDoc向JavaScript添加各种类型。这里的JSDoc是一个通过使用注释向源代码添加上下文文档的系统。它可用于自动生成文档站点。TypeScript支持解析JSDoc的各种注解。对于前面的示例函数，我们可以告诉TypeScriptyell函数的第一个参数是str（字符串）类型，并且该函数是一个“字符串”。现在，当我们将一个数字传递给该函数时，我们会看到一个红色的波浪形警告，当我们将鼠标悬停在它上面时，我们会看到“‘number’类型的参数不可分配给‘string’类型的参数。”具体警告内容。您可以使用jsdoc.app学习如何使用JSDoc来记录各种内容。第2阶段：在您的JavaScript项目中启用TypeScript如果您正在处理一个大型JavaScript项目，将//@ts-check逐个添加到每个文件显然过于繁琐。幸运的是，VSCode提供了一些方法来自动执行此类工作。一种方法是将“CheckJS”配置设置为true。也就是说，我们在settings.json文件中设置了"javascript.implicitProjectConfig.checkJs":true。如果您想在项目级别为团队中相互协作的每个人启用此功能，您可以通过将tsconfig.json文件添加到项目的根目录来实现。有关tsconfig.json中各种配置选项的详细信息，请参阅https://www.staging-typescript.org/tsconfig。JSON{"compilerOptions":{"checkJs":true,/*Reporterrorsin.jsfiles.*/}}JSDocs支持很多内置类型，包括：string、number、boolean、array、promise、function等。但是，你可能需要创建一些超出基本定义的类型。例如，在定义“狗”对象类型时，它需要具有“品种”、“年龄”和可选的“名称”属性。然后，我们可以使用JSDoc来定义以下类型：PlainText/***@typedef{object}Dog*@property{string}breed*@property{number}age*@property{string}[name]*/ExceptIn除了通过语法定义对象，你还可以通过参考JSDoc文档了解更多关于TypeScript的泛型和实用类型。接下来，让我们看看如何使用types.js文件定义各种全局类型并将类型定义导入代码库。据此，我们把Dog类型定义放到这个文件中，通过引用相对路径在各个文件中导入使用这个类型：JSON/**@type{import('./types).Dog}*/constmyDog={breed:'Chiweenie',age:4,name:'Nugget'}如果Dog需要在同一个文件的多个地方使用这个类型，我们可以在本地重新定义类型来减少Input:JSON/**@typedef{import('./types).Dog}Dog*//**@type{Dog}*/constmyDog={breed:'Chiweenie',age:4,name:'Nugget'}你可能会发现，就目前而言，我们无法从types.js文件中导入任何内容，因为该文件不是JavaScript模块的一部分。编辑器会提示：“File'/path/to/types.js'isnotamodule”。为此，您可以使用CommonJS或ES模块语法导出文件。它的导出值并不重要，它甚至可以是未定义的。例如可以是以下任意一行：PlainText//Worksmodule.exports={}//Sureexports.merp=''//Whynot?exportdefault=null//Goforitexportconstthingamabob=undefined当然我们也可以从第三方导入-方库类型定义。虽然语法非常相似，但没有使用相对路径，而是通过名称引用库。例如，一个Vue.js(https://vuejs.org/)组件可以导入为：PlainText/**@type{import('vue').Component}*/当然，并不是所有的库都会提供类型定义。如果您的图书馆不提供类型定义，您可以搜索absolutetyped.org社区。VSCode有一个名为“自动类型获取”的功能，可以自动为您从社区中查找并安装类型定义。如果愿意，您还可以按照上述语法在TypeScript文件中编写类型定义，但文件扩展名为.ts。例如，如果我们想在TypeScript中定义上述全局类型，我们可以将文件名更改为“type.ts”，内容如下：TypeScriptexportinterfaceDog{breed:stringage:numbername?:string}第三阶段：将TypeScript集成到CI中/CDpipeline接下来，让我们讨论一些更复杂的问题。如果引入了错误，我们能否阻止代码部署？在我们开始之前，让我们假设：您熟悉使用命令行。您已经对NPM有了一些经验；如果没有，您可以通过链接了解NPM的基础知识--https://docs.npmjs.com/getting-started。您已经熟悉CI/CD（持续集成/持续交付）的概念。您已经有一个使用package.json文件初始化的NPM项目。我们的目标是在CI/CD环境中运行TypeScript编译器，以便系统可以判断代码是否存在类型错误。为此，我们需要为CI/CD环境提供一个TypeScript版本，以及一个要运行的脚本。首先，在终端中，我们需要在项目的同一文件夹中运行以下命令：npminstall--save-devTypeScript它将在本地安装TypeScript，并使用TypeScript包作为开发依赖，该包包含在包中。json文件更新。知道安装了哪些依赖项，TypeScript就可以在不依赖VSCode的情况下为项目服务。接下来，我们可以使用以下命令更新package.json文件的NPM脚本部分：)。在运行“npmrunts”命令之前，我们需要解决两个问题：1.TypeScript需要知道要运行的文件的路径。2.TypeScript仅适用于.ts文件，而我们只有.js文件。此时，你需要决定是继续写JavaScript文件，还是写TypeScript文件？就我而言，我认为将所有内容都保留在JavaScript中会更简单。毕竟TypeScript编译器可以很好的支持JavaScript文件，只是默认没有启用。要明确告诉TypeScript要检查哪些文件，我们需要使用allowJs配置以允许它在JavaScript文件上运行。假设我们的JavaScript写在./src/index.js文件中，那么我们将有以下选项：我们可以在package.json文件中间的NPM脚本中添加“--allowJs./src/index.js”.我们可以在每次调用npm脚本时添加上面的命令：“npmrunts----allowJs./src/index.js”。我们可以使用项目根目录下的tsconfig.json文件。由于我们已经有了一个tsconfig.json文件，所以我们可以直接使用它。同时，我们需要定义files数组，并设置allowJs和noEmit为true：JSON{"files":["./src/index.js"],"compilerOptions":{"checkJs":true,/*报告错误。jsfiles.*/"allowJs":true,/*Allowparsingjavascript.*/"noEmit":true,/*Donotemitoutputs.*/}}由于通常使用TypeScript来翻译代码，我们可以在这里将noEmit配置设置为true。这意味着它可以采用各种代码并以某种方式转换它们。例如，它可以接受一个TypeScript文件并返回一个JavaScript文件。运行“npmrunts”命令，我们没有看到任何配置错误，只是一些与代码相关的错误。例如，在前面的示例中，如果我们试图覆盖定义为字符串类型的属性，则会引发错误。此时，我们准备将这种类型检查集成到自动化部署过程中。我们需要确保部署过程顺利调用“npmrunts”命令。值得一提的是，TypeScript虽然是测试套件的重要补充，但绝不是自动化测试的替代品。尽管TypeScript可以在进入代码库时消除各种错误，但如果你的项目依赖于自动化部署，你也应该做好单元或集成测试。TypeScript可能会阻止您在应该使用数字的地方使用字符串，但它不会阻止您在只允许使用正数的情况下使用负数。因此，我建议您在系统中同时实现静态分析和自动化测试。我最喜欢的JavaScript项目测试工具是Jest。第4阶段：为开源库生成类型定义我们可以采用当前设置，让TypeScript为我们的项目创建类型定义文件，而无需任何其他繁琐的设置。一旦完成，我们就可以发布我们的库，以便用户拥有丰富的类型定义，这反过来有助于改善用户与库交互的体验。首先，我们需要对tsconfig.json文件进行更多修改。其中包括：删除“noEmit”设置（或将其设置为false），将“declaration”和“emitDeclarationOnly”设置为true，并为“outDir”提供路径。新文件内容如下所示：{"files":["./src/index.js"],"compilerOptions":{"checkJs":true,/*Reporterrorsin.jsfiles.*/"allowJs":true,/*Allowparsingjavascript.*/"declaration":true,/*Generates'.d.ts'file.*/"emitDeclarationOnly":true,/*Onlygenerate'.d.ts'.NoJS*/"outDir":"。/dist",/*Sendoutputtothisdirectory.*/}}您可以为“outDir”选择一个路径，为生成的类型定义文件提供一个位置。由于我们已经在使用JavaScript，因此无需额外的编译步骤即可将“emitDeclarationOnly”设置为true。在构建步骤中，您还可以使用Babel.js和Rollup.js。生成类型定义文件并将它们发送到/dist文件夹后，我们需要修改package.json文件，以便通知NPM各种文件的存在，并使使用该库的任何开发人员受益。为了在NPM发布内容，我们不仅需要关注“name”和“version”属性，还需要通过定义“types”（又名“打字”）属性文件。当然，如果你的类型定义文件（以.d.ts结尾）与你的代码在同一个文件夹中，则不需要上述设置。下面显示了package.json文件的示例内容：{"name":"nuggetisthebest","version":"1.0.0","types":"dist","scripts":{"ts":"tsc"},"devDependencies":{"typescript":"^4.1.3"}}请参阅NPM文档以了解有关如何将库发布到NPM的更多信息。禁止TypeScript在某些代码上运行有时您在CI/CD管道中使用TypeScript，但不希望它报告甚至阻止项目的部署。对此，我们可以使用以下选项来规避它：在某行禁用TypeScript：通过在任意行添加注释//@ts-ignore，可以禁用TypeScript对该行的分析。对整个文件禁用TypeScript：如果要对整个文件禁用TypeScript检查，可以在文件顶部添加注释//@ts-nocheck。在文件组或目录上禁用TypeScript：tsconfig.json文件有一个配置选项exclude，它允许您定义需要完全忽略的文件和目录。复杂类型最终，您可能需要非常复杂的类型定义，例如重载函数。您可以使用JSDoc中的各种TypeScript功能轻松地从TypeScript文件（.ts扩展名）导入相关类型。TypeScript/**@type{import('.types.ts').SomeType}*/constsomeType={}这意味着在任何复杂的情况下，我们都可以使用常规的TypeScript文件并将自定义类型导入JSDoc，而无需编写TypeScript整个项目。我们甚至不需要依赖TypeScript编译器。另外，我们也可以使用.d.ts文件来声明全局类型，详见--https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html。总之，虽然使用.ts文件更为常见，但出于以下原因，我会选择JSDocs方法：没有额外的构建步骤，只有纯JavaScript。可以将代码复制并粘贴到任何JavaScript项目中。没有添加新的语法，所以很容易上手。在您的代码中引入更少的“噪音”。开发速度更快，因为无需等待编译器。以下是您可以挖掘的更多JSDoc资源：《Working with JavaScript》，VSCode的《JSDoc Cheatsheet》，Devhints的《Type-Safe JavaScript with JSDoc》，RobertBiggs的《JavaScript Type Linting》，StefanBaumgartner的RobertBiggs《TypeScript without TypeScript – JSDoc superpowers》原标题：GetStartedWithTypeScripttheEasyWay,作者：奥斯汀·吉尔
