TypeScript知识点总结

typescript是js的超集,目前很多前端框架都开始使用它来作为项目的维护管理的工具,还在不断地更新,添加新功能中,我们学习它,才能更好的在的项目中运用它,发挥它的最大功效

let b: null = nulllet c: null = undefinedlet d: undefined = undefined
let e: undefined = nulllet numbers: number[] = [1, 2, 3, 4]
let numbers1: Array<number> = [1, 2, 3, 4]
let strings: string[] = ['1', '2', '3', '4']
let strings1: Array<string> = ['1', '2', '3', '4']type num = number[]let numbers3: num = [1, 2, 3, 4]

/类型别名/

type strAndNum = (number | string)[]let data: strAndNum = [1, 2, 3, 4, '11111']type dataType = number | string[]let data1: dataType = 22222
let data2: dataType = ['1', '2']function add(num1:number, num2:number):number {return num1+num2
}function add1(num1:number, num2:number):void {// return num1+num2
}add(1, 2);// add1('1', '2');type funcType = (n1:number,n2:number) => number
const add2:funcType  = (num1, num2) => {return num1+num2
}function mySlice(start: number, end?: number):void {console.log(`起始索引${start};结束索引${end}`)
}mySlice(1,3)
mySlice(1)
// mySlice()type pType = { name: string; age: number; sayHi(): void;greet(name:string):void}let person:pType  = {name: 'gaofeng',age: 19,sayHi() { },greet(name) { }
}
type configType = {url: stringmethod:string
}
function myAxios(config:configType):void {}myAxios({url: "xxxxxxxxxxxxx",method:"Get"
})

//接口

interface IPerson {name: stringage: numbersayHi: () => void
} 
let person1:IPerson = {name: 'gf',age: 100,sayHi(){}
}let person2: IPerson= {name: 'gf2',age: 120,sayHi(){}
}person1.name = 'xxxxx'

//类型别名和接口的区别
//1.接口只能为对象声明类型,类型别名可以为任何类型声明
//2.接口可以继承,类型别名不能继承
//3.接口和类型别名的声明方式不一样

//接口的继承

interface Ponit2D {x: numbery: number
}interface Pointer3D extends Ponit2D{z:number
}let p3: Pointer3D = {x: 10,y:20,z:100
}

//元组,指定长度的数组类型

let postion: number[] = [29, 42]let pos1: [number, number] = [20, 19]type numbers = [number, number]
let pos2: numbers = [20, 19]

//类型推论

// let app: number
// app = 123
// app = '22222'let app = 15
// app = 'test....'function add21(num: number, num2:number) {return num+num2
}const div = document.getElementById('link') as HTMLAnchorElement
const div2 = <HTMLAnchorElement>document.getElementById('link')
div.href = 'xxxxxxxxxxxxx'
div2.href = 'XXXXXXXXXXXXXXXXXXXXXXXX'

//字面量类型

let str = 'hello ts'const str2 = 'HELLO TS'// let str3 :19 = 19type dType = 'up' | 'down' | 'left' | 'right'
function changeDirection(d: dType) {console.log(d)
}changeDirection('down')

//枚举类型
//类似于字面量+联合类型
//注意:若果形参的类型为Direction,那么实参就应该是枚举类型成员中的任意一个

enum Direction { Up, Down = 4, Left, Right }const obj = {a1:Direction.Down
}function changeDirection1(d: Direction) {console.log('xxxxxxxxxxx')
}
changeDirection1(Direction.Up) // 0
changeDirection1(Direction.Down) // 4
changeDirection1(Direction.Left) // 5
changeDirection1(Direction.Right) // 6

//字符串枚举

enum Direction1 { Up='Up', Down = 'Down', Left='Left', Right='Right' }console.log(Direction1.Down)
console.log(Direction1.Up)

//typeof
//类型查询
//根据已有变量的值,获取该值的类型,来简化类型书写
//只能用来查询变量或属性的类型
//无法查询其他形式的类型,比如函数调用

let p = { x: 1, y: 1 }function add11(obj: typeof p) {console.log(obj.x+obj.y)
}add11({ x: 100, y: 200 })let num: typeof p.x

//TS中的class,不仅仅提供了class的语法功能,而且也是一种类型存在

class Person {age: numbergender = '男'name:string
}const p = new Person()p.age

//class的构造函数
//构造函数的作用是设置实例的初始属性
//构造函数不能有返回类型,不要手动指定返回值

class People {age: numbergender: stringconstructor(age:number, gender:string) {this.age = agethis.gender = gender}
}const p1 = new People(20, 'gaofeng')
p1.age
p1.gender

//class的实例方法

class Point {x = 10y = 10scale(n: number) {this.x *= nthis.y *= n}
}const o = new Point()o.scale(2)
o.x
o.y

//class中的继承 extends继承父类,implements实现接口
//js中只有extends,ts提供了implements

class Animal {move() {console.log('Moving along')}
}class Dog extends Animal {name = '二哈'bark() {console.log('wangwang')}}const d = new Dog()
d.move()
d.bark()
d.name

//implements ts特有的实现方式
//类来实现接口,类继承类
//实现一个接口,就是要类实现接口中所有的属性和方法

interface Singlable {sing(): voidgetName(): stringgetAge(num:number):number
}class Man implements Singlable {name = 'xiaoming'sing() {console.log('hahaha~~~~')}getName() {return this.name}getAge(num:number) {return  num}
}const m = new Man()m.getAge(20)

//class中类成员的可见性
//publicpublic 公有的,可以被任何地方访问,可以直接省略不写
//protected 受保护的,仅在其声明的类和子类(非实例对象)中可见
//private私有的,只在当前类中可见,再实例对象子类中都不可见

class Animal {public move() {console.log('hahaha')}protected getName() {}private __run__() {console.log('99999')//类中的辅助方法}
}
const a = new Animal()
a.move
//a.protected 是无法在实例上获取的
//a.__run__ 是无法在实例上获取的class Dog extends Animal {bark() {console.log('wangwang')this.getName()//this.__run__() 是无法在实例上获取的}}const d = new Dog()d.move
//d.protected 是无法在实例上获取的
//a.__run__ 是无法在实例上获取的

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

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

相关文章

Mac提示文件:已损坏,无法打开。你应该把它移到废纸篓

文章目录 一、电脑信息二、打开任何来源设置三、更改应用程序拓展属性 一、电脑信息 我的是新版的Venture 13的系统。UI改的比较多。与之前的配置还是有很大的区别的。 打开下载的软件&#xff0c;显示已经损坏&#xff0c;打不开。抛开软件本身的问题外&#xff0c;一般是Ma…

vue3过滤输入框首尾空格

vue3过滤输入框首尾空格 在 directive文件夹下 新建 trim.ts 文件 // trim.ts 文件 import { App } from "vue"function getInput(el: { tagName: string; querySelector: (arg0: string) > any }) {let inputEleif (el.tagName ! INPUT) {inputEle el.queryS…

微信云开发-数据库操作

文章目录 前提初始化数据库插入数据查询数据获取一条数据获取多条数据查询指令 更新数据更新指令 删除数据总结 前提 首先有1个集合(名称:todos). 其中集合中的数据为: {// 计划描述"description": "learn mini-program cloud service",// 截止日期"…

LeetCode 626. 换座位

题目链接&#xff1a;LeetCode 626. 换座位 题目描述 表名&#xff1a;Seat 编写SQL查询来交换每两个连续的学生的座位号。如果学生的数量是奇数&#xff0c;则最后一个学生的id不交换。 按 id 升序 返回结果表。 查询结果格式如下所示。 示例1&#xff1a; 题目分析 如…

医疗知识图谱问答 ——Neo4j 基本操作

前言 说到问答机器人&#xff0c;就不得不说一下 ChatGPT 啦。一个预训练的大预言模型&#xff0c;只要是人类范畴内的知识&#xff0c;似乎他回答得都井井有条&#xff0c;从写文章到写代码&#xff0c;再到解决零散琐碎的问题&#xff0c;不光震撼到我们普通人&#xff0c;就…

微信消息撤回时间延长到2小时了?

““微信发出2小时后也可撤回,上班族的福音. ” 近日&#xff0c;有传言称 微信撤回消息的时间将延长至2小时 引起舆论关注 微信作为国内最大的网络社交平台&#xff0c;目前用户已超过11亿。 虽然微信已经做的很不错了&#xff0c;但微信消息撤回这一功能&#xff0c;还是…

【第一阶段】kotlin语言的String模板

1.在Java中拼接字符串使用的是“” 2.在kotlin中使用"${}" 3.kotlin语言中if是表达式&#xff0c;更灵活 fun main() {val city"西安"val time24//java中写法println("我在"city"玩了"time"小时")//kotlin中写法&#xff0…

jenkins通过sshPut传输文件的时候,报错Permission denied的SftpException

一、背景 使用jenkins的ssh插件传输文件至远程机器的指定目录&#xff0c;php程序打包后&#xff0c;经过zip压缩为oms.zip zip -rq oms.zip ./ -x .git/* -x .env然后我们求md5值 md5sum oms.zip最后执行传输。 09:03:02 Executing command on ssh[116.61.10.149]: mkdir…

使用docker安装wordpress详细教程及出现数据库无法连接问题解决方法

1.获取wordpress镜像 docker pull wordpress 2.创建wordpress 的容器 a.创建wordpress的文件镜像卷文件夹 mkdir wordpress b.创建wordpress镜像 docker run --name wp -p8080:80 -v /home/wordpress/:/var/www/html -d wordpress c.查看容器运行情况 3.在本地或者其他服务器创…

Astro + Vercel 快速搭建自己的博客网站

Astro 和 Vercel 彼此相得益彰&#xff0c;前者提供出色的开发者体验&#xff0c;用于构建现代静态站点&#xff0c;而后者负责部署和托管代码。 两者结合我们就可以轻轻松松零成本搭建自己的博客网站。查看示例。 步骤 1&#xff0c;创建评论仓库 在部署博客之前&#xff…

深入学习了解 gRPC协议

gRPC 是一个高性能、通用的开源RPC框架&#xff0c;其由 Google 主要面向移动应用开发并基于HTTP/2 协议标准而设计&#xff0c;基于 ProtoBuf(Protocol Buffers) 序列化协议开发&#xff0c;且支持众多开发语言。本文作者深入研究了 gRPC 协议&#xff0c;对协议本身作出解构。…

Linux 命令速查表

Linux 命令速查表 命令速查表系统硬件用户登陆文件进程安装包文件权限安装源(编译)搜索网络文件传输磁盘使用情况目录遍历学习网址命令速查表 系统 uname显示linux系统信息 uname -r显示内核版本信息 uptime显示系统运行的时间 (包括平均负载) hostname显示系统主机名 ho…

[用go实现解释器]笔记1-词法分析

本文是《用go实现解释器》的读书笔记 ​ https://malred-blog​malred.github.io/2023/06/03/ji-suan-ji-li-lun-ji-shu-ji/shi-ti/go-compile/yong-go-yu-yan-shi-xian-jie-shi-qi/go-compiler-1/#toc-heading-6http://个人博客该笔记地址 ​github.com/malred/malanghttp:/…

SAS-数据集SQL垂直(纵向)合并

一、SQL垂直合并的基本语法 一个selectt对应一个表&#xff0c;select之间用set-operator连接&#xff0c;set-operator包括&#xff1a;except&#xff08;期望&#xff09;、intersect&#xff08;相交&#xff09;、union&#xff08;合并&#xff09;&#xff0c;outer un…

chatgpt 提示词-关于数据科学的 75个词语

这里有 75 个 chatgpt 提示&#xff0c;可以立即将其用于数据科学或数据分析等。 1. 伪装成一个SQL终端 提示&#xff1a;假设您是示例数据库前的 SQL 终端。该数据库包含名为“用户”、“项目”、“订单”、“评级”的表。我将输入查询&#xff0c;您将用终端显示的内容进行…

WAF绕过-AWVS+Xray+Goby+sqlmap-绕过宝塔防火墙

WAF绕过主要集中在信息收集&#xff0c;漏洞发现&#xff0c;漏洞利用&#xff0c;权限控制四个阶段。 1、什么是WAF&#xff1f; Web Application Firewall&#xff08;web应用防火墙&#xff09;&#xff0c;一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

【openwrt】package介绍

openwrt package介绍 OpenWrt 构建系统主要围绕package的概念展开。不管是什么软件&#xff0c;几乎都对应一个package。 这几乎适用于系统中的所有内容&#xff1a;HOST工具、交叉编译工具链、Linux 内核、内核mod、根文件系统和上层的应用软件。 一个 OpenWrt package本质上…

【2023】XXL-Job 具体通过docker 配置安装容器,再通过springboot执行注册实现完整流程

【2023】XXL-Job 具体通过docker 配置安装容器&#xff0c;再通过springboot执行注册实现 一、概述二、安装1、拉取镜像2、创建数据库3、创建容器并运行3、查看容器和日志4、打开网页 127.0.0.1:9051/xxl-job-admin/ 三、实现注册测试1、创建一个SpringBoot项目、添加依赖。2、…

【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式 我原先是用的单选&#xff0c;但是单选并不支持选中后&#xff0c;再次点击取消选中&#xff1b;所以我改成了多选&#xff0c;然后改变多选样式&#xff0c;让他看起来像单选 在所在使用的页面上修改样式即可 <uni-d…

Zabbix分布式监控快速入门

目录 1 Zabbix简介1.1 软件架构1.2 版本选择1.3 功能特性 2 安装与部署2.1 时间同步需求2.2 下载仓库官方源2.3 Zabbix-Server服务端的安装2.3.1 安装MySQL2.3.1.1 创建Zabbix数据库2.3.1.2 导入Zabbix库的数据文件 2.3.2 配置zabbix_server.conf2.3.3 开启Zabbix-Server服务2.…