【1】TypeScript入门——基本认知

2023-10-27

一、基本认知

1.优点

①TypeScript 更加可靠
它与使用 JavaScript 相比,不仅支持在任何地方直观地获取组件的接口定义,还能对属性、状态中的值是否为空进行自动检测并给出提示(容错处理),甚至还支持对 React JSX元素接收的各种属性、方法的检测和提示。相对于JavaScript 应用而言,TypeScript使得许多低级的 Bug 在开发阶段就能被检测出来并得到快速解决,显著提升了项目的整体质量和稳定性。接手复杂的大型应用时,TypeScript能让应用易于维护、迭代,且稳定可靠,更有安全感。
在业务应用中引入 TypeScript 后,关于“'undefined' is not a function”``“Cannot read property 'xx' of null|undefined”之类的低级错误统计信息基本没有。而这正得益于 TypeScript 的静态类型检测,让至少 10% 的 JavaScript错误(主要是一些低级错误)能在开发阶段就被发现并解决。
我们也可以这么理解,在所有操作符之前,TypeScript 都能检测到接收的类型(在代码运行时,操作符接收的是实际数据;静态检测时,操作符接收的则是类型)是否被当前操作符所支持。
当 TypeScript 类型检测能力覆盖到整个文件、整个项目代码后,任意破坏约定的改动都能被自动检测出来(即便跨越多个文件、很多次传递),并提出类型错误。因此,你可以放心地修改、重构业务逻辑,而不用过分担忧因为考虑不周而犯下低级错误。
②提升编码效率
编写 TypeScript 类型注解,本质就是接口设计。TypeScript 极大可能改变你的思维方式,从而逐渐养成一个好习惯。比如,编写具体的逻辑之前,我们需要设计好数据结构、编写类型注解,并按照这接口约定实现业务逻辑。这显然可以减少不必要的代码重构,从而大大提升编码效率。同时,你会更明白接口约定的重要性,也会约束自己/他人设计接口、编写注解、遵守约定,乐此不疲。

2.本质

①TypeScript 与 JavaScript 本质并无区别
你可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript,比如 const num = 1,它同时符合 TypeScript 和 JavaScript 的语法。
②TypeScript 是一门中间语言
最终它还需要转译为纯 JavaScript,再交给各种终端解释、执行。不过,TypeScript 并不会破坏 JavaScript 既有的知识体系,因为它并未创造迥异于 JavaScript 的新语法,依旧是“熟悉的配方”“熟悉的味道”。

3.趋势

越来越多的主流框架(例如 React、Vue 3、Angular、Deno、Nest.js 等)要么选用 TypeScript 编写源码,要么为 TypeScript 提供了完美的支持。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【1】TypeScript入门——基本认知 的相关文章

  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • JavaScript 中的埃拉托斯特尼筛法对大量数据无限运行

    我一直在尝试写埃拉托斯特尼筛法 http en wikipedia org wiki Sieve of EratosthenesJavaScript 中的算法 基本上我只是按照以下步骤操作 创建从 2 到 n 1 的连续整数列表 令第一个素
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • Angular 2 和 TypeScript 的承诺

    我正在尝试使用routerCanDeactivate我的应用程序中的组件的函数 简单的使用方法如下 routerCanDeactivate return confirm Are you sure you want to leave this
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 【代码】python Flask实现程序运行结果展示在网页

    目录 1 代码 2 结果 1 代码 from flask import Flask request jsonify import json app Flask name app route img recog methods GET POS
  • java 容易犯错_java面试题最容易犯错

    1 static 和 final 的用法 static 的作用从三个方面来谈 分别是静态变量 静态方法 静态类 静态变量 声明为 static 的静态变量实质上就是全局变量 当声明一个对象时 并不产生static 变量的拷贝 而是该类所有实
  • 一文读懂HTML和CSS的关系

    Web开发是一个很依赖经验的领域 然而这对初学者很不友好 知识一旦脱离了应用场景就会变得晦涩 空洞 且知识本身也满足 二八定律 抓大放小 是提高学习效率的关键 下文向大家介绍了HTML和CSS之间的关系 内容选自 HTML 5与CSS 3核
  • Mybatis-Plus时间范围查询

    方式一 通过apply方法 来实现时间范围查询 该方法可用于数据库函数 动态入参的params对应前面applySql内部的 index 部分 这样是不会有sql注入风险的 反之会有 apply String applySql Object
  • Jenkins 持续集成「编译打包、代码检查、单元测试、环境部署、软件测试​」

    Jenkins 就是常说的 CI 平台 持续集成 持续集成 CI 是一种实践 可以让团队在持续的基础上收到反馈并进行改进 不必等到开发周期后期才寻找和修复缺陷 改进肯定是自己改进 反馈是谁提供呢 最先应用在开发团队中 也就是 打包 大型项目
  • crmeb PRO v1.2用户隐私协议问题

    注意 行数仅供参考 为了快速找到修改的地方 1 文件地址 app controller admin v1 setting SystemGroupData php行数 308 获取用户协议内容 return mixed public func
  • React通过docx-preview预览Word文档

    前言 在基于React的Web应用中 我们经常遇到需要预览和展示Word文档的需求 而docx preview是一个优秀的React组件库 可以帮助我们实现在Web页面上预览Word文档的功能 本文将介绍如何使用docx preview组件
  • React 路由使用-详细介绍

    路由初使用 抽象路由模块 src page Article index js const Article gt return div p 文章页 p div export default Article src router index j
  • selenium框架解析

    seleium框架解析 文章目录 seleium框架解析 前言 一 selenium驱动浏览器原理 二 selenium常用操作 1 四大操作 2 三大切换 3 三大等待 4 下拉框操作 5 时间控件操作 6 滚动条操作 7 文件操作 前言
  • java类的静态成员和非静态成员_Java SE之[静态成员/类成员]与[非静态成员/实例成员]【static】...

    定义 静态成员 又称类成员 使用static修饰符的方法和变量 非静态成员 又称实例成员 未使用static修饰符的方法和变量 结论 注 jdk1 8 测试源码 public class Main private int x 34 非静态变
  • linux path 多个目录,Linux下多路径Multipath的简单配置

    Linux下多路径Multipath的简单配置 1 启用Multipath 1 启动multipathd服务 service multipathd start 或者 etc init d multipathd start 2 修改multi
  • python房价预测_Python——决策树实战:california房价预测

    Python 决策树实战 california房价预测 编译环境 Anaconda Jupyter Notebook 首先 导入模块 1 importpandas as pd2 importmatplotlib pyplot as plt3
  • 手写算法-python代码实现Kmeans

    手写算法 python代码实现Kmeans 原理解析 代码实现 实例演示 sklearn对比 总结 原理解析 今天 我们来讲一下Kmeans 一种无监督聚类算法 也是最为经典的基于划分的聚类方法 它的思想是 对于给定的样本集 按照样本之间的
  • java中的 Set转List

    构造Map数据 Map
  • Mysql详解

    一 数据库的基本概念 数据库的英文单词 DataBase DB 数据库 用来存储和管理数据的仓库 数据库的特点 持久化存储数据 其实数据库就是一个文件系统 方便存储和管理数据 使用了统一的方式操作数据库 SQL 常见的数据库软件 MySQL
  • 两阶段最小二乘法_最小二乘法(Least Squares)简介

    最小二乘法简介 最小二乘法 Least Squares 是回归分析中的一种标准方法 它是用来近似超定系统 Overdetermined System 答案的一种方法 超定系统是指数学中的一种概念 一组包含未知数的方程组中 如果方程的数量大于
  • arm平台编译adb

    参考github https github com bonnyfone adb arm 本来的目的是在arm平台编译以后能够使用adb shell获取shell权限 然后就可以避开其他权限无法执行su的问题 最开始 先修改了android源
  • kodi刮削器 中文_手把手教您设置KODI播放器,3分钟打造家庭影院级媒体库,流畅播放NAS里的原盘电影!...

    创作立场声明 此文为比较基础的KODI播放器的保姆级安装和配置教程 希望可以帮助一些初入家庭影音的值友们 关于KODI KODI是一款播放器 也是一款媒体库管理软件 不仅在电视上可以安装 还可以在windows电脑上进行安装 当下载高清 高
  • Vue3记录

    Vue3快速上手 1 Vue3简介 2020年9月18日 Vue js发布3 0版本 代号 One Piece 海贼王 耗时2年多 2600 次提交 30 个RFC 600 次PR 99位贡献者 github上的tags地址 https g
  • 【1】TypeScript入门——基本认知

    一 基本认知 1 优点 TypeScript 更加可靠 它与使用 JavaScript 相比 不仅支持在任何地方直观地获取组件的接口定义 还能对属性 状态中的值是否为空进行自动检测并给出提示 容错处理 甚至还支持对 React JSX元素接