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);

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

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

相关文章

IDEA 配置 云服务器远程部署

目录 参考资料远程部署与远程开发远程连接配置配置成功&#xff1a;同步文件自动更新文件配置自动更新文件参数调整正确运行问题1&#xff1a;运行mvn spring-boot:run之后一直卡在第一条下载问题2&#xff1a;运行成功后访问不到问题3&#xff1a;无法配置远程开发 参考资料 …

4.springcloudalibaba sentinel v1.8.6版本服务搭建

文章目录 前言一、sentinel服务端安装1.1 服务端下载1.2 启动sentinel服务 二、客户端使用sentinel2.1.pom增加sentinel包2.2 增加配置2.3 启动服务 三、验证3.1 给hello接口增加流控规则3.2 测试结果如下 总结 前言 前面完成了gateway项目部署并且测试&#xff0c;现在部署搭…

springboot vue 部署至Rocky(Centos)并自启,本文部署是若依应用

概述 1、安装nohup&#xff08;后台进程运行java&#xff09; 2、安装中文字体&#xff08;防止中文乱码&#xff09; 3、安装chrony&#xff08;保证分布式部署时间的一致性&#xff09; 5、安装mysql数据&#xff0c;迁移目录&#xff0c;并授权自启动&#xff1b; 6、安…

C语言--以pthread为例建立一个h文件测试代码

pthread 1、新建一个demoC CMakeLists.txt加入依赖 target_link_libraries(demoC -pthread) 2、依赖 #include <pthread.h> #include <stdio.h> 3、定义头文件 pthread_test.h 头文件中定义函数 #include <pthread.h> #include <stdio.h> void *thre…

UI自动化测试:Selenium+PO模式+Pytest+Allure整合

本人目前工作中未涉及到WebUI自动化测试&#xff0c;但为了提升自己的技术&#xff0c;多学习一点还是没有坏处的&#xff0c;废话不多说了&#xff0c;目前主流的webUI测试框架应该还是selenium&#xff0c;考虑到可维护性、拓展性、复用性等&#xff0c;我们采用PO模式去写我…

基于Dockerfile搭建LNMP环境

准备工作 #关闭防火墙和防护机制 systemctl stop firewalld systemctl disable firewalld setenforce 0 docker network create --subnet172.18.0.0/16 --opt "com.docker.network.bridge.name""docker1" mynetwork#设置自定义网络模式&#xff0c;模…

计算机网路之https相关

1、基础 https并不是一个单独的协议&#xff0c;只是在http的基础上用TLS/SSL进行加密。SSL是TLS的前身&#xff0c;都是加密协议&#xff0c;现在绝大部分浏览器都是支持TLS。 2、https的加密方式 &#xff08;1&#xff09;对称加密&#xff0c;双方使用同样的加密和解密规则…

力扣:611. 有效三角形的个数

今日为大家分享一道力扣611有效三角形的个数&#xff01;本文将会为大家为大家讲解题目&#xff0c;然后算法思路&#xff0c;最后再进行代码的实现&#xff01;希望看完本文能对读者有一定的收获&#xff01; 一、题目描述 通过题目的描述可以看出&#xff0c;意思是给定一个…

Go If流程控制与快乐路径原则

Go if流程控制与快乐路径原则 文章目录 Go if流程控制与快乐路径原则一、流程控制基本介绍二、if 语句2.1 if 语句介绍2.2 单分支结构的 if 语句形式2.3 Go 的 if 语句的特点2.3.1 分支代码块左大括号与if同行2.3.2 条件表达式不需要括号 三、操作符3.1 逻辑操作符3.2 操作符的…

Linux:redis的基础操作

redis介绍&#xff0c;安装和性能测试 Linux&#xff1a;redis数据库源码包安装-CSDN博客https://blog.csdn.net/w14768855/article/details/133752744?spm1001.2014.3001.5501如果没有了解过redis那么一定要去看看介绍 登录 redis-cli 可以登录到本机127.0.0.1&#xff0c;…

C++学习——静态成员变量、静态成员函数

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 一、静态成员变量详解 1、被static修饰 1不同的对象占用不同的内存&#xff0c;这使得不同对象的成员变量相互独立&#xff0c;因此它们的值不受其他对象的影响。例如有两个相同类型…

没用的知识增加了,尝试用文心实现褒义词贬义词快速分类

尝试用文心实现褒义词贬义词快速分类 一、我的需求二、项目环境搭建千帆SDK安装及使用流程 三、项目实现过程创建应用获取签名调用接口计算向量积总结 百度世界大会将于10月17日在北京首钢园举办&#xff0c;今天进入倒计时五天了。通过官方渠道的信息了解到&#xff0c;这次是…

Jmeter连接mysql数据库详细步骤

一、一般平常工作中使用jmeter 连接数据库的作用 主要包括&#xff1a; 1、本身对数据库进行测试&#xff08;功能、性能测试&#xff09;时会需要使用jmeter连接数据库 2、功能测试时&#xff0c;测试出来的结果需要和数据库中的数据进行对比是否正确一致。这时候可以通过j…

XML外部实体注入攻击XXE

xml是扩展性标记语言&#xff0c;来标记数据、定义数据类型&#xff0c;是一种允许用户对自己的标记语言进行定义的源语言。XML文档结构包括XML声明、DTD文档类型定义&#xff08;可选&#xff09;、文档元素&#xff0c;一般无法直接打开&#xff0c;可以选择用excl或记事本打…

内存空间的分配与回收之连续分配管理方式

1.连续分配管理方式 连续分配:指为用户进程分配的必须是一个连续的内存空间。 1.单一连续分配 在单一连续分配方式中&#xff0c;内存被分为系统区和用户区。系统区通常位于内存的低地址部分&#xff0c;用于存放操作系统相关数据;用户区用于存放用户进程相关数据。内存中只…

BES耳机空间音频技术实现

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

2023年淘宝天猫双11活动时间什么时候开始到几月几号结束?

2023年淘宝天猫双11超级红包领取时间 第一阶段&#xff1a;2023年10月24日20:00 至11月03日23:59 第二阶段&#xff1a;2023年11月04日00:00 至 11月11日23:59 2023年淘宝天猫双11超级红包使用时间 第一阶段&#xff1a;2023年10月31日20:00 至11月03日23:59 第二阶段&…

字符串左旋 与 字符串旋转结果

字符串左旋 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 方法1 三步翻转法 要求:abcdef 左旋两个 整体逆序:fedcba左边逆序:cdef ba右边逆序:cdef ab #include<stdio.h> #include<…

Xcode 14.3.1build 报错整理

1、Command PhaseScriptExecution failed with a nonzero exit code 2、In /Users/XX/XX/XX/fayuan-mediator-app-rn/ios/Pods/CocoaLibEvent/lib/libevent.a(buffer.o), building for iOS Simulator, but linking in object file built for iOS, file /Users/XX/XX/XX/fayuan…

微服务设计原则:构建弹性和可维护的应用

文章目录 1. 单一职责原则2. 独立性和自治性3. 弹性和容错性4. API 网关5. 日志和监控6. 版本管理7. 自动化部署和持续集成8. 安全性9. 数据一致性10. 文档和通信拓展思考结论 &#x1f389;欢迎来到架构设计专栏~微服务设计原则&#xff1a;构建弹性和可维护的应用 ☆* o(≧▽…