系统学习 TypeScript(一)——认识 TypeScript

2023-11-13

TypeScript 很流行,这是前端从业者众所周知的事。

TypeScript 很好用,仁者见仁智者见智。但是,很多大型前端框架都使用 TypeScript 进行了重构。

为了不落伍,我也需要系统的学习一下 TypeScript 相关知识了,今天是第一课。

TypeScript 的概念及意义
TypeScript 是由微软开发的自由和开源的编程语言。通过在 JavaScript的 基础上添加静态类型定义构建而成。TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码,可运行在任何浏览器,任何操作系统。

TypeScript 是添加了类型系统的 JavaScript,适用于任何规模的项目。
TypeScript 是一门静态类型、弱类型的语言。
TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性。
TypeScript 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
TypeScript 拥有很多编译选项,类型检查的严格程度由你决定。
TypeScript 可以和 JavaScript 共存,这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
TypeScript 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力。
TypeScript 拥有活跃的社区,大多数常用的第三方库都提供了类型声明。
TypeScript 与标准同步发展,符合最新的 ECMAScript 标准(stage 3)
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码,并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3(或更高版本)的 JavaScript 引擎中。

TypeScript 有更多的规则和类型限制,代码具有更高的预测性、可控性,易于维护和调试;对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序。

TypeScript 的编译步骤可以捕获运行之前的错误。

image-20220221182629919

TypeScript 的主要特征
从上面的概念和意义部分可以看出,TypeScript 的特征比较多,这里我们就几个主要特性进行分析。

TypeScript 是静态类型
我们都知道,JavaScript是一门解释型语言,没有编译阶段,它只有在运行时才会进行类型检查。

而 TypeScript 与它相反,因为 TypeScript 在运行前还要经过被编译成 JavaScript 的过程,它在编译阶段就就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。

比如,在 JavaScript 中:

let foo = 1;
foo.split(’ ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错(foo.split 不是一个函数),造成线上 bug
而在 TypeScript 中:

let foo = 1;
foo.split(’ ');
// Property ‘split’ does not exist on type ‘number’.
// 编译时会报错(数字没有 split 方法),无法通过编译
TypeScript 是弱类型
在这一点上,TypeScript 和 JavaScript 的表现是一致的,具体是指数据类型可以发生隐式转换 ,看以下一段代码:

console.log(“1” + 1);
// // 打印出字符串 ‘11’
不管是在 TypeScript 中还是 JavaScript 中,输出结果都是一样的。

全局安装 TypeScript
npm install -g typescript
总结
今天就主要认识一下 TypeScript,知道它是什么、有什么用,接下来就要学习它该怎么样了。
https://www.bilibili.com/video/BV1Db4y14748/

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

系统学习 TypeScript(一)——认识 TypeScript 的相关文章

  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • Ant Design pro入门

    Ant Design pro入门 前言 一 了解Ant Design pro 二 使用步骤 1 快速入门 2 ant pro菜单 路由 前言 读此文章需要优先掌握知识 1 React 2 ts 3 Ant Design 一 了解Ant De
  • NLP学习(一)基础篇

    一 前言 2016年3月9日至15日和2017年5月23日至27日 分别在韩国首尔和中国嘉兴乌镇 韩国围棋九段棋手李世石 中国围棋九段棋手柯洁与人工智能围棋程序 阿尔法围棋 AlphaGo 之间的两场比赛 人类均以失败告终 更是激起了各种
  • 深度学习课程设计

    1 安装TensorFlow windows 命令窗口 pip install tensorflow 我之前已经安装过python 可能是因为安装python也安装了pip所以可以直接使用pip命令 之前下载过pycharm 但是没有激活
  • Ubuntu系统下pycharm导入numpy、sklearn等各类包的方法

    本方法适用于无法导入numpy pandas matplotlib sklearn等包 1 打开pycharm 点击左上角file gt setting gt Project gt Python Interpreter 2 点击 号后显示下
  • win10环境变量path误删(windows找不到文件%windir%\systempropertiesadvanced.exe)的解决办法

    首先给出错误 windows找不到文件 windir systempropertiesadvanced exe请确定文件是否正确后 再试一次 当时看到这个错误我真是绝望了 因为我各种百度找path变量怎么恢复 结果百度给一堆环境变量的设置方
  • java实现:《操作系统实验三》模拟内存管理

    固定分区分配 固定分区分配是最简单的一种多道程序存储管理方式 它将用户内存空间划分为若干个固定大小的区域 每个分区只装入一道作业 当有空闲分区时 便可以再从外存的后背作业队列中 选择适当大小的作业装入该分区 如此循环 优缺点 分区大小相等
  • MES管理系统在电子行业的作用和效益

    电子行业近年来发展很好 特别是MES管理系统对于生产的帮助 电子行业MES管理系统促进了行业的数字化转型 从而提高电子行业高效管理 使企业效益最大化 电子行业现状 1 产品 顶级企业只负责设计与销售 对于涉及制造的各级企业产品较多 并且产品
  • win版本的sqlmap报错解决

    原来好好地环境突然报如下错 查了好久资料 竟然没人遇到过 解决方法 python sqlmap py update 没想到吧 完美解决 原来是版本低的原因 我也是醉了 以此记录下
  • Nginx中location规则 与 URL重写(rewrite)详解

    1 Nginx中location与rewrite 1 1 location与rewrite常用的正则表达式 符号 作用 匹配输入字符串的起始位置 匹配输入字符串的结束位置 匹配前面的字符零次或多次 如 ol 能匹配 o 及 ol oll 匹
  • matlab转化上三角矩阵,怎么样把矩阵H变成【A B】,A为上三角矩阵

    p eye 21 21 p1 eye 21 21 pm c zeros 252 672 a1 1 21 a2 22 42 a3 43 63 a4 64 84 a5 85 105 a6 106 126 a7 127 147 a8 148 16
  • 学习笔记——IPSec

    目录 一 整个IPsec工作过程 二 IKE阶段1 三 IKE阶段2 四 IPsec协议 五 华为设备配置命令 一 安全提议 xxx proposal 二 IKE对等体 ike peer 三 IPSec安全框架 ipsec profile
  • Emgu CV3+C#图像处理(一):Emgu CV学习目录+EmguCV安装配置与使用

    EmguCV学习目录 Emgu CV3 C 图像处理 一 Emgu CV学习目录 EmguCV安装配置与使用 Emgu CV3 C 图像处理 二 EmguCV主要模块简介 Emgu CV3 C 图像处理 三 使用EmguCV进行简单图像处理
  • 【重磅更新】图形处理工具NCSS 2019重磅上线!

    NCSS软件提供了370多种全面的统计和图形工具 用以对数据进行分析和实现可视化 我们很高兴地宣布NCSS 2019已经更新 这是统计分析和图形软件的最新版本 我们相信您会发现改进的和新增的程序非常适合您的研究需求 NCSS 2019免费下
  • 语义分割总结(未完待续)

    一 综述 由于工作中很长一段时间都是在做语义分割系列的工作 所以这篇文章主要对自己用到的一些方法做个简单的总结 包括其优缺点等 以便日后能够及时复习查看 目前语义分割的方法主要集中在两个大的结构上 1 encode decode的结构 图像
  • 深入理解计算机系统(原书第三版)系列 第十一章 网络编程

    第十一章 网络编程
  • 【剑指offer】数据结构——数

    目录 数据结构 数 直接解 剑指offer 43 1 n 整数中 1 出现的次数 剑指offer 44 数字序列中某一位的数字 剑指offer 49 丑数 剑指offer 60 n个骰子的点数 剑指offer 62 圆圈中最后剩下的数字 剑
  • 安卓端小黄鸟抓包保姆级教程(附带全套工具,完美解决无网络和ROOT问题)

    抓包工具 1 vmos pro 2 小黄鸟 3 JustTrustMe 4 JustMeplus 5 JustMeAlreadly 6 MT管理工具 抓包环境 vmos pro 虚拟机安卓9版本中 抓包教程 一 安装所需工具 工具安装包我会
  • jpa笔记

    ORM思想 主要目的 操作实体类就相当于操作数据库表 建立两个映射关系 实体类和表的映射关系 实体类中属性与表中字段的映射关系 不再重点关注 sql语句 JPA规范 jpa规范 实现jpa规范 内部是由接口和抽象类组成 实体类 配置映射关系
  • Java的assert断言以及常见的Assert工具类

    实际上Java有一个保留关键字assert 名字叫断言 断言这个东西可以看做是程序语言关于异常处理的一种高级方式 就是通过断言
  • 系统学习 TypeScript(一)——认识 TypeScript

    TypeScript 很流行 这是前端从业者众所周知的事 TypeScript 很好用 仁者见仁智者见智 但是 很多大型前端框架都使用 TypeScript 进行了重构 为了不落伍 我也需要系统的学习一下 TypeScript 相关知识了