当前位置: 首页 > news >正文

TypeScript React(上)

目录

扩展学习资料

TypeScript设计原则

TypeScript基础

语法基础

变量声明

JavaScript声明变量

 TypeScript声明变量

示例

接口 (标准类型-Interface)

 类型别名-Type

接口 VS 类型别名

类型断言:欺骗TS,肯定数据符合结构

泛型、<大写字母>


扩展学习资料

名称

链接

备注

TypeScript 官方文档

TypeScript: Documentation - TypeScript for the New Programmer

英文(中文翻译稍显落后)

中文文档

基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集

搭配英文一起看

TypeScript 入门教程

TypeScript 入门教程

相对比较好入门的文档

更好的理解 TS 泛型

https://medium.com/@rossbulat/typescript-generics-explained-15c6493b510f

英文

TypeScript(静态类型更适合管理复杂的应用)更严格、更高效的JavaScript(动态类型的编程语言)

TypeScript设计原则

  • 静态识别可能出现错误的代码结构。
  • 为大型应用的代码提供结构化的机制。
  • 不增加程序运行时开销,保留JavaScript运行时行为这一特性。
  • 语言层面提供可组合性、可推理性。
  • 语法层面保持和ECMAScript提案一致。
  • 不增加额外的表达式层面的语法。

TypeScript基础

语法基础

TS是JS超集

  1. 全平台支持
  2. 静态类型检测
  3. 可选的静态类型
  4. ES6(浏览器层面对domAPI 的支持)
  5. DOM支持
  6. 面向对象

变量声明

JavaScript声明变量
var name = '';
const money = 120;
const bool = true;
 TypeScript声明变量
const name: string = '';
const money: number = 120;
const bool: boolean = true;
示例
// number数组
let list: number[] = [1,2,3];
let list2: Array<number> = [1,2,3];
// 元组类型
let complexVar: [number, string] = [1, '云'];//第一个只能是number, 第二个只能是string
// 枚举,从默认value:0开始
enum DateEnum {
// 0    1     2       3     4Mon, Tues, Wednes, Thurs, Fri
};
let data: DateEnum = DateEnum.Mon;
// 空类型void,通常用在函数没有返回值时使用
// 箭头函数() => void =
let setValue: () => void = () => {list2 = [2,3];
};
// 普通函数:void
let otherSetValue = function otherSetValue(): void {complexVar = [2,'云2'];
};
// 不确定类型
let simpleVar: any;
simpleVar = 3;
simpleVar = '云3';
// null空对象
// undefined 未定义类型
// never 永不存在值的类型, try catch(): never{}

接口 (标准类型-Interface)

// 标准类型-Interface
// 在面向对象语言中,接口(interfaces)是一个很重要的概念,
//它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
// TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,
//也常用于对模型[Shape]进行描述。
// 接口定义一个数据结构
interface IProps {// 书写习惯:定义类型接口通常名字I开头name: string,gender: number,address: string,
}
const staff: IProps = {name: 'xiaoYun'gender: 1,address: 'beijing'
}
function register(): IProps {return {name: 'xiaoBai'gender: 2,address: 'shanghai'   }
}

 类型别名-Type

// 类型别名-Type
// 类型别名用来给一个类型起个新名字。
// 字符串字面量类型用来约束取值只能是某几个字符串中的一个。
// type 可以扩展,但是不能继承
type Props {name: string,gender: number,address: string,
}
const staff: Props = {name: 'xiaoYun'gender: 1,address: 'beijing'
}
function register(): Props {return {name: 'xiaoBai'gender: 2,address: 'shanghai'   }
}

接口 VS 类型别名

接口:

  • 可以继承,可以多态。接口的实现需要implements,接口可以继承。
  • 既是‘抽象’也是‘约束’。
  • 优先使用。

类型别名:

  • 只是类型的别名,没有创建新类型。扩展通过‘ &’实现。
  • 主要是约束作用,早起TypeScript主要用作函数、对象的约束。

类型断言:欺骗TS,肯定数据符合结构

// TypeScript允许你覆盖它的推断,并且能以你任何你想要的方式分析它,这种机制被称为【类型断言】。
// 通常用来手动指定一个值的类型。
// JSX不能使用'<>'
interface Hello {sayHello: () => void,name: string,
}
const a = {};
a.name = '1234'// 此时ts报错不存在属性name
a.sayHello()// 不存在sayHello方法// 类型断言1
const a = <Hello>{};
// 类型断言2
const b = {} as Hello;

泛型<T>、<大写字母>

扩展组件和方法的复用型,不与any等同,存在约束性

interface IGProps {setName:<T>(str: T) => void
}
const nameWrapper: IGProps = {//<T>声明(str:T使用)setName:<T>(str:T) => {const userNameArr2: T[] = [];userNameArr2.push(str);    },
};
nameWrapper.setName('yun');
nameWrapper.setName(1234);

相关文章:

TypeScript React(上)

目录 扩展学习资料 TypeScript设计原则 TypeScript基础 语法基础 变量声明 JavaScript声明变量 TypeScript声明变量 示例 接口 (标准类型-Interface) 类型别名-Type 接口 VS 类型别名 类型断言:欺骗TS&#xff0c;肯定数据符合结构 泛型、<大写字母> 扩展学习…...

Linux 安全 - LSM源码分析

文章目录 前言一、简介1.1 DAC 和 MAC1.2 LSM 调用流程图 二、LSM相关数据结构2.1 struct security_hook_list2.2 union security_list_options2.3 structure security_hook_heads 三、security_bprm_check四、LSM 源码分析3.1 early_security_init3.2 security_init3.2.1 secu…...

第一次汇报相关问题

深度学习现在已经学习到了Mini-Batch&#xff0c;early-stop等针对特定场景优化的算法了。 代码已经实现了一个L层的神经网络的构建了 论文看了一些综述 主要思考的两个方向&#xff1a;云计算和嵌入式 云计算&#xff1a;分布式机器学习、联邦学习、服务器负载均衡等 嵌入式&…...

[产品体验] GPT4识图功能

[产品体验] GPT4识图功能 图片配文字超强的OCR能力知识问答多图解释 打开chatgpt的时候突然发现能用识图了&#xff0c;赶紧去体验一下&#xff0c;大大的震撼… 图片配文字 超强的OCR能力 我传上去的图片并不清晰… 还能准确识别&#xff0c;orz &#xff01; 知识问答 多…...

《3D 数学基础》几何检测-最近点

目录 1. 直线上的最近点 2. 射线上的最近点 3. 点到平面的距离 4. 圆或球上的最近点 5. AABB上的最近点 1. 直线上的最近点 q是距离q的最近点&#xff0c;也就是q在直线上的投影。 其中p是直线上的点&#xff08;向量表示&#xff09;&#xff0c;n是直线的法向量&#x…...

动态规划 -背包问题-详解

问题 注&#xff1a;大佬对此类问题的解法&#xff1a;动态规划背包问题总结 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保证答案符合 32 位整数范围。 示例 1&#xff…...

Bootstrap-- 媒体特性

最大、最小宽度例子&#xff1a; 横屏与竖屏例子&#xff1a; 宽度比与像素比例子&#xff1a;...

c# 用非递归的写法实现递归

最近写代码碰到了一个bug&#xff0c;就是递归次数太多爆堆栈了&#xff0c;然后就写了一个递归工具来解决这个问题。 using System; using System.Collections.Generic;/// <summary> /// 递归工具 /// </summary> public static class RecursionTool {//递归方式…...

nginx之location的优先级和nginx的重定向

一、nginx之location的优先级和匹配方式&#xff08;重点&#xff09; &#xff08;一&#xff09;nginx的正则表达式 nginx的正则表达式 符号 含义 ^ 字符串的起始位置&#xff08;以什么开头&#xff09; $ 字符串的结束位置&#xff08;以什么结尾&#xff09; * 匹…...

【计算机网络】——前言计算机网络发展的历程概述

主页点击直达&#xff1a;个人主页 我的小仓库&#xff1a;代码仓库 C语言偷着笑&#xff1a;C语言专栏 数据结构挨打小记&#xff1a;初阶数据结构专栏 Linux被操作记&#xff1a;Linux专栏 LeetCode刷题掉发记&#xff1a;LeetCode刷题 算法&#xff1a;算法专栏 C头…...

eventfd

1. #include <sys/eventfd.h> int eventfd(unsigned int initval, int flags); //创建eventfd 参数含义&#xff1a; initval&#xff1a;创建eventfd时它所对应的64位计数器的初始值&#xff1b; flags&#xff1a;eventfd文件描述符的标志&#xff0c;可由三种选项组…...

BES耳机空间音频技术实现

BES耳机空间音频技术实现 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?加我微信hezkz17, 本群提供音频技术答疑服务 音响和耳机在空间音频技术上实现方式是不同的 虚拟现实可谓是空间音频技术最具代表性的应 用领域。虽然虚拟现实的起源可以追溯到1 9 6 8年, …...

day27--AJAX(bootstrap之modal,toast;接口文档的一些用法;AJAX原理)

目录 Bootstrap之Modal&#xff1a; 显示和隐藏方法 通过自定义属性&#xff1a; 使用JS来控制弹框&#xff1a; Bootstrap之Toast&#xff1a; 接口文档一些用法&#xff1a; 删除图书&#xff1a; 图片上传&#xff1a; 图片上传步骤&#xff1a; 修改头像&#xf…...

【ArcGIS Pro二次开发】(70):杂七杂八的记录

本文用于记录一些使用频率较高但归类繁杂&#xff0c;非系统性的一些代码。 主要方便自己使用和查阅&#xff0c;随时更新。 1、从GDB数据库中打开【FeatureDataset\FeatureClass\Table】 using Geodatabase gdb new Geodatabase(new FileGeodatabaseConnectionPath(new Uri…...

竞赛选题 深度学习 机器视觉 人脸识别系统 - opencv python

文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 人脸识别系统 该项目…...

【工具】SSH端口转发管理器,专门管理SSH Port Forwarding

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 开源代码看这里&#xff1a;http://xfxuezhang.cn/index.php/archives/1151/ 背景介绍 有时候需要用到ssh的端口转发功能。目前来说&#xff0c;要么是cmd里手敲指令&#xff0c;但每次敲也太麻烦了&#xff1b;或…...

opencv-phase 函数

计算梯度强度和方向 梯度的方向与边缘的方向总是垂直的。图像中的边缘可以指向各个方向&#xff0c;通常会取水平&#xff08;左、右&#xff09;、垂直&#xff08;上、下&#xff09;、对角线&#xff08;左上、右上、左下、右下&#xff09;等八个不同的方向计算梯度。 角度…...

44.ES

一、ES。 &#xff08;1&#xff09;es概念。 &#xff08;1.1&#xff09;什么是es。 &#xff08;1.2&#xff09;es的发展。 es是基于lucene写的。 &#xff08;1.3&#xff09;总结。 es是基于lucene写的。 &#xff08;2&#xff09;倒排索引。 &#xff08;3&#xf…...

分权分域有啥内容?

目前的系统有什么问题&#xff1f; 现在我们的系统越来越庞大&#xff0c;可是每一个人进来的查看到的内容完全一样&#xff0c;没有办法灵活的根据不同用户展示不同的数据 例如我们有一个系统&#xff0c;期望不同权限的用户可以看到不同类型的页面&#xff0c;同一个页面不…...

6.Docker搭建RabbitMQ

1、端口开放 如果在云服务上部署需在安全组开通一下端口&#xff1a;15672、5672、25672、61613、1883。 15672(UI页面通信口)、5672(client端通信口)、25672(server间内部通信口)、61613(stomp 消息传输)、1883(MQTT消息队列遥测传输)。 2、安装镜像 docker pull rabbitmq 3、…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...