什么是 Typescript 中的打字

What are Typings in Typescript

提问by Ikiugu

I am new to Angular2 and I'm enjoying it so far but there is one problem: Typings. I can't figure out how to use them and what exactly they are. Some places say to use typings, others say to use npm to install definitions.

我是 Angular2 的新手，到目前为止我很享受它，但有一个问题：Typings。我无法弄清楚如何使用它们以及它们到底是什么。有些地方说要使用类型化，有些地方说要使用 npm 来安装定义。

I'm confused!!

我糊涂了！！

回答by Alex

JavaScript is untyped, meaning that we can pass around and use data, objects and functions with no constraints. We can write code that calls methods that don't exist on an object, or reference variables that we don't have. These kinds of mistakes can be hard to discover when you are writing code, and it can lead to unstable and buggy code. Doing big changes of your code can become difficult and risky as you don't immediately see if some changes conflicts with the rest of the code somewhere else.

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

TypeScript is mainly about adding typesto JavaScript. That means that TypeScript requires you to accurately describe the format of your objects and your data. When you do that, that means that the compiler can investigate your code and discover errors. It can see that you are trying to call a function with the wrong kinds of arguments, or reference a variable that is not accessible in the current scope.

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

When you write TypeScript yourself, this formal description of the code is part of the code itself.

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

However, when you use external libraries like jQuery or moment.js, there are no information of the types in that code. So in order to use it with TypeScript, you also have to get files that describe the types of that code. These are the type declaration files, most often with the file extension name .d.ts. Fortunately people have written those kinds of type declaration files for most common javascript libraries out there.

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

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

Typings只是安装这些文件的工具。现在最好只使用 npm。

When you have installed those files, which basically only means downloading them and placing them in your project, the TypeScript compiler will understand* that external code and you will be able to use those libraries. Otherwise you would only get errors everywhere.

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

_{* Depending on how you have set up your project and configured it, you might have to configure typescript to look for those files specifically, or it might just work without any configuration from your part.}

_{* 根据您设置和配置项目的方式，您可能需要配置打字稿来专门查找这些文件，或者它可能无需您进行任何配置即可工作。}

回答by E_net4 the Rustacean

What are typings?

什么是打字？

In short, TypeScript adds static typing to JavaScript. Since JavaScript alone does not define such type definitions, they must be written and included in the TypeScript compilation process through additional mechanisms. In other words, a JavaScript library may define a function:

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

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

But in the statically typed environment of TypeScript, it would be much more useful for the developer to have something like this:

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

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

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

The purpose of type declarations, often called typings, type definitionsor just types, is to fill in these details over implementations, thus identifying API misuses even across libraries. They usually reside in files with the .d.tsextension, and can be built from .tsfiles using the compiler. When programs were not written in TypeScript however, these declarations are usually written manually.

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

---

---

With that said, your confusion is somewhat justified: more than one approach to installing and managing TypeScript declarations were made over time. Right now however, there is an official (and therefore recommended) means of installing and using declaration files, and it's documented here:

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

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.

在 TypeScript 2.0 中，使用声明文件、获取、使用和查找它们变得更加容易。此页面详细说明了如何做到这三点

[...]

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

As an example, retrieving declarations for Angular is as simple as installing this dependency in your project:

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

npm install --save @types/angular 

Packages in the @typesnamespace will be automatically considered by the compiler for retrieving type declarations. Furthermore, if these declarations are already embedded in the npm package, you don't have to do anything else other than installing that package (an example of such a package is redux). For more information, see the docs on tsconfig.json. There is also a whole section about authoring your own declaration files, which is a recommended read to all developers wishing to add type declarations to their own libraries.

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

回答by Arun

I will try to explain it with simple example. If you are using third party libraries like jQuery in Angular or typescript projects

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

You can directly refer jquery file(angular.json file) in Angular projects and write the code by declaring $ or jQuery as shown below

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

as shown below

如下所示

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

The code will work. But the problem is typescript is all about type checking and discover errors in code at the time of compilation only.

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

As typescript does not know anything about jquery library it cannot perform static type checking. the below code compile without any errors

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

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

I am passing wrong parameter to click function of jquery and the above code will compile and at run time whenever we click on button element it will throw an error.

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

Thats where typings comes into picture. But if you have type definations for jquery plug in those kind of error can be caught at the time of compilation only.

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

Install jquery typings from node packages and refere it in code

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

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

And import jquery object in the code as shown below

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

import * as $ from 'jquery';

And now the above code wont compile and throws error saying

现在上面的代码不会编译并抛出错误说

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

You can read more at How To Install And Use JQuery In Angular Projects

您可以在如何在 Angular 项目中安装和使用 JQuery 中阅读更多内容

回答by libertyernie

I've only worked with TypeScript in an ASP.NET (classic) project, so I can't tell you what the typical way to do this is. But there are a couple of somewhat unorthodox options:

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

• Find the *.d.ts files yourself and just copy them into your project somewhere. They won't auto-update along with your libraries, though.
• Declare whatever the library gives you as any. For example, you could do this for JQuery, if you don't have JQuery typings installed yet: declare var $: any;

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