提问者:小点点

什么是打字脚本


我对Angular2还不熟悉,到目前为止我很喜欢,但有一个问题:打字。我不知道如何使用它们以及它们到底是什么。有些地方说使用打字,其他地方说使用npm来安装定义。

我很困惑!!


共3个答案

匿名用户

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

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

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

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

打字只是安装这些文件的工具。现在只使用npm是最佳实践。

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

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

匿名用户

什么是打字?

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

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

话虽如此,您的困惑是有道理的:随着时间的推移,安装和管理TypeScript声明的方法不止一种。然而,现在有一种官方的(因此也是推荐的)安装和使用声明文件的方法,它记录在这里:

在TypeScript 2.0中,在获取、使用和查找声明文件时,使用声明文件变得非常容易。本页详细介绍了如何完成这三个步骤

[...]

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

例如,检索Angular的声明与在项目中安装此依赖项一样简单:

npm install --save @types/angular 

编译器将自动考虑@types命名空间中的包来检索类型声明。此外,如果这些声明已经嵌入到npm包中,那么除了安装该包(redux就是这样一个包的示例)之外,您不必做任何其他事情。有关更多信息,请参阅tsconfig上的文档。json。还有一整节是关于编写自己的声明文件的,建议所有希望向自己的库中添加类型声明的开发人员阅读。

匿名用户

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

您可以在angular项目中直接引用jquery文件(angular.json文件),并通过声明$or jquery编写代码,如下所示

如下图所示

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

代码将起作用。但问题是typescript只涉及类型检查和在编译时发现代码中的错误。

由于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>>’

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