【Vue3实战】TypeScript前端实战基础

请添加图片描述

【Vue3实战】TypeScript前端实战基础

  • 前言
  • 一、TypeScript的由来
  • 二、什么是TypeScript?
  • 三、静态类型检查
  • 四、类型注解和类型推导
  • 五、可选参数和默认参数
  • 六、接口和类型别名
    • 接口
    • 接口的可选设置
    • 类型
  • 七、类和继承
    • 接口的继承
    • 交叉类型模拟继承
  • 八、泛型
    • 什么是泛型
    • 泛型接口
    • 泛型函数
    • 泛型约束
  • 九、枚举
  • 十、快速安装
  • 结语

前言

经过多年的全栈开发经验和多种编程语言的开发经验,编程语言的规范的重要性与日俱增

对未来的前端编程而言,TypeScript的比重相信一定会日新月异

所以这边对于TypeScript做一篇比较详细和完整的整理

日后也会逐渐更新和补充。

TypeScript目前版本:5.3

TypeScript官方网站传送门

如果您对前端技术感兴趣的话,可以订阅鄙人的Vue栏目

Vue栏目传送门


一、TypeScript的由来

2010 – 微软团队开始开发
2012 – 第一个公开版本发布(TypeScript 0.8)
2013 – TypeScript 0.9 发布,支持泛型了
2014 – TypeScript 1.0 发布,Visual Studio 2013 默认支持 TypeScript 了。同时,源码从CodePlex 迁移到 Github
2017 – TypeScript 2.1 发布
2018 – TypeScript 3.2 发布

TypeScript 最初是个微软内部项目,叫 Strada,致力于提升大型 JS 项目(当时内部需求是 Bing Maps、 Office Web Apps 甚至 Windows 8 apps)的可靠性和可维护性。2010 年开始开发,2012 年 10 月发布了第一个开源版本,持续迭代至今。

如果想要了解更多关于TypeScript更详尽的历史,可以访问下面传送门。

【TypeScript的前世今生的传送门】

二、什么是TypeScript?

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

2012年10月,微软发布了首个公开版本的TypeScript。

2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript。

当前最新正式版本为TypeScript 5.3, 2024年1月发布。

TypeScript 是具有类型语法的 JavaScript,是一门强类型的编程语言。

在这里插入图片描述


三、静态类型检查

TypeScript 强调变量类型的声明,可以提前发现类型错误,减少运行时的错误。使用类型注解可以明确标识变量的类型,编译器会在编译时进行类型检查。

  let count:number = 100// 上面声明时强调了count为number类型,但下面又把count赋值为string类型// 所以下面这行在TypeScript静态类型检查会报红,在JavaScript中是显示正常的count = '1'

当声明了一个变量为某个数据类型时,再把此变量赋其他数据类型的值

在编译中,静态类型检查会使其报红

但是在运行后,代码还是能如期运行的,也不会报错

这边不建议使用TypeScript语法时,忽略静态类型检查进行编程

这样用TypeScript语法的意义就没有了

编程语言的规范及其重要,这是重中之重!


四、类型注解和类型推导

可以使用类型注解显式声明变量、函数的类型。同时,TypeScript 也会根据上下文进行类型推导,可以根据赋值表达式或者函数返回值自动推断出变量的类型。

  // 类型注解let hey:string = 'tony'// 类型推导let hi = 9527

这边给hey加上了:string注解,强调hey是string类型的变量

变量hi没有强调任何变量,直接赋值了number值9527,该变量hi自动推导为number类型


五、可选参数和默认参数

在函数声明时,可以通过使用 ? 来定义可选参数,还可以在函数参数中给定默认值来定义默认参数。

const test = (a: string, b?: number, c: boolean = false) => {console.log(a)console.log(b)console.log(c)
}test('hey')
// 输出 hey, undefined, false
test('hi', 123)
// 输出 hi, 123, false
test('how', 123, true)
// 输出 how, 123, true

?定义了b为可选参数,这个参数可输入可不输入,不输入时 b = undefined

在定义参数时输入值,如 c:boolean = false,这样参数 c 的默认值就为 false,如果不输入参数,c = false


六、接口和类型别名

可以使用接口(interface)和类型别名(type)来定义自定义类型。接口用于定义对象的结构和属性,类型别名用于为类型定义别名,提高代码可读性。

接口

// 声明一个Person接口
interface Person {name: string,age: number
}// 创建一个类型为接口Person的对象p
const p: Person = {name: 'Tony',age: 18
}

接口的可选设置

interface Person {name: string,age?: number // 可选参数
}

类型

// 声明一个Person类型
type Person = {name: string,age?: number
}const p: Person = {name: 'Tony',
}

七、类和继承

TypeScript 支持类和继承,可以使用关键字 class 来定义类,并且可以使用 extends 关键字继承一个类。

接口的继承

一般不继承写接口代码如下:

// 原价商品类型
interface GoodsType {id: string,price: number
}// 打折商品类型
interface DisGoodsType {id: string,price: number,disPrice: number
}

接口的很多属性是可以进行类型复用的,使用 extends 实现接口继承,实现类型复用

以下代码使用继承实现类型复用,代码如下:

// 原价商品类型
interface GoodsType {id: string,price: number
}// 打折商品类型
interface DisGoodsType extends GoodsType{disPrice: number
}

交叉类型模拟继承

type A = {propA: string
}type B = {propB: number
}type C = A & Bconst obj: C = {propA: 'hey',propB: 9527
}

类型别名配合交叉类型(& 与)可以模拟继承,同样可以实现类型复用


八、泛型

TypeScript 提供了泛型(Generics)的支持,可以在类和函数中使用泛型来增加代码的灵活性和重用性。

什么是泛型

泛型(Generics)是指在定义接口、函数等类型的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性, 使用泛型可以复用类型并且让类型更加灵活。

泛型接口

在接口类型的名称后面使用 < T > 即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型。

interface Goods {id: number,goodName: string
}interface User {name: string,age: number
}// 定义泛型
interface ResData<T> {code: number,msg: string,data: T
}// 定义泛型参数为User
let userData: ResData<User> = {code: 200,msg: 'success',data: {name: 'Tony',age: 18}
}// 定义泛型参数为Goods
let goodsData: ResData<Goods> = {code: 200,msg: 'success',data: {id: 1,goodName: 'iPhone'}
}

找到可变的类型部分通过泛型抽象为泛型参数(定义参数)

在使用泛型的时候,把具体类型传入到泛型参数位置 (传参)

泛型函数

在函数名称的后面使用 < T > 即可声明一个泛型参数,整个函数中(参数、返回值、函数体)的变量都可以使用该参数的类型

const createArray = <T>(len: number, value: T): T[] => {let result = []for (let i = 0; i < len; i++) {result[i] = value}return result
}createArray<string>(4, '100') // ['100','100','100','100']
createArray<number>(4, 100) // [100,100,100,100]

泛型约束

泛型的特点就是灵活不确定,有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性,此时会有类型错误,需要通过泛型约束解决。

// 定义接口
interface lengthObj {// 带有长度字段的接口length: number
}// 泛型约束
function logLen<T extends lengthObj>(obj: T) {console.log(obj.length)
}// 泛型约束(ES6箭头函数写法)
const logLen = <T extends lengthObj>(obj: T) => {console.log(obj.length)
}

九、枚举

枚举(Enum)是一种方便的数据类型,它用于定义一组具有相同类型的常量,并可以给这些常量命名,方便代码中对它们的引用。

代码示例:

enum EnumName {value1 = 1,value2 = 2,value3 = 3
}// 打印结果
console.log(`EnumName.value1: ${EnumName.value1}`)
console.log(`EnumName.value2: ${EnumName.value2}`)
console.log(`EnumName.value3: ${EnumName.value3}`)

浏览器控制台打印结果如下:

在这里插入图片描述

其中,EnumName 为枚举类型的名称,value1、value2、value3 等为枚举常量的名称,1、2、3 等为枚举常量的值。不指定值时,默认从 0 开始自增。

代码示例:

enum Color {Red,Green,Blue
}// 打印结果
console.log(`Color.Red: ${Color.Red}`)
console.log(`Color.Green: ${Color.Green}`)
console.log(`Color.Blue: ${Color.Blue}`)

打印结果:

在这里插入图片描述


十、快速安装

在Node.js环境下

在控制台输入:

npm install -g typescript

在package.json文件中

会新增一个依赖项如下:

  "devDependencies": {"typescript": "^5.3.3"}

结语

Mozilla创造了JavaScript,Microsoft创建了TypeScript,Huawei进一步推出了ArkTS

由于我们中国主力研发团队Huawei的支持,在鸿蒙生态中使用ArkTS作为客户端开发语言

对于学习TypeScript这门语言对于ArkTS有着相辅相成的作用

个人还是比较支持我们国产研发团队推出的语言产品架构

毕竟,我们中国的繁荣富强,才能保证整个社会的安定

在这里插入图片描述
位卑未敢忘忧国,事定犹须待阖棺。

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

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

相关文章

Hgame题解(第一星期)

Hgame题解&#xff08;第一星期&#xff09; Web ezHTTP 打开靶机首先看到题目提示&#xff1a;请从vidar.club访问这个页面 根据http协议&#xff0c;需要创建一个Referer字段&#xff0c;其值设置为vidar.club&#xff08;意思是从该网页跳转到靶机网页的&#xff09;&…

嵌入式系统学习(一)

嵌入式现状&#xff08;UP经历&#xff09;&#xff1a; 大厂的招聘要求&#xff1a; 技术栈总结&#xff1a; 产品拆解网站&#xff1a; 52audio 方案查询网站iotku,我爱方案网&#xff0c; 主要元器件类型&#xff1a;

【android】对于google-webrtc的性能中, memory leak

目录 zlmediakit->webrtcplay->app webrtcutil1/3 测试程序等 zlmediakit->webrtcplay->app 编译sdk 32 有时候会从开始新增5M&#xff0c;就稳定在一个值了 webrtcutil1/3 测试程序等 编译sdk 30

Oracle和Mysql数据库

数据库 Oracle 体系结构与基本概念体系结构基本概念表空间(users)和数据文件段、区、块Oracle数据库的基本元素 Oracle数据库启动和关闭Oracle数据库启动Oracle数据库关闭 Sqlplussqlplus 登录数据库管理系统使用sqlplus登录Oracle数据库远程登录解锁用户修改用户密码查看当前语…

逸学区块链【solidity】真随机数

参考Get a Random Number | Chainlink Documentation 但是很贵&#xff0c;价格 Gas Price&#xff1a;当前gas价格&#xff0c;根据网络状况而波动。Callback gas &#xff1a;返回您所请求的随机值时&#xff0c;回调请求消耗的gas 量。验证gas &#xff1a;量gas 用于验证…

Vue3学习记录(二)--- 组合式API之计算属性和侦听器

一、计算属性 1、简介 ​ 计算属性computed()&#xff0c;用于根据依赖的响应式变量的变化&#xff0c;进行自动的计算&#xff0c;并返回计算后的结果。当依赖的响应式变量发生变化时&#xff0c;computed()会自动进行重新计算&#xff0c;并返回最新的计算结果。如果依赖的…

Map和Set讲解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 集合框架 模型 Set 常见方法和说明 Set总结 Map说明 Map常见方法和说明 Map 中HashMap的 …

Linux一些实用操作

学习笔记&#xff0c;记录以下课程中关于Linux的一些实用操作。黑马程序员新版Linux零基础快速入门到精通&#xff0c;全涵盖linux系统知识、常用软件环境部署、Shell脚本、云平台实践、大数据集群项目实战等_哔哩哔哩_bilibili 目录 1 各类小技巧&#xff08;快捷键&#xff…

天翼数科实在智能,战略合作签约!Agent最大化赋能应用领域

近日&#xff0c;天翼数智科技(北京)有限公司&#xff08;以下简称“天翼数科”&#xff09;与杭州实在智能科技有限公司&#xff08;以下简称“实在智能”&#xff09;签署战略合作协议。 基于本次战略合作&#xff0c;天翼数科将与实在智能发挥各自的专业特长&#xff0c;整合…

在CentOS 7 中配置 YUM源

目录 YUM源的功能&#xff1a; YUM 源的安装过程 ps YUM工具 配置YUM仓库/YUM源 网络源&#xff1a;使用官方源 前提&#xff1a;联网 YUM源的功能&#xff1a; YUM&#xff08;Yellowdog Updater Modified&#xff09;是一个在Red Hat、CentOS、Fedora等基于RPM的Linux发…

Nat Med | 儿童急性淋巴细胞白血病基因组景观中的药物类型

今天给同学们分享一篇实验文章“Pharmacotypes across the genomic landscape of pediatric acute lymphoblastic leukemia and impact on treatment response&#xff0c;这篇文章发表在Nat Med期刊上&#xff0c;影响因子为82.9。 结果解读&#xff1a; 与ALL药物敏感性的临…

C++(17.5)——list模拟实现扩展

在上篇文章中&#xff0c;实现了的大部分功能以及部分迭代器。本片文章将对剩下的功能进行补充。 1. const迭代器&#xff1a; 对于上篇文章中实现的迭代器只能使用于非类型的对象。对于类型的遍历&#xff0c;则需要额外编写类型的迭代器。例如对于下面的场景&#xff1a; …

【持续更新】2024牛客寒假算法基础集训营1题解 | JorbanS

文章目录 [A - DFS搜索](https://ac.nowcoder.com/acm/contest/67741/A)[B - 关鸡](https://ac.nowcoder.com/acm/contest/67741/B)[C - 按闹分配](https://ac.nowcoder.com/acm/contest/67741/C)[E - 本题又主要考察了贪心](https://ac.nowcoder.com/acm/contest/67741/E)[F -…

Unknown custom element:<xxx>-did you register the component correctly解决方案

如图所示控制台发现了爆红&#xff08;大哭&#xff09;&#xff1a; 报错解释&#xff1a; 当我们看到报错时&#xff0c;我们需要看到一些关键词&#xff0c;比如显眼的“component”和“name”这两个单词&#xff0c; 因此我们就从此处切入&#xff0c;大概与组件有关系。…

Spring Boot--07--@Repository 和@Mapper的区别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.Repository的作用1.1 含义1.2 Repository与Service和Component有什么区别&#xff1f;1.3 使用场景单独使用Repository&#xff0c;需要配合使用MapperScannerCon…

深度学习的新前沿:突破、应用与挑战

引言 深度学习的快速发展已经在人工智能领域引起了革命性的变化。作为模仿人脑结构和功能的强大工具&#xff0c;深度神经网络在图像识别、自然语言处理、医学诊断等多个领域取得了显著成就。但是&#xff0c;随着技术的不断推进&#xff0c;深度学习也在不断地进化和扩展其能…

云上自动部署丨使用 Terraform 在 AWS 上搭建 DolphinDB

HashiCorp Terraform 是一款基础架构即代码工具&#xff0c;旨在实现 "Write, Plan, and Create Infrastructure as Code"。它通过配置文件来描述云资源的拓扑结构&#xff0c;包括虚拟机、存储账户和网络接口。Terraform 几乎支持市面上所有的云服务&#xff0c;能够…

一键部署FC超级马里奥web游戏

效果展示 安装 拉取镜像 #拉取镜像 docker pull stayhungrystayfoolish666/mario #创建并启动容器 docker run -d -p 10034:8080 --name maliao --restartalways stayhungrystayfoolish666/mario:latest 使用 浏览器打开 http://你的ip:10034/

C++ //练习 4.5 写出下列表达式的求值结果。

C Primer&#xff08;第5版&#xff09; 练习 4.5 练习 4.5 写出下列表达式的求值结果。 ( a ) -30 * 3 21 / 5 ( b ) -30 3 * 21 / 5 ( c ) 30 / 3 * 21 % 5 ( d ) -30 / 3 * 21 % 4 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;…

CSS实现文字大小自适应

遇到的问题&#xff1a; 在写页面的时候&#xff0c;兼容手机和PC页面&#xff0c;这样字体大小就需要根据页面的大小进行动态变化。 解决方法&#xff1a; clamp()函数 clamp() 函数的作用是把一个值限制在一个上限和下限区间&#xff0c;当这个值超过区间范围时&#xff0c;…