两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

这篇具有很好参考价值的文章主要介绍了两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端(Node.js 等)
📃个人状态: 2023届本科毕业生,已拿多个前端 offer(秋招)
🚀未来打算: 为中国的工业软件事业效力 n 年
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js 🍖JS版算法
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

TypeScript入门

内容 参考链接
TypeScript(零) —— 简介、环境搭建、第一个实例 搭建开发环境


认识 TypeScript

TypeScript 简介

TypeScript 是微软开发的一个开源的编程语言,通过在 JavaScript 的基础上添加静态类型定义构建而成。

TypeScript 的作用

我们都知道,JavaScript 是弱类型的语言,对于一些类型的限制并不是很明确。比如说我们编码一个在两个输入框中输入数字求和的加法小程序,这时候直接输入到文本框的数字会被自动转换为字符串形式,就会得到 1 + 1 = 11 的奇怪结果。那么这个时候 TypeScript 就可以大显身手,实现 1 + 1 = 2。

a. 规范我们的代码
b. 代码编译阶段就能及时发现问题
c. 在原生JS基础上加上了一层类型定义

TypeScript 工作流

TSC (把 ts 文件转换为 js 文件)的作用相当于 Babel(把高级语法和代码转换为浏览器能识别的低级语法和代码)。

编译和运行参考 TypeScript(零) —— 简介、环境搭建、第一个实例

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

上图表示:ts 文件通过 tsc 命令把 ts 文件转成了 js 文件。

TypeScript 的类型

相比于 JavaScript 的原始类型(基本数据类型)和对象类型(引用数据类型),TypeScript 也有自己的数据类型,内容如下:

基本类型:boolean、string、number、array、tuple、enum、null、undefined、object、void、never、any

高级类型:union 组合类型、Nullable 可空类型、Literal 预定义类型

接下来,我们对不同类型进行逐一详细的探索…

Number 数字类型

对数字的定义只有一个笼统的 Number 表示,既能表示 整数、也能表示 浮点数,甚至也可以表示 正负数。例如:1,3.3,-5 等等。

let num1 = 2
let num2 = 6
function add(n1: number, n2: number) {
    return n1 + n2
}
console.log(add(num1, num2))

之后终端执行 tsc main.tsnode main.js,可以得出结果 8

String 字符串类型

与 JavaScript 书写方式及使用方法均一致。

'前端杂货铺'
"前端杂货铺"
`前端杂货铺`
let myName: string = "前端杂货铺"
console.log('myName', myName)

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

Boolean 布尔类型

表示真、假,常用于处理判断逻辑。

let isTrue: boolean = true
console.log('isTure', isTrue)

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

Array 数组类型

数组中可以存放任意类型的数据,JS中数组的宽容度非常大,TS也继承了这一点。

以下三种写法(list1、list2、list3)表示的完全一致,鼠标移动至 list 上编译器均提示 number[],表示数字类型。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

let list1: number[] = [1, 2, 3, 4]
let list2: Array<number> = [1, 2, 3, 4]
let list3 = [1, 2, 3, 4]

下面的 list 4 为 (string | number)[],表示字符串和数字类型。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

let list4 = [1, '前端杂货铺']

下面的 list 5 为 any[],表示任意类型。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

let list5: any[] = [1, '前端杂货铺', true]

Tuple 元组类型

固定长度,固定类型的 Array,声明元组的时候一定要事先指定类型。

let person: [number, string] = [1, "前端杂货铺"]

此时,元组的长度和类型都被固定住了,当我们尝试修改元素的长度和类型都会报错。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

注:元组类型有一个 Bug,可以调用 push() 方法改变元组的长度。

Union 联合类型

联合类型表示一个变量同时支持两个或者多个不同的类型。

let union : string | number

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

Literal 字面量类型

可以混合使用不同的类型。

let literal : 1 | "前端杂货铺" | true | [1, 2, 3]

示例:merge 求和(分为数字和字符串两种方式)

function merge(n1: number | string, n2: number | string, resultType: "as-number" | "as-string") {
    if (resultType === 'as-string') {
        return n1.toString() + n2.toString()
    }
    if (typeof n1 === "string" || typeof n2 === "string") {
        return n1.toString() + n2.toString()
    } else {
        return n1 + n2
    }
}

let mergeNumber1 = merge(1, 1, "as-number")
let mergeNumber2 = merge(1, 1, "as-string")
let mergeString = merge("前端", "杂货铺", "as-string")

console.log(mergeNumber1)
console.log(mergeNumber2)
console.log(mergeString)

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

Enum 枚举类型

枚举允许我们定义一组命名的常量。默认情况下,我们获取到对象的某个属性打印出来的是该属性的索引,神奇的是,我们可以 给对象里面的属性赋值,这时候再获取到对象的某个属性时打印出来的就是 我们给属性赋的值 了。

enum Color {
    red,
    yellow = '黄色',
    blue = 'blue'
}
let color1 = Color.red
console.log(color1)
let color2 = Color.blue
console.log(color2)
let color3 = Color.yellow
console.log(color3)

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

Any 任意类型

Any 这个类型可以让我们随意定义类型,当我们“懒得”定义复杂类型结构的时候,可以合理的使用它。

let randomValue: any = 123
randomValue = true
randomValue = "前端杂货铺"
randomValue = {}

unknown 未知类型

unknown 不保证类型,但 可以保证类型安全,当我们出现错误编码时(下面的数字 123 不能调用 toUpperCase() 方法),使用 unknow 编译器会有报错提示。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

我们可以做出以下适配,让编译器不报错。

let randomValue: unknown = 123
randomValue = true
randomValue = "前端杂货铺"
randomValue = {}
if (typeof randomValue === 'function') {
    randomValue()
}
if (typeof randomValue === 'string') {
    randomValue.toUpperCase()
}

void、undefined、never 类型

不存在时用 void,undefined 表示必须存在但可以不赋值,永远不会执行完时用 never。

此时使用了 void(默认就是 void,可加可不加),不添加返回值也一切正常。

function printResult() : void {
    console.log("前端杂货铺")
}
console.log("Hello", printResult())

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

此时使用了 undefined,函数体里面必须有返回值,我们可以在函数体内添加 return,不然会报错。

function printResult() : undefined {
    console.log("前端杂货铺")
    return
}
console.log("Hello", printResult())

之后终端执行 tsc main.tsnode main.js,可以得出以下结果。

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

此时使用了 never,一般用在抛出异常或者 promise 中。

function throwError(message: string, errorCode: number): never {
    throw {
        message,
        errorCode
    }
}
throwError("not found", 404)
function whileLoop(): never {
    while(true) {
        console.log("前端杂货铺")
    }
}

Type Assertions 类型适配

第一个 endsWith() 出现的地方编译器是不会自动提示补全的,因为此时的类型还是 any,而不是 string,我们可以使用 endsWith() 在下面代码中第二次和第三次出现的地方的方式进行类型适配,便可以实现自动补全(在我们刚开始不明确类型,而后面明确类型后就可以使用这种类型适配的方式)

let message : any
message = "前端杂货铺"
message.endsWith("铺")

(<string>message).endsWith("铺")
(message as string).endsWith("铺")

本章小结

存在即合理,TypeScript 的出现自有它的用途。TypeScript 作为 JavaScript 的超集,对 JavaScript 进行了一些列约束,使得弱类型的 JavaScript 变成强类型,这就会使得代码更清晰、可读性更高、提高了代码的可读性和可维护性,更适合开发大型应用。

结合 Vue3 对 TypeScript 更好的包容性,使用 Vue3 + TS 构建大、中、小型应用便成了一种大趋势…


参考资料:

  1. TypeScript 百度百科
  2. TypeScript 入门讲解 【作者:阿莱克斯刘】

两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型文章来源地址https://www.toymoban.com/news/detail-501423.html


到了这里,关于两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 工作流Camunda入门demo

    先下载2个客户端,分别是Camunda Platform和Camunda Modeler Camunda Platform是用来部署的 Camunda Modeler是用来设计流程的 具体的流程里的实际动作还是需要我们自己写代码去订阅实现的。 直接上官网的2个下载地址,下载后不需要配置环境变量直接就能run,我这边本地pc是windows的所以下

    2023年04月08日
    浏览(47)
  • 一步到位!快速精通Git工作流及实战技巧详解

    Git是一个分布式版本控制系统。 1.备份 小明负责的模块就要完成了,就在即将release之前的一瞬间,电脑突然蓝屏。硬盘光荣牺牲!几个月来的努力付之东流。 场景二:代码还原 这个项目中需要一个很复杂的功能,老王摸索了一个星期终于有眉目了,可是这被改得面目全非的

    2024年03月15日
    浏览(67)
  • Flowable工作流入门&完整SpringBoot案例

    工作流(Workflow),是指对于一项业务,按照规定的流程,逐级传递、申请、执行等,并且受到了严格控制的一种业务过程。 BPM(Business Process Management)是指对于某项业务的整个生命周期进行全面管理的一种模式,最核心的内容包括了工作流、决策、交互等。在这些管理过程

    2024年02月12日
    浏览(44)
  • Excel与Unity工作流(二):基础对话框架

    本文将演示在unity中实现类似galgame的对话效果,并且通过Excel进行文本、图片、选项、赋值、音乐的配置 (该图主要是展示版面和大致目标效果,与本文关系不大) (来源:《无期迷途》) 每点击一次鼠标,就出现下一个对话/或者出现选项; 如果出现选项,点击选项,会有不同

    2024年04月14日
    浏览(42)
  • 深度学习模型部署(六)TensorRT工作流and入门demo

    官方给出的步骤: 总结下来可以分为两大部分: 模型生成:将onnx经过一系列优化,生成tensorrt的engine模型 选择batchsize,选择精度precision,模型转换 模型推理:使用python或者C++进行推理 生成trt模型: 然后就坐等输出模型,我们可以根据log信息看一下tensorRT都干了什么: 得到

    2024年03月13日
    浏览(52)
  • Flutter 中的单元测试:从工作流基础到复杂场景

    对 Flutter 的兴趣空前高涨——而且早就应该出现了。 Google 的开源 SDK 与 Android、iOS、macOS、Web、Windows 和 Linux 兼容。单个 Flutter 代码库支持所有这些。单元测试有助于交付一致且可靠的 Flutter 应用程序,通过在组装之前先发制人地提高代码质量来确保不会出现错误、缺陷和缺

    2024年02月08日
    浏览(55)
  • 工作流Flowable入门教程:flowableUI的安装使用,RepositoryService、RuntimeService、TaskService、HistoryService的使用

    Flowable是一个使用Java编写的轻量级业务流程引擎。Flowable流程引擎可用于部署BPMN 2.0流程定义(用于定义流程的行业XML标准), 创建这些流程定义的流程实例,进行查询,访问运行中或历史的流程实例与相关数据,等等。这个章节将用一个可以在你自己的开发环境中使用的例

    2024年01月18日
    浏览(59)
  • 【工作流】Activiti工作流简介以及Spring Boot 集成 Activiti7

    什么是工作流? 工作流指通过计算机对业务流程进行自动化管理,实现多个参与者按照预定义的流程去自动执行业务流程。 文章源码托管:https://github.com/OUYANGSIHAI/Activiti-learninig Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理、

    2024年02月08日
    浏览(53)
  • 云原生离线工作流编排利器 -- 分布式工作流 Argo 集群

    作者:庄宇 在现代的软件开发和数据处理领域,批处理作业(Batch)扮演着重要的角色。它们通常用于数据处理,仿真计算,科学计算等领域,往往需要大规模的计算资源。随着云计算的兴起,阿里云批量计算和 AWS Batch 等云服务提供了管理和运行这些批处理作业的平台。 随

    2024年01月24日
    浏览(84)
  • Camunda 7工作流引擎 API 以及与Springboot集成实现工作流配置全纪录

    项目中需要用到工作流引擎来设计部分业务流程,框架选型最终选择了 Camunda7,关于 Camunda以及 Activity 等其他工作流 引擎的介绍及对比不再介绍,这里只介绍与现有Springboot项目的集成以及具体使用及配置 流程(PROCESS): 通过工具建模最终生成的BPMN文件,里面有整个流程的定

    2024年02月10日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包