什么是打字稿中的打字

Posted 2023-03-07

【中文标题】什么是打字稿中的打字

【英文标题】：What are Typings in Typescript

【发布时间】：2017-05-25 05:41:40

【问题描述】：

我是 Angular2 的新手，到目前为止我很喜欢它，但有一个问题：打字。我不知道如何使用它们以及它们到底是什么。有些地方说要使用打字，有些地方说要使用 npm 来安装定义。

我很困惑！！

【问题讨论】：

我已将问题一分为二...希望这样更有意义？

您需要安装typings。请关注这里：angular.io/docs/ts/latest/guide/typescript-configuration.html

@candidJ 安装 Typings 后我该怎么办？我还需要写其他代码吗？

【参考方案1】：

我将尝试用简单的例子来解释它。 如果您在 Angular 或 typescript 项目中使用第三方库（如 jQuery）

在Angular项目中可以直接引用jquery文件（angular.json文件），通过声明$或者jQuery来编写代码，如下图

如下图

declare var $: any;
ngOnInit() 
   $(document).ready(function() 
     alert('I am Called From jQuery');
   );

代码将起作用。但问题是打字稿只是在编译时进行类型检查和发现代码中的错误。

由于 typescript 对 jquery 库一无所知，它无法执行静态类型检查。下面的代码编译没有任何错误

ngOnInit() 
   $(document).ready(function() 
     $('#my-button').click(1);
 );

我将错误的参数传递给 jquery 的 click 函数，上面的代码将编译，并且在运行时，每当我们点击按钮元素时，它都会抛出错误。

这就是打字出现的地方。但是，如果您有 jquery 插件的类型定义，则只能在编译时捕获此类错误。

从节点包中安装 jquery 类型并在代码中引用它

npm install --save jquery
npm install --save @types/jquery

并在代码中导入jquery对象如下图

import * as $ from 'jquery';

现在上面的代码无法编译并抛出错误提示

Argument of type ‘1’ is not assignable to parameter of type ‘false | EventHandlerBase<HTMLElement, ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>>’

您可以在How To Install And Use JQuery In Angular Projects阅读更多内容

【参考方案2】：

javascript 是无类型的，这意味着我们可以无限制地传递和使用数据、对象和函数。我们可以编写代码来调用对象上不存在的方法，或者引用我们没有的变量。当您编写代码时，这些错误很难发现，并且可能导致代码不稳定和错误。对代码进行大的更改可能会变得困难且有风险，因为您不会立即看到某些更改是否与其他地方的其余代码冲突。

TypeScript 主要是在 JavaScript 中添加types。这意味着 TypeScript 要求您准确描述对象和数据的格式。当您这样做时，这意味着编译器可以调查您的代码并发现错误。它可以看出您正在尝试使用错误类型的参数调用函数，或引用在当前范围内不可访问的变量。

当你自己编写 TypeScript 时，这种对代码的正式描述是代码本身的一部分。

但是，当您使用 jQuery 或 moment.js 等外部库时，该代码中没有类型的信息。因此，为了将它与 TypeScript 一起使用，您还必须获取描述该代码类型的文件。这些是类型声明文件，通常带有文件扩展名.d.ts。幸运的是，人们已经为大多数常见的 javascript 库编写了这些类型的类型声明文件。

Typings 只是安装这些文件的工具。现在最好的做法是just use npm。

当您安装了这些文件后，基本上只意味着下载它们并将它们放入您的项目中，TypeScript 编译器将理解*该外部代码并且您将能够使用这些库。否则你只会到处出错。

_{* 根据您设置和配置项目的方式，您可能必须配置 typescript 以专门查找这些文件，或者它可能在您没有任何配置的情况下工作。}

【讨论】：

这是我一整天看到的最好的答案！！可惜我还不能投票。

@Alfy 很高兴能帮到你:)

任何新手都能理解的最佳解释！谢谢

我认为你的意思是动态类型而不是非类型，但仍然是一个很好的答案（并且赞成）。

@CoffeeTableEspresso 是否将某些语言称为动态类型或非类型存在很多争论。我会在这里考虑我选择的术语，也许我会改变它或添加额外的解释，谢谢！

【参考方案3】：

什么是打字？

简而言之，TypeScript 为 JavaScript 添加了静态类型。由于 JavaScript 本身并没有定义这样的类型定义，因此必须通过额外的机制将它们编写并包含在 TypeScript 编译过程中。换句话说，一个 JavaScript 库可以定义一个函数：

export function createPerson(name, age, initScore)  ...   

但是在 TypeScript 的静态类型环境中，开发人员拥有这样的东西会更有用：

interface Person 
    name: string,
    age: number,
    score: number


export function createPerson(name: string, age: number, initScore?: number): Person;

类型声明，通常称为typings、类型定义或只是types，其目的是填充在这些实现细节中，因此即使跨库也能识别 API 滥用。它们通常驻留在扩展名为.d.ts 的文件中，并且可以使用编译器从.ts 文件构建。然而，当程序不是用 TypeScript 编写时，这些声明通常是手动编写的。

---

话虽如此，您的困惑是有道理的：随着时间的推移，安装和管理 TypeScript 声明的方法不止一种。然而，现在有一个官方（因此推荐）安装和使用声明文件的方法，它被记录在here：

在 TypeScript 2.0 中，使用声明文件、获取、使用和查找它们变得非常容易。此页面详细说明了如何完成所有三个操作

[...]

在 TypeScript 2.0 及更高版本中获取类型声明不需要除 npm 之外的任何工具。

例如，检索 Angular 的声明就像在项目中安装此依赖项一样简单：

npm install --save @types/angular 

@types 命名空间中的包将被编译器自动考虑用于检索类型声明。此外，如果这些声明已经嵌入到 npm 包中，则除了安装该包外，您无需执行任何其他操作（此类包的示例是 redux）。有关更多信息，请参阅tsconfig.json 上的文档。还有一整节是关于authoring your own declaration files，推荐给所有希望在自己的库中添加类型声明的开发人员阅读。

【讨论】：

感谢@E_net4。我已经浏览了文档，但我仍然有些困惑。使用上面的示例，我可以对任何库做同样的事情并获得完整的定义吗？

@Alfy 是的，只要 TS 定义可用。您可以使用此网络应用程序搜索已发布的声明：aka.ms/types 如果不可用，您可能需要自己滚动。

"简而言之，TypeScript 在 JavaScript 中添加了静态类型。由于 JavaScript 本身并没有定义这样的类型定义，因此必须通过额外的机制编写并包含在 TypeScript 编译过程中。换句话说，一个 JavaScript库可以定义一个函数”这意味着很多要理解..

【参考方案4】：

我只在 ASP.NET（经典）项目中使用过 TypeScript，所以我无法告诉您执行此操作的典型方法是什么。但是有几个有些不正统的选择：

自己查找 *.d.ts 文件，然后将它们复制到您的项目中的某个位置。不过，它们不会与您的库一起自动更新。 声明库为您提供的任何内容。例如，如果您还没有安装 JQuery 类型，您可以为 JQuery 执行此操作：declare var $: any;

【讨论】：

我是在组件文件中声明还是创建一个全新的文件

我认为这取决于你。