在本文中,我们将了解什么是 Typescript? 它有什么作用? 安装过程。 阅读本文后,您会对什么是 Typescript 有所了解。
这将是一个完整的typescript系列,您将从字符串、布尔值等基本主题到类型别名、枚举、接口、泛型等更复杂的主题学习。
什么是TypeScript?
TypeScript 向 JavaScript 添加了额外的语法,以支持与你的编辑器更紧密的集成。 在编辑器中尽早发现错误。 TypeScript 代码转换为 JavaScript,它可以在 JavaScript 运行的任何地方运行:在浏览器中、在 Node.js 或 Deno 上,以及在您的应用程序中。 TypeScript 理解 JavaScript 并使用类型推断为您提供出色的工具,而无需额外的代码。
Typescript 是 JavaScript 的超集。
TypeScript 提供了各种其他功能,如接口、类型别名、抽象类、函数重载、元组、泛型等。
它允许您以一种方式编码,以便您的代码在运行时或生产中面临更少的错误。
如果您的项目很小,请不要使用typescript。 如果您使用typescript来使您的代码没有错误并且没有错误,则需要使用typescript的超能力。 这都是关于类型安全的。
> 2 + "2"
> '22' // ans
> null + 2
> 2
> undefined + 2
> NaN
不应该这样做,因为它会使问题变得更大。
typescript有什么作用?
它进行静态检查——无论何时您编写代码,IDE 都会不断监视代码以检查您是否犯了任何语法错误或其他但在 JS 中没有的错误。 不管你写什么,都可以。
但是当你在你的环境中运行代码时,它会抛出错误。 在编写代码时了解您所做的是否正确将非常有帮助。
在我们键入时分析代码。 而已。
开发流程如何运作?
您以 TS 格式编写所有代码,并将该代码转换为 JavaScript。 TS 是一个开发工具,你的项目仍然运行 JS,因为浏览器不理解 Typescript。
这就是为什么在安装 TS 包时将其作为开发依赖项下载的原因。
TS Playground:在这里你可以玩打字稿并检查它是如何转换的。
let car = {
module: "xyz",
color: "red",
};
// ❌ ERROR: Property 'price' does not exist on type '{ module: string; color: string; }'.
car.price;
正如上面的代码在示例中所示,我们试图获取对象中不存在的值,并且它在运行代码之前显示错误。
let num1 = 2;
let num2 = "2"
// 👇可以运行,但是不要这么做
let sum = num1 + num2; // "22"
上面的代码没有显示任何类型的错误,当您运行它时,它会显示我们不想要的结果 22。 这是允许的,但我们可以通过将每个变量定义为一个类型来绕过它。 我们将在本文后面查看。
安装typescript
您可以使用该项目的两种不同安装-
全局安装
在这里,您将 Typescript 安装为全局包。 您只需在终端窗口中运行以下命令即可做到这一点
npm install -g typescript
项目中的 TypeScript
当您为 React 或 Angular 等项目安装 TypeScript 时,无论您想要或不想要什么样的设置,都需要它们的 TypeScript 配置文件。 使用以下命令将typescript安装到您的项目中-
npm install typescript --save-dev
在这篇文章中,我解释了 Typescript 是什么、它是如何工作的以及如何将它安装到您的系统中。
这是一系列 Typescript,可帮助您从头开始学习 Typescript。 如果您喜欢这篇文章,请不要忘记给❤️和书签🏷️供以后使用,如果您有任何问题或反馈,请不要犹豫,将它们放在下面的评论中。 我会在下一篇中看到。