typescript 的基本用法说明

声明数组的两种方式
let x1: number[];
x1 = [1, 2, 3];  // 方式1
let x2: Array<number> = [1, 2, 3]; // 泛型

元组的含义
let x3: [string, number]; // 确定数量和类型 
x3 = ['12', 10];

枚举
enum Color {  // 默认从0开始编码 ,或者从第一个数字开始递增
    Red,
    Green,
    Blue
}


enum Color2 {
    Red = 1,
    Green,
    Blue
}

let c2 = Color2[2]; // Green 获得key 

any的使用
// any使用不清楚具体类型 如用户输入或第三方库
let a: any = 11; // 直接通过类型检查

void 的使用
// void 没有任何类型 如函数返回值

function getMsg(): void {
    return null || undefined; // void 可以返回null和undefined
}

null 和underfined
// null 和 undefined是所有类型的子类
let a: number = null; // 正常 但是指定strictNullChecks null和undefined只能赋值给自己
let b: number | null = null; // 此时可以使用联合类型

never 的使用
// never 永不存在的值的类型 总是会抛出异常或根本不会有返回值的函数的返回值类型。
// 变量也可以是never 被永不为真的类型约束
function errorFunc(): never {
    throw new Error('test');
}

function fail(): never {
    return errorFunc(); // 返回一个不会有返回值的函数执行
}

function loopFunc(): never {
    while (true) {} // 无限循环
}

类型断言
// 类型断言 更了解某个值的详细信息 类似类型转换 只是编译起作用

let something = 'abs';
let strL: number = (<string>something).length; // <> 方式一
let strL2: number = (something as string).length; // as 方式二

解构赋值声明
解构
let arr = [1, 2];
let [a1, b1] = arr; // 解构数组 用的多的是解构对象 两边解构一致

function test2([first, second]: [number, number]) {} // 参数结构定义类型 前一个是参数 后一个是类型
test2([a1, b1]); // 传参必须是两个不能多个
test2(arr);

let obj = { a: 1, b: 2 };
let { a: obj1, b: obj2 }: { a: number; b?: number } = obj; // 重命名  后面的才是进行类型定义

function test3({ a = 1, b = 2 } = {}): void {} // 双重默认值 右边是没传参的默认值 左边是传参了但是某个字段没定义的默认值

rest声明
let [first, ...rest] = [1, 2, 3, 4];
console.log(first);
console.log(rest); // [2,3,4] // 数组

let [m, , d, , e] = [1, 2, 3, 4, 5]; // 还可以空着

let obj3 = { a4: 1, b: 2 };
let obj4 = { ...obj3, a4: 1 }; // 从左往右处理,后面覆盖前面 展开仅可枚举 如obj里有方法则会丢失

只读属性
// 只读属性 只允许在初始的时候修改
interface ReadelonlyObj {
    readonly x: number;
    readonly y: number;
}

let readObj: ReadelonlyObj = { x: 10, y: 30 };
readObj.x = 50; // ERROR


let readArr = [1, 2, 3, 34, 45];
let ro: ReadonlyArray<number> = readArr; // 只读数组
// ro不可重设置 不可扩展

字面量类型检查
interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig) {
    // ...
}
let mySquare = createSquare({ colour: 'red', width: 100 }); // Error 对象字面量会经过特殊检查 不能存在目标类型不存在属性 

let sqare = { colour: 'red', width: 100 };
createSquare(sqare); // 正确检查 方法1
createSquare({ colour: 'red', width: 100 } as SquareConfig); // 类型断言正确 方法2

interface SquareConfig2 { // 方法三
    color?: string;
    width?: number;
    [propName: string]: any; // 若确定带有任意数量的其他属性 可以添加字符串索引签名
}

函数声明
接口声明
// 函数类型 使用interface来描述函数
interface FuncType {
    (source: string, name: string): boolean;
}

let mySearch: FuncType;
mySearch = function (src: string, abc: string): boolean {
    // 不要求名称一致 只要对应位置类型对上就行
    return false;
};

直接生命
// 函数 返回值类型一般省略, ts会自动推出
let myAdd: (x: number, y: number) => number = (
    x1: number,
    y1: number
): number => {
    return x1 + y1; // 声明变量对函数类型 并不要求变量名一致
};


索引类型
interface StrArrType {
    [index: number]: string; // 索引是number 值是string index只是一个代指 这样可以不确定数量

}
interface StrArrType1 {
    readonly [index1: string]: number; // 规定了 string索引 返回值number readonly 可以防止赋值
}

let strArr: StrArrType = ['12', '2434']; // ts 支持 number 和 string当索引

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}
// 错误:使用数值型的字符串索引,有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal; // 数字索引的返回值必须是字符串索引返回值的子类型 把animal 和dog调换类型都行 因为number索引是转换为string来索引的 这两者就冲突了
    [x: string]: Dog;
}

接口复用
// 接口复用 一个接口可以继承多个接口
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

泛型
// 泛型可以表达 传入值和返回值是一致的 any 不可以 T捕获传入的变量
function testmm<T>(a: Array<T>): T {
    return a;
}

testmm<number>(1); //一般也没必要是用<>强制说明 ts会自动推论
// 缺点 必须使用通用属性 比如不能使用string.length 因为不确定类型

// 泛型类型
let masef:<T>(arr:Array<T>):T =  testmm//具体实现
 

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

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

相关文章

PVE报错处理:kvm [2205]: vcpu0 ignored RDMSR: 0x1b8

PVE使用过程中如果遇到&#xff1a;kvm [2205]: vcpu0 ignored RDMSR: 0x1b8 报错信息处理方法 vim /etc/modprobe.d/kvm.conf "options kvm ignore_msrsY"&#xff0c;这里在msrsY后面加一个空格&#xff0c;然后粘贴report_ignored_msrsN&#xff0c;使其变成 op…

【pytorch进阶】| 各类张量形状变化函数总结对比分析,view,reshape,pernute,transpose,squeeze,unsqueeze

文章目录 1 view&#xff08;&#xff09;函数1.1 基本用法 2 view_as&#xff08;&#xff09;函数3 reshape&#xff08;&#xff09;函数4 permute&#xff08;&#xff09;函数5 transpose&#xff08;&#xff09; 函数6 squeeze&#xff08;&#xff09;函数 和 unsqueez…

为什么建议不要买入耳式的耳机?有没有不伤听力的蓝牙耳机

为什么建议不要买入耳式的耳机&#xff1f;因为长时间佩戴入耳式耳机可能会导致耳朵不适甚至疼痛&#xff0c;且存在听力损伤、耳膜损伤的风险&#xff0c;还可能诱发耳道发炎。那么有没有不伤听力的蓝牙耳机呢&#xff1f;当然是有的&#xff0c;我建议尝试一下骨传导蓝牙耳机…

简单实践 java spring cloud 负载均衡

1 概要 1.1 实现一个最简单的微服务。远程调用负载均衡&#xff0c;基本上完成了最核心的微服务框架。 远程调用&#xff1a;RestTemplate 注册中心&#xff1a;eureka 负载均衡&#xff1a;Ribbon 1.2 要点 1.2.1 依赖 1.2.1.1 主框架依赖 spring boot 依赖 <depe…

HarmonyOS鸿蒙 虚拟像素 图片显示

Android中&#xff0c;有的sp&#xff0c;dp&#xff0c;dpi&#xff0c;px等概念。 dpi&#xff0c;dots per inch&#xff0c;代表屏幕像素密度。是指屏幕上每英寸&#xff08;1英寸 2.54 厘米&#xff09;距离中有多少个像素点。 dp&#xff0c;device independent pixels&…

Camille-接口测试

* 接口&#xff1a;不同的系统之间相互连接的部分&#xff0c;是一个传递数据的通道 * 接口测试&#xff1a;检查数据的交换、传递和控制管理过程 网络模型&#xff1a; OSI七层模型 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 TCP/IP四层模型 应用层 传输层 网络…

GPT-4 Vision根据应用程序截图生成博客和Readme 升级Streamlit八

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…

虚拟机(VMware)ubuntu16.04 直接连接网口设备 USRP 吊舱

编辑虚拟网络编辑器 点击之后 选择网卡之后&#xff0c;点击确定。 电脑配置 使用了&#xff1a;192.168.2.56 虚拟机内部配置 和PC的配置一致

leetcode刷题(剑指offer) 101.对称二叉树

101.对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false提示&#xff1a; …

Elasticsearch性能调优

背景 项目上是用 ES 做数据库&#xff0c;存储的告警数据&#xff0c;量级在千万级别左右。测试在压测之后&#xff0c;系统频繁出现告警记录查询报错&#xff0c;系统不可用。基于此排查分析项目上 Elasticsearch 的使用是否合理。 版本及硬件 环境&#xff1a;10.xx.xxx.x…

vue前端html导出pdf

package.json中添加依赖 调用方&#xff1a; import htmlToPdf from ../../../utils/file/htmlToPdf.js// 下载方法&#xff0c;pdfDownloadDpi为onClickDownLoad() {htmlToPdf.getPdf(标题1, jsfgyzcpgxmShow, this.pdfDownloadDpi)}htmlToPdf.js // 页面导出为pdf格式 imp…

漏洞01-目录遍历漏洞/敏感信息泄露/URL重定向

目录遍历漏洞/敏感信息泄露/URL重定向 文章目录 目录遍历敏感信息泄露URL重定向 目录遍历 敏感信息泄露 于后台人员的疏忽或者不当的设计&#xff0c;导致不应该被前端用户看到的数据被轻易的访问到。 比如&#xff1a; ---通过访问url下的目录&#xff0c;可以直接列出目录下…

秋招面试—JS篇

2024 JavaScript面试题 1.new 操作符的工作原理 ①.创建一个新的空对象 ②.将这个对象的原型设置为函数的 prototype 对象 ③.让函数的this指向该对象&#xff0c;为函数添加属性和方法 ④.最后返回这个对象 2.什么是DOM&#xff0c;什么是BOM? DOM&#xff1a;文档对象…

代码随想录算法训练营第二十二天|235 二叉搜索树的最近公共祖先、701 二叉搜索树中的插入操作、450 删除二叉搜索树中的节点

235 二叉搜索树的最近公共祖先 题目链接&#xff1a;二叉搜索树的最近公共祖先 思路 因为二叉搜索树是有序的&#xff0c;因此p和q的最近公共祖先一定在两者之间&#xff0c;所以每到一个节点&#xff0c;该节点的数值如果大于p和q&#xff0c;则朝左子树走&#xff1b;如果…

C/C++ - 函数模板

目录 函数模板基础 函数模板定义 函数模板实例 函数模板调用 函数模板本质 模板函数特化 模板参数限定 默认模板参数 多个模板参数 非类型模板参数 函数模板拓展 模板参数匹配规则 函数模板基础 函数模板定义 使用 template <typename T>​​​​​ 或 templ…

ElementUI Form:Input 输入框

ElementUI安装与使用指南 Input 输入框 点击下载learnelementuispringboot项目源码 效果图 el-input.vue &#xff08;Input 输入框&#xff09;页面效果图 项目里el-input.vue代码 <script> export default {name: el_input,data() {return {input: ,input1: ,i…

SOME/IP SD 协议介绍(五)使用SOME/IP-SD宣布非SOME/IP协议的协议。

使用SOME/IP-SD宣布非SOME/IP协议的协议。 除了SOME/IP之外&#xff0c;车辆内部还使用其他通信协议&#xff0c;例如用于网络管理、诊断或闪存更新。这些通信协议可能需要传递服务实例或具有事件组。 对于非SOME/IP协议&#xff0c;应使用特殊的服务ID&#xff0c;并使用配置…

养猫家庭必备宠物空气净化器吗?性价比猫用空气净化器牌子推荐

家里的可爱猫咪们带来了很多快乐&#xff0c;但是它们的毛发却无处不在&#xff0c;飞舞在整个房间里。而且如果猫砂盆不及时清理&#xff0c;整个屋子都会弥漫着难闻的气味。每天都要清理工作&#xff0c;但是有时候我们也没有那么多精力。虽然享受着猫咪们带来的快乐&#xf…

C# wpf 字体图标预览,html字符与unicode转换

在进行wpf 开发工作过程中遇到字体图标无法预览的问题&#xff0c;特此记录。 1、把需要预览的字体文件上传到网站上进行转换 Create Your Own font-face Kits Font Squirrel2、下载文件后进行解压。 3、找到 Glyph Chart 查看字体html字符编码4、在wpf中直接使用即可 <…

C语言数据结构之二叉树

少年恃险若平地 独倚长剑凌清秋 &#x1f3a5;烟雨长虹&#xff0c;孤鹜齐飞的个人主页 &#x1f525;个人专栏 &#x1f3a5;前期回顾-栈和队列 期待小伙伴们的支持与关注&#xff01;&#xff01;&#xff01; 目录 树的定义与判定 树的定义 树的判定 树的相关概念 树的运用…