使用 TypeScript 添加到脚本

使用 typescript 添加到脚本

封面图片来源: Daria Kraplak

目录

简介TypeScript 的目标JavaScript 与 TypeScript 的比较总结

简介

在深入了解 TypeScript 之前,让我们先回顾一下 JavaScript!你可能不知道,JavaScript 是在 1995 年诞生的。

最初,它主要用于处理简单的网页内容。然而,自 1999 年以来,JavaScript 发展迅速,能够处理我们现在构建的复杂动态网页。它易于上手,因为它对数据类型非常灵活(稍后详细解释)。

但这种灵活性也带来了一些问题:JavaScript 的宽松类型检查可能会导致代码错误。这就是 TypeScript 的用武之地!

TypeScript 的目标

TypeScript 是 JavaScript 的超集。这意味着 TypeScript 并非一种全新的语言,而是对现有 JavaScript 代码的增强。它通过强化代码结构来帮助 JavaScript 开发者。具体来说,TypeScript 通过强制指定变量的数据类型来提高代码的可维护性和可靠性。这在测试阶段尤为有用,因为它能够在编译成 JavaScript 之前就发现潜在错误。

JavaScript 与 TypeScript 的比较

共同的数据类型:

字符串数字布尔值undefinednull

然而,它们对这些数据类型的处理方式有所不同。让我们来看看:

类型推断:

在 JavaScript 中,变量的数据类型可以在运行时改变。而 TypeScript 则不同,变量的数据类型要么由 TypeScript 推断,要么由开发者显式声明。如果无法推断或未声明类型,则默认为 any 类型。

// JavaScriptlet x = 6; // x 存储数字值x = "hello there"; // x 现在存储字符串值// 这在 JavaScript 中是有效的,因为它允许动态类型重新赋值// TypeScriptlet x = 6; // x 存储数字值// 下一行会报错:类型“string”不能赋值给类型“number”。x = "hello there";// 下面的重新赋值是有效的,因为值与推断或声明的类型匹配x = 8;// JavaScript 和 TypeScript 都一样// x 存储数字值,并且不允许在此处重新赋值const x = 20;// 报错:不能赋值给“x”,因为它是一个常量x = 25;

登录后复制

类型注释:

除了类型推断,我们还可以使用类型注释来显式声明 TypeScript 中变量的数据类型。方法是在变量名后添加冒号和类型 (:)。

// JavaScript// 不需要声明数据类型,直接赋值即可let color = 'purple';// JavaScript 允许这种重新赋值color = 'blue';// 即使值变为 10 也一样// TypeScript// 'color' 声明为 string 类型let color: string;// 声明并赋值let color: string = 'red';color = 'purple'; // 'purple' 是字符串,所以有效color = 'blue'; // 'blue' 是字符串,所以有效

登录后复制

类型形状:

TypeScript 中的“形状”指的是对象的结构和属性。JavaScript 对对象的属性检查比较宽松,允许在运行时改变对象的形状。而 TypeScript 则要求严格匹配对象的属性,这有助于防止运行时错误。

// JavaScript"Hello".length; // 结果:5"there".toUpperCase(); // 结果: "THERE"// TypeScript"Hello".length; // 结果:5"there".toUppercase();// 属性“toUppercase”不存在于类型“'there'”上。您是否想输入“toUpperCase”?

登录后复制

这只是 TypeScript 的一部分功能!

总结

这是我对 TypeScript 的初步认识。TypeScript 通过增强 JavaScript 的类型安全性和代码结构,极大地提升了 JavaScript 开发效率。我期待进一步学习并应用 TypeScript 到我的项目中。

希望这篇文章能激发您尝试在项目中使用 TypeScript 的兴趣。谁不希望拥有更健壮、更易维护的代码呢?

以上就是使用 TypeScript 添加到脚本的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2643182.html

(0)
上一篇 2025年3月7日 06:59:30
下一篇 2025年2月25日 19:10:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在 JavaScript 中创建对象:闭包、原型和 ESlasses

    JavaScript 提供多种创建对象的方式,各有优劣及适用场景。本文将通过示例讲解三种常用方法:闭包、原型和 ES6 类。 1. 使用闭包 闭包是指能够访问其词法作用域中变量的函数。利用此特性,我们可以将数据封装在函数内部。 functi…

    2025年3月7日
    200
  • 将 Vite React App 部署到 GitHub Pages 步骤:

    将vite react应用部署到github pages的完整指南 本文将引导您完成将Vite React应用程序部署到GitHub Pages的步骤。请确保您的项目已初始化并准备好部署。 第一步:初始化Git并提交代码 使用以下命令初始化…

    2025年3月7日
    200
  • DOM 操作从简单更新到虚拟 DOM

    构建 web 应用时,有效更新 dom 以响应用户交互和状态变化是核心挑战。本文通过一个待办事项应用的三种不同实现,探讨了 dom 操作方法的演变。 GitHub 代码:https://www.php.cn/link/745dc8d0c9e…

    2025年3月7日
    200
  • 软件开发的测试策略

    软件测试策略:确保软件质量的关键 成功的软件项目离不开清晰的测试策略。它如同项目成功的基石,确保软件的质量、可靠性和高效开发。一个完善的测试策略能够有效降低风险,并提升团队协作效率。 何为测试策略? 测试策略是一个高级别文档,它概述了软件项…

    2025年3月7日
    200
  • 历史上最好的 JavaScript 美化器

    提升JavaScript代码可读性的最佳美化工具 本文将探讨几款优秀的JavaScript代码美化工具,助您轻松优化代码,提升可读性。如果您想了解更多类似文章,请分享给您的开发者朋友们,您的支持将激励我们创作更多优质内容。 1. Beaut…

    2025年3月7日
    200
  • 克劳德·十四行诗 vs GPT-4o

    本案例研究对claude 3.5 sonnet和gpt-4o两种人工智能模型进行了深入比较,涵盖性能、定价和具体应用场景,并结合社区反馈、基准测试和实际使用经验。 Claude 3.5 Sonnet:智能且人性化 Claude 3.5 So…

    2025年3月7日 编程技术
    200
  • 无法在模块外部使用导入语句:如何解决此常见错误

    ES6 模块的引入彻底改变了 JavaScript 的代码组织和重用方式,但同时也带来了新的挑战。其中一个常见问题就是令人头疼的“无法在模块外部使用 import 语句”错误。本文将深入剖析此错误的成因及解决方案,帮助您更好地理解和应用 E…

    2025年3月7日
    200
  • TypeScript 基础知识:初学者指南 (✅

    TypeScript 饱受开发者争议。有人认为它是 JavaScript 自由的绊脚石,也有人将其视为在松散类型代码中的一盏明灯。无论您持何种观点,TypeScript 都将继续存在——深入了解后,您可能会发现它并非负担,而是项目的一大助力…

    2025年3月7日
    200
  • 软件测试中的人工智能简介

    AI赋能软件测试:革新质量保障 人工智能(AI)正深刻变革着众多行业,软件测试领域也不例外。面对日益增长的快速软件交付需求,传统测试方法已难以满足现代开发节奏。AI生成的测试应运而生,为简化和提升软件测试流程提供了创新方案。 什么是AI生成…

    2025年3月7日
    200
  • 每个开发者都应该了解的 5 个 Chrome 开发者工具顶级功能

    2025年Web开发者必备的十项Chrome开发者工具技能 (发布日期:2025年1月8日) Chrome开发者工具是每个Web开发者的利器,它提供强大的功能来调试、测试和优化Web应用。无论您是资深开发者还是新手,熟练掌握这些工具都能显著…

    2025年3月7日
    200

发表回复

登录后才能评论