0

0

TypeScript 简单介绍

WBOY

WBOY

发布时间:2024-07-12 08:19:14

|

890人浏览过

|

来源于dev.to

转载

对于许多通过 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() 的代码都会在运行时失败,因此它会在编译时抛出错误,告诉您您的程序无效。

新秀B2C商城系统
新秀B2C商城系统

新秀B2C商城系统是一款简洁易用PHP商城系统。可免费下载使用,可用于商业用途,没有时效限制,除版权标识外,所有代码都允许修改。后台功能简介:1、商城设置:基本信息,配送方式,配送范围,支付方式,财务管理;2、商品管理:商品列表,添加商品,商品分类,商品品牌,商品属性;3、订单管理:订单列表,缺货登记;4、用户互动:用户管理,留言管理,评论管理,网站公告,在线客服,用户协议;5、文章管理:文章列表

下载

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

TypeScript 简单介绍

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 上告诉我!

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

541

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

391

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go 教程
Go 教程

共32课时 | 3.1万人学习

Laravel---API接口
Laravel---API接口

共7课时 | 0.6万人学习

Golang云原生架构师课程
Golang云原生架构师课程

共49课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号