快速上手 TypeScript

news2025/1/21 2:56:35

快速上手 TypeScript

ypeScript 简称 TS ,既是一门新语言,也是 JS 的一个超集,它是在 JavaScript 的基础上增加了一套类型系统,它支持所有的 JS 语句,为工程化开发而生,最终在编译的时候去掉类型和特有的语法,生成 JS 代码。

虽然带有类型系统的前端语言不止 TypeScript (例如 Facebook 推出的 Flow.js ),但从目前整个 开源社区的流行趋势 看, TypeScript 无疑是更好的选择。

常用的 TS 类型定义

原始数据类型
原始数据类型 是一种既非对象也无方法的数据,刚才演示代码里,函数的入参使用的字符串 String 就是原始数据类型之一。
在这里插入图片描述

数组
除了原始数据类型之外, JavaScript 还有引用类型,数组 Array 就是其中的一种。

之所以先讲数组,是因为它在 TS 类型定义的写法上面,可能是最接近原始数据的一个类型了,为什么这么说?还是列个表格,来看一下如何定义数组:

在这里插入图片描述
是吧!就只是在原始数据类型的基础上变化了一下书写格式,就成为了数组的定义!

笔者最常用的就是 string[] 这样的格式,只需要追加一个方括号 [] ,另外一种写法是基于 TS 的泛型 Array ,两种方式定义出来的类型其实是一样的。
举几个例子:

// 字符串数组
const strs: string[] = ['Hello World', 'Hi World']

// 数值数组
const nums: number[] = [1, 2, 3]

// 布尔值数组
const bools: boolean[] = [true, true, false]

在实际的编程过程中,如果的数组一开始就有初始数据(数组长度不为 0 ),那么 TypeScript 也会根据数组里面的项目类型,正确自动帮推导这个数组的类型,这种情况下也可以省略类型定义:

// 这种有初始项目的数组, TS 也会帮推导它们的类型
const strs = ['Hello World', 'Hi World']
const nums = [1, 2, 3]
const bools = [true, true, false]

但是!如果一开始是 [] ,那么就必须显式的指定数组类型(取决于的 tsconfig.json 的配置,可能会引起报错):

// 这个时候会认为是 any[] 或者 never[] 类型
const nums = []

// 这个时候再 push 一个 number 数据进去,也不会使其成为 number[]
nums.push(1)

而对于复杂的数组,比如数组里面的 item 都是对象,其实格式也是一样,只不过把原始数据类型换成 对象的类型 即可,例如 UserItem[] 表示这是一个关于用户的数组列表。

对象(接口)

看完了数组,接下来看看对象的用法,对象也是引用类型,在 数组 的最后提到了一个 UserItem[] 的写法,这里的 UserItem 就是一个对象的类型定义。

如果熟悉 JavaScript ,那么就知道对象的 “键值对” 里面的值,可能是由原始数据、数组、对象组成的,所以在 TypeScript ,类型定义也是需要根据值的类型来确定它的类型,因此定义对象的类型应该是第一个比较有门槛的地方。
如何定义对象的类型#
对象的类型定义有两个语法支持: type 和 interface 。
先看看 type 的写法:

type UserItem = {
  // ...
}

再看看 interface 的写法:

interface UserItem {
  // ...
}

可以看到它们表面上的区别是一个有 = 号,一个没有,事实上在一般的情况下也确实如此,两者非常接近,但是在特殊的时候也有一定的区别。
了解接口的使用
为了降低学习门槛,统一使用 interface 来做入门教学,它的写法与 Object 更为接近,事实上它也被用的更多。
对象的类型 interface 也叫做接口,用来描述对象的结构。

TIP

对象的类型定义通常采用 Upper Camel Case 大驼峰命名法,也就是每个单词的首字母大写,例如 UserItem 、 GameDetail ,这是为了跟普通变量进行区分(变量通常使用 Lower Camel Case 小驼峰写法,也就是第一个单词的首字母小写,其他首字母大写,例如 userItem )。

这里通过一些举例来带举一反三,随时可以在 demo 里进行代码实践。

以这个用户信息为例子,比如要描述 Petter 这个用户,他的最基础信息就是姓名和年龄,那么定义为接口就是这么写:

// 定义用户对象的类型
interface UserItem {
  name: string
  age: number
}

// 在声明变量的时候将其关联到类型上
const petter: UserItem = {
  name: 'Petter',
  age: 20,
}

如果需要添加数组、对象等类型到属性里,按照这样继续追加即可。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Metabase学习教程:仪表盘-2

在仪表板中链接筛选器 链接仪表板中的筛选器,根据另一个筛选器的当前选择限制一个筛选器中可用的选项(内容联动)。 我们先用一个问题设置一个简单的仪表板。这里的目标是设置一个带有两个链接过滤器的仪表板。每个筛选器根据另一个筛选器的…

PIC单片机4——定时器方波

#include <p18cxxx.h>/*18F系列单片机头文件*/ void PIC18F_High_isr(void);/*中断服务函数声明*/ void PIC18F_Low_isr(void); #pragma code high_vector_section0x8 void high_vector (void) { _asm goto PIC18F_High_isr _endasm/*通过一条跳转指令(汇编指令&am…

设备树覆盖:概念与术语

前面我们讲过设备树相关的东西&#xff0c;其实你应该知道。 但是昨天一个FDT当时我还是有点懵。于是再在android的角度我们来看看这个东西。 1、概览 设备树 (DT) 是用于描述“不可发现”硬件的命名节点和属性构成的一种数据结构。 操作系统&#xff08;例如在 Android 中使…

MyBatis是如何为Dao接口创建实现类的

本文是我的MyBatis源码分析专栏中第三节的一小部分&#xff0c;作为试读部分&#xff0c;详细讲述了MyBatis是如何通过动态代理创建Dao接口的实现类的。 专栏地址&#xff1a;MyBatis源码分析 专栏字数:14w 专栏目录&#xff1a; 文章目录SqlSession.getMapper如何设计的&#…

MySQL----存储过程

目录 一、存储过程的介绍 二、存储过程的基本语法 三、变量 &#xff08;1&#xff09;系统变量 &#xff08;2&#xff09;用户自定义变量 &#xff08;3&#xff09;局部变量 四、存储过程的语法详解 &#xff08;1&#xff09;if判断 &#xff08;3&#xff09;条件…

数据要想管理得好,不得不提开源大数据处理解决方案

在很多企业里&#xff0c;内部数据的管理几乎是一团糟的。在大数据时代的环境中&#xff0c;不少企业急需要提升数据管理的效率&#xff0c;因此想通过一些有利途径来实现这一目的。开源大数据处理解决方案就是其中一个有效途径&#xff0c;是助力企业做好数据管理&#xff0c;…

07 ConfigMap/Secret:怎样配置、定制我的应用

文章目录1. ConfigMap/Secret 介绍1.1 为什么kubernets 要使用应用的配置管理&#xff1f;1.2 有什么类别的配置信息&#xff1f;2. 什么是 ConfigMap&#xff1f;2.1 创建ConfigMap模板文件2.1.1 ConfigMap 怎么生成带data 字段的 模板2.2 创建ConfigMap 对象2.3 查看ConfigMa…

傻白入门芯片设计,一颗芯片的诞生(九)

CPU生产和制造似乎很神秘&#xff0c;技术含量很高。许多对电脑知识略知一二的朋友大多会知道CPU里面最重要的东西就是晶体管了&#xff0c;提高CPU的速度&#xff0c;最重要的一点说白了提高主频并塞入更多的晶体管。由于CPU实在太小&#xff0c;太精密&#xff0c;里面组成了…

Java中的多线程如何理解——精简

目录 线程池处理Runnable任务 线程池处理Callable任务 Executors的工具类构建线程池对象 引言 通过前面的学习&#xff0c;我们已经学会了线程是如何创建的以及线程的常用方法&#xff0c;接下来呢&#xff0c;我们将要深入性了解线程中的知识&#xff0c;主要是线程安全&…

基于PHP+MySQL学生信息管理系统的开发与设计

一直以来我国领导人提倡以人为本的治国方案,而大学是未来人才的培养基地,如何能够更好的对学生信息进行管理,是很多高校一直在研究的一个问题,只有更加科学的对学生信息进行管理,才能够更加积极的培养国家的栋梁之才。 本系统是一个学生信息信息管理系统,为了能够更加灵活的对学…

mysql InnoDB 事务的实现原理

前言 关于mysql的InnoDB存储引擎的关键知识点&#xff0c;已经输出了6篇文章了&#xff0c;但是好像阅读量并不大&#xff0c;可能大家都不太喜欢理论性特别强的东西&#xff1f;或者是这些知识点难度有点高&#xff0c;不太容易被接受&#xff1f;不过&#xff0c;我觉得我分享…

【Java实战】工作中并发处理规范

目录 一、前言 二、并发处理规范 1.【强制】获取单例对象需要保证线程安全&#xff0c;其中的方法也要保证线程安全。 2.【强制】创建线程或线程池时请指定有意义的线程名称&#xff0c;方便出错时回溯。 3.【强制】线程资源必须通过线程池提供&#xff0c;不允许在应用中…

数仓数据同步策略

学习内容一、同步策略一、同步策略 数据同步策略的类型包括&#xff1a;全量同步、增量同步、新增及变化同步、特殊情况 全量表&#xff1a;存储完整的数据增量表&#xff1a;存储新增加的数据新增及变化表&#xff1a;存储新增加的数据和变化的数据特殊表&#xff1a;只需要…

定义自定义指令;inserted()、update()

自定义指令的意义&#xff1a;对普通DOM元素进行底层操作&#xff1b; 作用 &#xff1a;可以获取到底层的dom&#xff0c;拿到想要的节点&#xff0c;从而进行操作&#xff1b; 实际应用&#xff1a;可以通过指令知道什么时候dom创建完成&#xff0c;从而进行依赖dom的库的初…

刷爆力扣之有效的山脉数组

刷爆力扣之有效的山脉数组 HELLO&#xff0c;各位看官大大好&#xff0c;我是阿呆 &#x1f648;&#x1f648;&#x1f648; 今天阿呆继续记录下力扣刷题过程&#xff0c;收录在专栏算法中 &#x1f61c;&#x1f61c;&#x1f61c; 该专栏按照不同类别标签进行刷题&#x…

超级浏览器的Cookies实现跨境电商防关联

大家有没有过这种感觉&#xff0c;打开电脑或手机&#xff0c;一些你喜欢的视频&#xff0c;总能一下子打到心巴上;心心念念想要下单的东西&#xff0c;总是不停出现在屏幕上诱惑你下单。你以为网络才是最懂你的人&#xff0c;其实是大数据正在研究你的一举一动。而聊到大数据&…

Cerebral Cortex:疼痛热刺激引起的脑功能网络分离与整合

目前的研究旨在确定热痛期间大脑网络整合/分离的变化&#xff0c;使用高时间分辨率的网络连接事件优化方法。参与者(n 33)主动判断施加于前臂掌侧的热刺激是否疼痛&#xff0c;然后在每次试验后评价温暖/疼痛强度。我们表明&#xff0c;试验中整合/分离的时间演化与疼痛的主观…

Ubuntu中安装Qt

文章目录Ubuntu中安装必要的软件安装流程配置运行配置运行Ubuntu中安装必要的软件 主要为了打开图形程序 sudo apt-get update sudo apt-get --assume-yes upgrade sudo apt-get install --assume-yes xfce4 xorg-dev libopencc2 libopencc2-data unzip zip主要是一些共享lib…

ECU简介

ECU是电子控制单元的简称&#xff0c;广泛用于汽车系统中&#xff0c;是电控系统的神经中枢。本文将以比较基础的方式展开ECU的工作原理。 一、基本结构 ECU主要由CPU、存储器、IO接口、信息传递总线组成。ECU可以把传感器传入的信号用内存程序和数据启动相应的程序&#xff0c…

人工智能:语音识别技术介绍

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&…