深入浅出 Typescript

news2024/9/24 11:40:49

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

文章目录

  • 1 TypeScript VS JavaScript
  • 2 TypeScript基础
    • 2.1 TS基础-基础类型
    • 2.2 TS基础-函数类型
    • 2.3 TS基础-interface
    • 2.4 TS基础-类
  • 3 TypeScript 进阶
    • 3.1 TS进阶-高级类型
    • 3.2 TS进阶-泛型-什么时候需要泛型?
    • 3.3 TS进阶-泛型-什么时候需要泛型?
    • 3.4 TS进阶-泛型-基本使用
    • 3.5 TS进阶-泛型工具类型-基础操作符
    • 3.6 TS进阶-泛型工具类型-常用工具类型
  • 4 TypeScript 实战
    • 4.1 TS实战-声明文件
    • 4.2 TS实战-泛型约束后端接口类型

1 TypeScript VS JavaScript

在这里插入图片描述

TypeScriptJavaScript
JavaScript 的超集,用于解决大型项目的代码复杂性一种脚本语言,用于创建动态网页
强类型,支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋值成不同类型

2 TypeScript基础

2.1 TS基础-基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple
// 举个例子
function test(x:string | number):boolean {
    if (typeof x === 'string') {
        return true;
    } else if (typeof x === 'number') {
        return false;
    }
    return throwError('参数格式不对');
}

function throwError(message:string):never {
    throw new Error(message);
}

2.2 TS基础-函数类型

定义:TS定义函数类型时要定义输入参数类型和输出类型

输入参数:参数支持可选参数和默认参数

输出参数:输出可以自动推断,没有返回值时,默认为 void 类型

函数重载:名称相同但参数不同,可以通过重载支持多种类型

function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any {
    if (typeof x[0] === 'string') {
        return x.join()
    }
    if (typeof x[0] === 'number') {
        return x.reduce((acc,cur) => acc + cur)
    }
}

2.3 TS基础-interface

定义:接口是为了定义对象类型

特点:

  • 可选属性:?
  • 只读属性:readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结:接口非常灵活duck typing

interface RandomKey {
    [propName:string]:string
}

const obj:RandomKey = {
    a:'hello',
    b:'world',
    c:'typescript',
}

2.4 TS基础-类

定义:写法和JS差不多,增加了一些定义

特点:

  • 增加了 public、private、protected 修饰符
  • 抽象类:
    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface:约束类,使用implements关键字

3 TypeScript 进阶

3.1 TS进阶-高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名(type VS interface)
    • 定义:给类型起个别名
    • 相同点:
      1. 都可以定义对象或函数
      2. 都允许继承
    • 差异性
      1. interface是TS用来定义对象,type是用来定义别名方便使用;
      2. type可以定义基本类型,interface:不行;
      3. interface可以合并重复声明,type不行;

3.2 TS进阶-泛型-什么时候需要泛型?

官方定义:

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。

组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,

一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

有点晦涩,还是举个栗子。

3.3 TS进阶-泛型-什么时候需要泛型?

在这里插入图片描述

3.4 TS进阶-泛型-基本使用

基本定义:

  1. 泛型的语法是◇里面写类型参数,一般用T表示;
  2. 使用时有两种方法指定类型:
    1. 定义要使用的类型
    2. 通过TS类型推断,自动推导类型
  3. 泛型的作用是临时占位,之后通过传来的类型进行推导;
function print<T>(arg:T):T {
    console.lLog(arg)
    return arg
}
print<string>('hello')  // 定义T为string
print('hello')  // TS类型推断,自动推导类型为string

3.5 TS进阶-泛型工具类型-基础操作符

在这里插入图片描述

3.6 TS进阶-泛型工具类型-常用工具类型

  • Partials:将类型属性变为可选
  • Required:将类型属性变为必选
  • Readonly.:将类型属性变为只读
  • Pick、Record…
type Partials<T> ={
    [P in keyof T]?:T[P];
};

type Required<T> = {
    [P in keyof T]-?:T[P]
};

type Readonly<T> = {
    readonly [P in keyof T]:T[P];
};

4 TypeScript 实战

4.1 TS实战-声明文件

  • declare:三方库需要类型声明文件
  • .dts:声明文件定义
  • @types:三方库TS类型包
  • tsconfig.json:定义TS的配置

4.2 TS实战-泛型约束后端接口类型

在这里插入图片描述

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

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

相关文章

AtcoderABC226场

A - Round decimalsA - Round decimals 题目大意 给定一个实数X&#xff0c;它最多可以使用三位小数表示&#xff0c;而且X的小数点后有三位小数。将X四舍五入到最接近的整数并打印结果。 思路分析 可以使用round函数进行四舍五入 知识点 round(x) 是一个用来对数字进行四…

SpringIoc-个人学习笔记

Spring的Ioc、DI、AOP思想 Ioc Ioc思想&#xff1a;Inversion of Control&#xff0c;控制反转&#xff0c;在创建Bean的权利反转给第三方 DI DI思想&#xff1a;Dependency Injection&#xff0c;依赖注入&#xff0c;强调Bean之间的关系&#xff0c;这种关系由第三方负责去设…

Redis 报错 RedisConnectionException: Unable to connect to x.x.x.x:6379

文章目录 Redis报错类型可能解决方案 Redis报错类型 org.springframework.data.redis.connection. spingboot调用redis出错 PoolException: Could not get a resource from the pool; 连接池异常:无法从池中获取资源; nested exception is io.lettuce.core. 嵌套异常 RedisConn…

针对高可靠性和高性能优化的1200V碳化硅沟道MOSFET

目录 标题&#xff1a;1200V SiC Trench-MOSFET Optimized for High Reliability and High Performance摘要信息解释研究了什么文章创新点文章的研究方法文章的结论 标题&#xff1a;1200V SiC Trench-MOSFET Optimized for High Reliability and High Performance 摘要 本文详…

FPGA----UltraScale+系列的PS侧与PL侧通过AXI-HP交互(全网唯一最详)附带AXI4协议校验IP使用方法

1、之前写过一篇关于ZYNQ系列通用的PS侧与PL侧通过AXI-HP通道的文档&#xff0c;下面是链接。 FPGA----ZCU106基于axi-hp通道的pl与ps数据交互&#xff08;全网唯一最详&#xff09;_zcu106调试_发光的沙子的博客-CSDN博客大家好&#xff0c;今天给大家带来的内容是&#xff0…

获取k8s scale资源对象的命令

kubectl get --raw /apis/<apiGroup>/<apiVersion>/namespaces/<namespaceName>/<resourceKind>/<resourceName>/scale 说明&#xff1a;scale资源对象用来水平扩展k8s资源对象的副本数&#xff0c;它是作为一种k8s资源对象的子资源存在&#xf…

This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in...错误解决

在创建函数的时候报错如下&#xff1a; 解决&#xff1a; 设置如下参数即可 SET GLOBAL log_bin_trust_function_creatorsTRUE;

[CKA]考试之PersistentVolumeClaims

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 创建一个名字为pv-volume的pvc&#xff0c;指定storageClass为csi-hostpath-…

面试热题(打家窃舍)

一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响小偷偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房屋存放金额的非负…

宋浩概率论笔记(三)随机向量/二维随机变量

第三更&#xff1a;本章的内容最重要的在于概念的理解与抽象&#xff0c;二重积分通常情况下不会考得很难。此外&#xff0c;本次暂且忽略【二维连续型随机变量函数的分布】这一章节&#xff0c;非常抽象且难度较高&#xff0c;之后有时间再更新。

Linux系统部署Python语言开发运行环境

目录 Ubuntu自带python Debian安装python 安装 pip 库列表 安装第三方库 使用国内镜像站 实装 tkinter 库 编写运行代码 测试代码1 1. 创建项目 2. 创建源码文件 3. 写入源代码 4. 修改权限 5. 运行代码 测试代码2 本文的使用环境是Windows的Linux 子系统&…

Opencv-C++笔记 (14) : 霍夫变换(直线、圆)

文章目录 一、霍夫变换-直线1.1霍夫变换-直线 原理详解 二、霍夫圆检测 一、霍夫变换-直线 Hough Line Transform用来做直线检测 前提条件 – 边缘检测已经完成 1、平面空间&#xff08;x,y&#xff09;到极坐标空间转换&#xff1b; 2、对极坐标进行变换&#xff0c;转化为…

作为软件工程师成为全职创作者:有争议的建议

我以写作为生&#xff0c;全职。我的通讯是Substack上排名第一的付费技术通讯&#xff0c;我是一个全职的创作者。 随着远程工作在科技领域变得越来越普遍&#xff0c;我收到越来越多的人发来同样的问题&#xff1a;他们怎么能像我一样&#xff1f; 尽管我被认为是一个成功的…

Linux 匿名页的生命周期

目录 匿名页的生成 匿名页生成时的状态 do_anonymous_page缺页中断源码 从匿名页加入Inactive lru引出 一个非常重要内核patch 匿名页何时回收 本文以Linux5.9源码讲述 匿名页的生成 用户空间malloc/mmap(非映射文件时&#xff09;来分配内存&#xff0c;在内核空间发生…

NodeJS原型链污染ctfshow_nodejs

文章目录 NodeJS原型链污染&ctfshow_nodejs前言0x01.原型与原型链0x02.prototype和__proto__分别是什么&#xff1f;0x03.原型链继承不同对象的原型链* 0x04.原型链污染原理0x05.merge()导致原型链污染0x06.ejs模板引擎RCEejs模板引擎另一处rce 0x07.jade模板引擎RCE【ctfs…

HCIP——STP

STP 一、STP概述二、二层环路带来的问题1、广播风暴问题2、MAC地址漂移问题3、多帧复制 三、802.1D生成树STP的BPDU1、配置BPDU2、RPC3、COST4、配置BPDU的工作过程5、TCN BPDU6、TCN BPDU的工作原理 四、STP的角色五、STP角色选举六、STP的接口状态七、接口状态的迁移八、STP的…

web集群学习:源码安装nginx配置启动服务脚本

1、源码安装nginx&#xff0c;并提供服务脚本。 1、源码安装会有一些软件依赖 &#xff08;1&#xff09;检查并安装 Nginx 基础依赖包 pcre-devel 、openssl-devel # rpm -qa | egrep pcre-devel | openssl-devel&#xff08;2&#xff09;安装 Nginx 所需的 pcre 库 正则支…

STM32入门学习之定时器中断

1.STM32的通用定时器是可编程预分频驱动的16位自动装载计数器。 STM32 的通用定时器可以被用于&#xff1a;测量输入信号的脉冲长度 ( 输入捕获 ) 或者产生输出波 形 ( 输出比较和 PWM) 等。 使用定时器预分频器和 RCC 时钟控制器预分频器&#xff0c;脉冲长度和波形 周…

分治法、回溯法与动态规划

算法思想比较 回溯法&#xff1a;有“通用解题法”之称&#xff0c;用它可以系统地搜索问题的所有解。回溯法是按照深度优先搜索(DFS)的策略&#xff0c;从根结点出发深度探索解空间树分治法&#xff1a;将一个难以直接解决的大问题&#xff0c;分割成一些规模较小的相同问题&…

PCIE链路信息

目录 简介&#xff1a; 目的&#xff1a; 详情&#xff1a; 简介&#xff1a; PCIe有很多寄存器&#xff0c;也有很多控制&#xff0c;包括链路状态信息&#xff0c;上一节我们讲到了PCie的链路训练&#xff0c;这节文章将继续学习PCIe相关知识。 目的&#xff1a; 从设计…