打字稿中的打字是什么

Question

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

我很困惑！！

Answer 1

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

自己找到 *.d.ts 文件，然后将它们复制到项目的某个地方。不过，它们不会随您的库一起自动更新。
声明图书馆给你的任何东西。例如，如果您还没有安装 JQuery 类型，您可以为 JQuery 执行此操作：declare var $: any;

Answer 2

What are typings?

简而言之，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;

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

话虽如此，您的困惑在某种程度上是有道理的：随着时间的推移，安装和管理 TypeScript 声明的方法不止一种。但是现在，有一种官方的（因此推荐的）安装和使用声明文件的方法，并且记录在案 here:

In TypeScript 2.0, it has become significantly easier to consume declaration files, in acquiring, using, and finding them. This page details exactly how to do all three

[...]

Getting type declarations in TypeScript 2.0 and above requires no tools apart from npm.

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

npm install --save @types/angular

编译器将自动考虑 @types 命名空间中的包以检索类型声明。此外，如果这些声明已经嵌入到 npm 包中，则除了安装该包之外，您无需执行任何其他操作（此类包的一个示例是 redux). For more information, see the docs on tsconfig.json. There is also a whole section about authoring your own declaration files，推荐所有希望阅读的开发人员阅读将类型声明添加到他们自己的库中。

Answer 3

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

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

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

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

Typings was just a tool to install those files. It is now best practice to just use npm.

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

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

Answer 4

我会尝试用简单的例子来解释它。如果您正在使用第三方库，例如 Angular 中的 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 的单击函数，上面的代码将编译，并且在运行时，每当我们单击按钮元素时，它都会抛出错误。

这就是打字的用武之地。但是如果你有 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

阅读更多内容

打字稿中的打字是什么

What are Typings in Typescript

typescript

typescript-typings