TypeScript 简要介绍-js教程

首页 2024-07-12 11:06:27

许多通过 javascript 编程的人很容易爱上它的低入门门槛和多功能性。 javascript 在浏览器中运行时,不需要复杂的编译或工具,可以用记事本逐行编写解释。 javascript 允许各种背景的开发人员使用它并开始编码,从而实现软件开发的民主化。但由于 javascript 宽容性,犯错和犯错的机会也增加了。

考虑这个 javascript 程序:

function add(a, b) {
  return a   b;
}

console.log(add(1, 2)); // 3

这是一个简单的加法程序,旨在将两个数字相加,然后返回结果。当我们使用非数字值调用此函数时,可能会发生意外和不可预测的事情。

我们只想用数字来调用这个函数 - 否则就没有意义了 - 事实上,如果你向它传递的值不是数字,你最终会得到奇怪而不可预测的结果:

console.log(add(1, "2")); // 12
console.log(add(1, true)); // 2
console.log(add(1, "hello")); // 1hello

javascript 这是一种动态语言。这意味着我们存储在变量中的数据类型可以在运行过程中更改。这可能会使用 javascript 在代码中捕获我们的意图变得复杂 - 我们的 add 函数只能用数字来调用。

我们在这里看到的情况称为强制类型 - javascript 自动将值从一种数据类型转换为另一种数据类型。它可以通过使用函数和操作符显式发生,也可以在 javascript 特定类型的值需要在上下文中隐藏。隐藏的类型有时会导致意想不到的结果,特别是在复杂的表达式中。以下是一些案例:

console.log(1   "2"); // "12" (number 1 is converted to string)
console.log("2"   1); // "21" (number 1 is converted to string)

console.log("5" - 1); // 4 (string "5" is converted to number)
console.log("5" * "2"); // 10 (both strings are converted to numbers)

console.log(0 == false); // true (number 0 is converted to false)
console.log(0 === false); // false (no type coercion, different types)

让人困惑吧?!

在 javascript 在代码库中,我们能做的最好的事情就是在我们的程序中添加一些保护检查,如果提供了无效值,这些检查就会出错。只有通过检查这些操作来保护我们免受错误的影响,我们经常在用户发现错误的同时在代码中引入错误。那么,我们如何保护自己免受这种常常令人困惑的困惑呢? javascript 行为的影响呢?

typescript 来救援

typescript 通过明确我们所期望的类型,我们可以帮助我们描述代码的意图。 typescript 是 javascript 它为语言添加了额外的类型信息。当您编译 typescript 当它可以在任何地方运行时,它将生成 javascript,因此,在不重建所有软件的情况下,您可以轻松地逐步使用它来改善您的开发体验。

类型允许您在代码运行前捕获代码中的错误。如果您不小心将错误类型的值分配给变量,则会出现编译错误。类型也使您的代码更容易阅读,因为您可以清楚地解释您所期望的值类型。我们也可以使用工具来使类型更强大。代码编辑器和 ide 内置工具可以帮助您在正确使用类型时自动完成编写代码。

如何添加类型注释?

您可以在 typescript 添加类型注释的方法是在函数参数名称后面添加冒号 (:),跟踪所需的类型。如果我们想扩展以前的添加示例,将其转换为 typescript,它将如下所示:

function add(x: number, y: number) {
  return x   y;
}

console.log(add(1, 2)); // 3

这是我们可以更改代码以使其更强大的最简单的方法。现在编译器知道,任何试图使用除两个数字以外的任何内容 add() 代码在运行过程中会失败,所以它会在编译过程中抛出错误,告诉你你的程序无效。

例如,如果我们试图调用数字和字符串 add,我们将收到编译错误:

typescript 足够智能,我们可以根据您提供的信息为您计算程序中的某些类型,我们称之为“类型推断”。如果我们使用上述示例并扩展它,添加我们可以添加的所有类型的注释,它看起来像这样:

function add(x: number, y: number): number {
  return x   y;
}

const result: number = add(1, 1);
console.log(result);

在这里,我们显式地添加函数参数,add 函数的返回类型和变量 result 的注释。作为一般规则,开发人员添加“足够”的类型注释来告诉他们 typescript 编译器发生了什么,让它推断其余的事情。在我们最初的例子中,通过方向 x 和 y 参数添加类型注释,typescript 编译器可以检查代码,并意识到我们只添加了两个数字,因此可以推断函数返回类型和变量结果类型。

即使你只用它 typescript 注释函数参数,您也会立即从代码中删除整个类别的错误。

将 typescript 转回 javascript

假如使用了你的项目 node 需要添加构造 typescript 包并运行 tsc 编译工具。我们写了一篇关于配置的文章 typescript 介绍编译器。

deno 内置了 typescript 所以如果你使用编译器, deno,不需要任何其他配置或工具。 deno 开箱即用地支持 typescript,当我们执行源代码时,它将自动执行 typescript 转换为 javascript。

您可以在客户端使用它 vite,我们最喜欢的工具是为您做类似的透明编译,所以如果您是前端开发人员,您仍然可以在代码中获得它 typescript 的乐趣。

接下来

在下一篇 deno bite 我们将在中间讨论 ts 代码所需的常见类型,以及如何使用它们来构建更复杂的类型,从而使您的代码清晰无误!

你希望我能介绍一下 typescript 任何主题?请评论,twitter 或 discord 上告诉我!

以上是TypeScriptt 详细介绍,更多请关注其他相关文章!


p

最新文章

  • 高效3389端口溢出检测,安全守护必备利器!

  • TypeScript 简要介绍-js教程

  • 破解限制,飞碟奥秘任你复制粘贴!

  • JavaScript 短路情况:三元运算符 ES6-js教程

  • css 盒子模型是网页设计和开发的基本概念,对于理解如何显示元素以及如何在网页上互动至关重要。本文将进一步介绍 css 盒子模型,解释其组件以及如何操作它们来创建视觉吸引力和响应布局。

    什么是 css 盒子模型?

    css 盒子模型是描述网页元素结构和呈现方式的概念框架。它由四个部分组成:内容、内边距、边框和边距。每个组件在元素的整体外观和间距中起着至关重要的作用。

    盒子模型的四个组成部分
    • 内容框:这是显示实际内容(如文本或图像)的框架的最内部。这个盒子的宽度和高度可以使用 width 和 height 控制属性。