TypeScript入门实战笔记 -- 开篇 为什么要选择 TypeScript ?

typescript 在线编辑器icon-default.png?t=N7T8http://typescript.p2hp.com/play?#code/JYOwLgpgTgZghgYwgAgJIFUDO1Uhge2QG8AoZc5YAEwC5kQBXAWwCNoBuMikOJiOzGCigA5pwrI4ANzhg4UAPwChozgF8SmmAxAIwwfCGRYcefAAoADlHyXMdDNii4CASmJdyCQ5nwAbCAA6P3wRKxs7ABpkAHJrW0wY1xINEhNnM3MiSlpkAEZonj46GIBrROQ1ZKA

掘金编辑器icon-default.png?t=N7T8https://code.juejin.cn/

🍍1. TypeScript 的本质

首先,TypeScript 和 JavaScript 本质上是相同的语言,它们共享相同的语法和基本特性。你可以将 TypeScript 看作是在 JavaScript 的基础上添加了类型注解的一种扩展。例如,在 TypeScript 中,你可以使用 const num: number = 1; 这样的语法来声明一个变量 num 的类型为 number,而在 JavaScript 中则不需要进行类型注解。

其次,TypeScript 是一门中间语言,它需要经过转译(transpilation)过程将其转换为纯 JavaScript 代码。这意味着 TypeScript 的代码最终会被编译成可以在各种终端上解释和执行的纯 JavaScript 代码。这种转译过程并不会破坏已有的 JavaScript 知识体系,因为 TypeScript 并没有引入与 JavaScript 完全不同的新语法,而是保持了对现有语法的兼容性。

总结来说,TypeScript 是一种基于 JavaScript 的语言扩展,它通过添加类型注解来提供更好的代码可读性和可维护性。虽然 TypeScript 需要转译为 JavaScript,但它并不改变 JavaScript 的基本特性和语法,因此对于熟悉 JavaScript 的人来说,学习和使用 TypeScript 相对容易。

🍍2. TypeScript 更加可靠

TypeScript 是一种静态类型检查的语言,它可以在代码运行之前进行类型检查,从而帮助开发者发现潜在的错误。当 TypeScript 类型检测能力覆盖到整个文件、整个项目代码后,它能够自动检测出任意破坏约定的改动,并提出类型错误。

这意味着,当你在修改或重构业务逻辑时,你可以更加放心地进行操作,因为你不必担心因为考虑不周而犯下低级错误。TypeScript 会在编译阶段捕获这些错误,而不是在运行时。这样,你可以在开发过程中尽早发现并修复问题,提高代码质量和可维护性。接手复杂的大型应用时,TypeScript 能让应用易于维护、迭代,且稳定可靠,也会让你更有安全感。

🍍3. 面向接口编程

编写 TypeScript 类型注解,本质就是接口设计。 以下是使用 TypeScript 设计的一个展示用户信息示例,从中我们一眼就能了解组件接收数据的结构和类型,并清楚地知道如何在组件内部编写安全稳定的代码。

interface UserInfo {id: number;name: string;age: number;email?: string;
}const userInfo: UserInfo = {id: 1,name: 'ks',age: 25,email: 'ks@example.com'
};

TypeScript 是一种静态类型检查的编程语言,它可以帮助开发者在编写代码时更加明确变量和函数的类型,从而提高代码的可读性和可维护性。通过使用 TypeScript,你可以更好地组织和管理你的代码,避免出现类型错误和运行时错误。

此外,TypeScript 还提供了一些高级功能,如类、模块、装饰器等,这些功能可以帮助你更好地组织和管理复杂的代码结构。通过使用这些功能,你可以将代码分解成更小、更易于管理的部分,从而提高代码的可读性和可维护性。

总之,TypeScript 可以帮助你更好地组织和管理你的代码,提高代码的可读性和可维护性。通过使用 TypeScript,你可以更好地理解接口约定的重要性,并约束自己/他人设计接口、编写注解、遵守约定,从而乐此不疲。

🍍4. TypeScript 正成为主流

TypeScript 是一种静态类型检查的编程语言,它是由 Microsoft 开发和维护的。相比竞争对手 Facebook 的 Flow,TypeScript 更具备类型编程的优势,而且还有 Microsoft、Google 这两家国际大厂做背书。

越来越多的主流框架(例如 React、Vue 3、Angular、Deno、Nest.js 等)要么选用 TypeScript 编写源码,要么为 TypeScript 提供了完美的支持。随着 TypeScript 的普及,TypeScript 在国内(国内滞后国外)成了一个主流的技术方向,国内各大互联网公司和中小型团队都开始尝试使用 TypeScript 开发项目,且越来越多的人正在学习和使用它。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/213627.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C/C++之输入输出

文章目录 一.C语言的输入输出1.printfi. 输出整数ii. 浮点数iii.字符 & 字符串 2.scanfi.整数ii.浮点数iii. 字符 & 字符串 3.特殊用法i. * 的应用ii. %n 的应用iii. %[] 的应用 二.C中的输入输出1.couti. 缓冲区(buffer)ii. cout之格式化输出 2…

区块链optimism主网节点搭建

文章目录 官方参考资料编译环境搭建编译Optimism Monorepo编译op-geth 执行下载数据快照生成op-geth和op-node通信密钥op-geth执行脚本 op-node执行脚本 启动日志op-gethop-node 本文是按照官方参考资料基于源码的方式成功搭建optimism主网节点。 官方参考资料 源码&#xff1…

【设计模式-4.4】行为型——模板方法模式

说明:本文介绍设计模式中行为型设计模式中的,模板方法模式; 生存 模版方法模式是行为型设计模式,关注于对象的行为。在《秒懂设计模式》(刘韬 著)中举了一个例子,例如哺乳动物的生存技能&…

1688API接口系列,商品详情数据丨搜索商品列表丨商家订单类丨1688开放平台接口使用方案

1688商品详情接口是指1688平台提供的API接口,用于获取商品详情信息。通过该接口,您可以获取到商品的详细信息,包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口,您需要先申请1688的API权限,并获取ac…

【开源】基于Vue+SpringBoot的河南软件客服系统

文末获取源码,项目编号: S 067 。 \color{red}{文末获取源码,项目编号:S067。} 文末获取源码,项目编号:S067。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理人员2.2 业务操作人员 三、…

uniapp 云打包 生成安卓证书文件

现在使用uniapp来开发小程序,H5,APP越来越多了,目前开发了一款APP,使用的也是uniapp。在此记录下用uniapp开发app云打包时约到的一些问题吧。 前因是我司安卓同学休产假,像云打包时需要的证书文件只能自己动手来搞。看…

Avaya Aura Device Services 任意文件上传漏洞复现

0x01 产品简介 Avaya Aura Device Services是美国Avaya公司的一个应用软件。提供一个管理 Avaya 端点功能。 0x02 漏洞概述 Avaya Aura Device Services 系统PhoneBackup接口处存在任意文件上传漏洞,攻击者可绕过验证上传任意文件获取服务器权限。 0x03 影响范围…

使用Jmeter进行http接口测试

前言: 本文主要针对http接口进行测试,使用Jmeter工具实现。 Jmter工具设计之初是用于做性能测试的,它在实现对各种接口的调用方面已经做的比较成熟,因此,本次直接使用Jmeter工具来完成对Http接口的测试。 一、开发接口…

Mac电脑vm虚拟机 VMware Fusion Pro中文 for mac

VMware Fusion Pro是一款功能强大的虚拟机软件,适用于需要在Mac电脑上运行其他操作系统的用户。它具有广泛的支持、快速稳定的特点以及多种高级功能,可以满足用户的各种需求和场景。 多操作系统支持:VMware Fusion Pro允许在Mac电脑上运行多…

平台工程文化:软件开发的创新路径和协作之道

在快速发展的软件开发领域,具有前瞻性思维的企业组织正在拥抱平台工程文化的变革力量。这种创新方法强调创建共享平台、工具和实践,使开发人员能够更快、更高效地交付高质量的软件。在本文中,我们将深入探讨平台工程文化的核心原则和深远的好…

Scala 从入门到精通

Scala 从入门到精通 数据类型 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:…

基于STM32 + DMA介绍,应用和步骤详解(ADC多通道)

前言 本篇博客主要学习了解DMA的工作原理和部分寄存器解析&#xff0c;针对ADC多通道来对代码部分&#xff0c;应用部分作详细讲解&#xff0c;掌握代码编程原理。本篇博客大部分是自己收集和整理&#xff0c;如有侵权请联系我删除。 本次博客开发板使用的是正点原子精英版&am…

springboot_java养老院老年人问诊服务预约系统ssm

系统的目标是为管理员&#xff0c;服务者&#xff0c;医生和用户搭建一个网上沟通平台&#xff0c;保证四方的安全&#xff0c;并使四方的利益最大化。 .用户&#xff1a; &#xff08;1&#xff09;用户注册登入页面&#xff1a;用户进行操作时需要是已注册登入用户 &#xff…

WireShark监控浏览器登录过程网络请求

软件开发中经常前后端扯皮。一种是用Chrome浏览器的开发者工具 来看网络交互&#xff0c;但是前提是 网络端口的确是通的。 WireShark工作在更低层。 这个工具最大的好处&#xff0c;大家别扯皮&#xff0c;看网络底层的log&#xff0c;到底 你的端口开没开&#xff0c; 数据…

结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数&#xff1a; Component({data: {},attached() {console.log("自定义组件生命周期函数 attached--先执行");this.getPos();},ready() {console.log("ready生命周期函数---在attached之后执行")},methods: {getPos() {var that th…

uniapp 使用 $emit和$on——$on中无法为data中的变量赋值

问题在于this的指向&#xff0c; 解决办法是使用变量保存$on&#xff0c;其次再为data中的值赋值 以下是具体代码&#xff1a; 1、html代码&#xff1a; <view class"form_picker" click"selePositionFun()"><view class""><inp…

基于remix+metamask+ganache的智能合约部署调用

在我们部署合约时为了让它更接近真实区块链去中心化体验&#xff0c;我们需要调用小狐狸&#xff08;Metamask&#xff09;来进行真实交易&#xff0c;而metamask里没有内置虚拟测试币&#xff0c;我们需要进行调用Ganache来添加带有虚拟测试币的账号。以上就是三者的关系&…

PHP基础 - 输入输出

在 PHP 中,有多种方法可以用来输出内容。下面是其中的几种: 1、echo: 这是最常见的输出语句之一,可以输出一个或多个字符串。它是一个语言结构,可以省略括号。使用示例如下: <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…

面向对象中的单例模式

1、什么是设计模式 设计模式就是前人根据实际的问题提出的问题解决方案&#xff0c;我们把这种就称之为设计模式。 2、单例模式 单例模式是一种常见的设计模式&#xff01; 所谓的设计模式&#xff0c;不是一种新的语法&#xff0c;而是人们在实际的应用中&#xff0c;面对…

数据结构之哈希表

数据结构之哈希表 文章目录 数据结构之哈希表一、哈希概念二、哈希冲突三、哈希函数常见哈希函数 四、哈希冲突解决闭散列闭散列的思考线性探测线性探测的实现 二次探测 开散列开散列概念开散列的思考开散列实现 五、开散列与闭散列比较 一、哈希概念 顺序结构以及平衡树中&am…