什么是打字稿中的打字

时间:2017-01-10 16:39:51

标签: typescript typescript-typings

我是Angular2的新手,到目前为止我很享受它,但有一个问题:打字。我无法弄清楚如何使用它们以及它们到底是什么。有些地方说使用打字,其他人说使用npm来安装定义。

我很困惑!

4 个答案:

答案 0 :(得分:95)

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

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

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

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

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

当您安装这些文件(基本上只是意味着下载它们并将它们放入项目中)时,TypeScript编译器将理解*外部代码并且您将能够使用这些库。否则你到处都会遇到错误。

*根据您设置项目的方式并对其进行配置,您可能必须配置typescript以专门查找这些文件,或者它可能只在您没有任何配置的情况下工作。 < / p>

答案 1 :(得分:17)

  

什么是打字?

简而言之,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 类型定义或只是类型,是填写在这些细节上实现,从而识别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的整个部分,对于希望将类型声明添加到自己的库中的所有开发人员来说,这是一个推荐读物。

答案 2 :(得分:0)

我在ASP.NET(经典)项目中只使用过TypeScript,所以我不能告诉你这样做的典型方法是什么。但是有一些非正统的选择:

  • 自己查找* .d.ts文件,然后将它们复制到您的项目中。但是,它们不会随您的库一起自动更新。
  • 声明图书馆为您提供的任何内容。例如,如果您还没有安装JQuery类型,则可以为JQuery执行此操作:declare var $: any;

答案 3 :(得分:0)

我将尝试通过简单的示例进行解释。 如果您正在Angular或Typescript项目中使用jQuery之类的第三方库

可以直接参考在角项目的jquery文件(angular.json文件),并通过声明$或jQuery的写的代码如下所示

如下所示

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

代码将工作。但问题是打字稿是所有类型检查,仅在编译时发现代码中的错误。

由于打字稿不知道jQuery库任何它不能执行静态类型检查。下面的代码编译没有任何错误

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

我将错误的参数传递给jquery的click函数,并且上面的代码将编译,并且在运行时每当我们单击button元素时,它将引发错误。

那其中分型进入图片。但是,如果您对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

阅读更多内容