ts基础认识

基础数据类型

number
string
bolean
字面量            值本身,例'man','woman'
any                任意类型         
unknown        实际上就是一个类型安全的any
void                没有值或undefined   
never              表示永远不会返回结果   
object
array
// 基础类型(ts中变量一开始是什么类型,后期赋值的时候,只能用这个类型的数据,是不允许用其他数据类型赋值给当前的这个变量)
(() => {//布尔类型// 基本语法// let 变量名:数据类型 = 值let flag: boolean = trueconsole.log(flag)// 数字类型let a1: number = 10 //十进制// 还有2进制 8进制 16进制// 字符串类型let str: string = '小明'let und: undefined = undefined;let nul: null = nullconsole.log("undefined和null都可以作为其他类型的子类型,把undefined和null赋值给其他变量")// 数组类型(数组定义后,里面的数据类型必须和定义数组的时候是一致的,否则报错)// 数组定义方式1let arr1: number[] = [10, 20, 30, 40, 50]// 数组定义方式2let arr2: Array<number> = [100, 200, 300]// 元组类型(在定义数组时,类型和数据的类型一开始就限制了)let arr3: [string, number, Boolean] = ['小明', 100, true]// 枚举类型,枚举里面的每个数据值都可以叫元素,每个元素都有自己的编号,编号是从0开始的,依次的递增1enum Color {red = 3,green,blue}// 定义一个Color的枚举类型的白能量来接收枚举的值let color: Color = Color.redconsole.log(color)console.log(Color.red, Color.green, Color.blue)console.log(Color[3])// 枚举中的元素可以是中文的数据值,但是不推荐// any类型let str9: any = 100str9 = "我是一个字符串"// 当一个数组要存储多个数据,个数不确定,类型不确定,此时也可以使用any类型来定义数组let arr: any[] = [100, '字符串', true]// 缺点是不会有精确的报错信息// void类型,在函数声明的时候,小括号的后面使用:void,代表的是该函数没有任何的返回值function showMsg(): void {console.log('打印一下')return null}console.log(showMsg())// 定义一个void类型的变量,可以接收一个undefined的值,但是意义不是很大let vd: void = undefinedconsole.log(vd)// object 类型// 定义一个函数,参数是object类型,返回值也是object类型function getObj(obj: object): object {console.log(obj)return {name: '卡卡西',age: 27}}console.log(getObj(String))// console.log(getObj('123'))  错误的// 联合类型(Union Types)表示取值可以为多种类型中的一种// 需求1:定义一个函数得到一个数字或字符串值的字符串形式值// function getString(str: number | string): string {//   return str.toString()// }// console.log(getString('123'))// 需求2:定义一个函数得到一个数字或字符串值的长度// 类型断言:告诉编辑器,我知道我自己是什么类型,也知道自己在干什么// 类型断言的语法方式1:(<类型>)变量名// 类型断言的语法方式2: asfunction getString(str: number | string): number {// return str.toString().length// 如果str自身就是string类型,那么是没有必要调用toString()方法的if ((<string>str).length) {// str.length存在吗?如果存在也就说明str是string类型的return (<string>str).length} else {// 此时说明str是number类型return str.toString().length}}console.log(getString(12345))console.log(getString('012345'))// 类型推断:没有明确的指定类型的时候推测出一个类型// let txt = 100// txt ="字符串"// console.log(txt)let txt2; //any 类型txt2 = 100txt2 = '这是一个字符串'console.log(txt2)})()

接口

// 接口:是一种类型,是一种规范,是一种规则,是一个能力,是一种约束
// 同时接口也可以当成类型声明去使用
// 接口可以重复声明,会合并,不能声明重复的属性
// 接口中所有的属性都不能有实际的值,只定义对象的结构
(() => {// 需求:创建人的对象,需要对人的属性进行一定的约束// id是number类型,必须有,只读的// name是string类型,必须有// age是number类型,必须有// sex是string类型,可以没有// 定义一个接口,该接口作为person对象的类型使用,限定过着是约束该对象中的属性数据interface Iperson {//readonly,让id只能读,不能改readonly id: numbername: stringage: numbersex?: string// ? 实现sex可有可无}// 定义一个对象,该对象的类型就是我定义的接口IPersonconst person: Iperson = {id: 1,name: '小明',age: 18,sex: '女'}console.log(person)// id属性,现在是可读可写的// person.id = 100console.log(person)
})()

函数类型


// 类:可以理解为模板,通过模板可以实例化对象
// 面向对象的编程思想
(() => {// ts中类的定义及使用class Person {// 定义属性name: stringage: numbergender: string// 定义构造函数:为了将来实例化对象的时候,可以直接对属性的值进行初始化constructor(name: string, age: number, gender: string ) {// 更新对象的中属性数据this.name = namethis.age = agethis.gender = gender}// 简写 (k可以省去定义属性的步骤)//constructor(public name: string ,public age: number ,public gender: string) {// 更新对象的中属性数据//this.name = name//this.age = age//this.gender = gender//}// 定义实列方法sayHi(str: string) {console.log(`大家好,我是${this.name},今年已经${this.age}岁了,是个${this.gender}孩子`, str)}}// ts中使用类,实例化对象,可以直接进行初始化操作const person = new Person('佐助', 18, '男')person.sayHi('你叫什么名字呀')
})()

修饰符(5个)

// 修饰符(类中的成员的修饰符):主要是描述类中的成员(属性,构造方法,方法)的可访问性
// public修饰符 --- 公共的 可以在任意位置修改,访问 (默认)
// private修饰符 ----私有的,只能在类的内部修改
// protected修饰符 ----受保护的,只能在当前类和当前类的子类中修改
// readonly只读
// static 静态方法
(() => {// 定义一个类class Person {// 属性public 修饰了属性成员// public name : string// 属性 private 修饰了属性成员private name: string// 属性protected 修饰了属性成员// protected name: string// 构造函数public constructor(name: string) {// 更新属性this.name = name}// 方法public eat() {console.log('嗯,这个骨头真好吃', this.name)}}// 定义一个子类class Student extends Person {// 构造函数constructor(name: string) {super(name)}play() {console.log('我就喜欢玩')}}// 实例化对象const per = new Person('大蛇丸')// 类的外部可以访问类中的属性成员console.log(per.name)per.eat()
})()

抽象类

abstract 开头的类是抽象类
抽象类不能用来创建对象,抽象类就是专门用来继承的类

abstract class Person {// readonly只读readonly name = "hhh"static age = "aaa"say() {console.log('say方法')}
}

类配合接口的实用

//  类 类型: 类的类型,类的类型可以通过接口实现
(() => {// 定义一个接口interface IFly {// 该方法没有任何的实现(方法中什么都没有)fly()}// 定义一个类型,这个类的类型就是上面定义的接口(实际上也可以理解为,IFly接口约束了当前的这个Person类)class Person implements IFly {fly() {console.log('我会飞了')}}// 实例化对象const person = new Person()person.fly()// 定义一个接口interface ISwim {swim()}//定义一个类,这个类的类型就是IFly和ISwim(档期那这个类可以实现多个接口,一个类同时也可以被多个接口进行约束)class Person2 implements IFly, ISwim {fly() {console.log('我会飞2')}swim() {console.log('我会游泳啦2')}}// 实例化对象const person2 = new Person2()person2.fly()person2.swim()// 总结类可以通过接口的方式,来定义档期那这个类的类型// 类可以实现一个接口,类也可以实现多个接口,要注意,接口中的内容都要真正的实现// 定义了一个接口,继承其他的多个接口interface IMyFlyAndSwim extends IFly, ISwim { }// 定义一个类,直接实现IMyFlyAndSwim这个接口class Person3 implements IMyFlyAndSwim {fly() {console.log('我会飞3')}swim() {console.log('我会游泳啦3')}}const person3 = new Person3()person3.fly()person3.swim()// 总结:接口和接口之间叫继承(使用的是extends关键字),类和接口之间叫实现(使用的是implements)
})()

类的继承

// 继承:类与类之间的关系
// 继承后类与类之间的叫法:
// A类继承了B这个类,那么此时A类叫子类,B类叫基类
// 子类 ---->派生类
// 基类 ---->超类(父类)
(() => {// 定义一个类:作为基类(超类/父类)class Person {// 定义属性name: string //名字age: number //年龄gender: string //性别// 定义构造函数constructor(name: string, age: number, gender: string) {// 更新属性数据this.name = namethis.age = agethis.gender = gender}// 定义实例方法sayHi(str: string) {console.log(`我是:${this.name},${str}`)}}// 定义一个类,继承自Personclass Student extends Person {constructor(name: string, age: number, gender: string) {// 调用的是父类中的构造函数,使用的是supersuper(name, age, gender)}// 可以调用父类中的方法sayHi() {console.log('我是学生类中的sayHi方法')// 调用父类中的sayHi方法super.sayHi('哈哈')}}// 实例化Personconst person = new Person('夏明', 89, '男')person.sayHi('嘎嘎')// 实例化Studentconst stu = new Student('小红', 45, '女')stu.sayHi()// 总结:类和类之间如果要有继承关系,需要使用extends关键字// 子类中可以调整父类中的构造函数,使用的是super关键字(包括调用父类中的实例方法,也可以使用super)// 子类也可以重写父类的方法})()

多态

// 多态:父类型的引用指向了子类型的对象,不同类型的对象针对相同的方法,产生了不同的行为
(() => {// 定义一个父类class Animal {// 定义一个属性name: string// 定义一个构造函数constructor(name: string) {// 更新属性值this.name = name}// 实例方法run(distance: number = 0) {console.log(`跑了${distance}米这么元的距离`, this.name)}}// 定义一个子类class Dog extends Animal {// 构造函数constructor(name: string) {// 调用父类的构造函数,实现子类中属性的初始化操作super(name)}// 实例方法,重写父类中的实列方法run(distance: number = 5) {console.log(`跑了${distance}米这么元的距离`, this.name)}}// 定义一个子类class Pig extends Animal {// 构造函数constructor(name: string) {// 调用父类的构造函数,实现子类中属性的初始化操作super(name)}// 实例方法,重写父类中的实列方法run(distance: number = 10) {console.log(`跑了${distance}米这么远的距离`, this.name)}}// 实例化父类对象const ani: Animal = new Animal('动物')ani.run()// 实例化子类对象const dog: Dog = new Dog('大黄')// 实例化子类对象const pig: Pig = new Pig('八戒')pig.run()// 父类和子类的关系:父子关系,此时,父类类型创建子类的对象const dog1: Animal = new Dog('小黄')dog1.run()const pig1: Animal = new Dog('小猪')pig1.run()// 该函数需要的参数是Animal类型的function showRun(ani: Animal) {ani.run}showRun(dog1)showRun(pig1)
})()

泛型

在定义函数或是类时,如果遇到类型不明确就可以使用泛型(默认大写)

function fn<K>(a: K): K {return a;
}// 1,可以直接调用,ts自动对类型进行推断 
let result1 = fn(10);
// 2 指定泛型
let result = fn<string>('hello')

泛型可以同时使用多个

function fn2<T, K>(a: T, b: K): T {console.log(b)return a
}
let result3 = fn2<number, string>(1, '1')

限制泛型的类型
T extends Inter表示泛型T必须是Inter的实现类(子类)

interface Inter {length: number
}
function fn3<T extends Inter>(a: T): number {return a.length
}
fn3('123')

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

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

相关文章

聚焦业务价值:分众传媒在 Serverless 上的探索和实践

简介&#xff1a;随着业务规模的增长&#xff0c;业务方对后台服务的弹性诉求越来越强怎么办&#xff1f;云原生峰会前线最佳落地实践心得分享&#xff1a;看分众传媒如何借助 Serverless 函数计算提升 80% 开发运维效率&#xff0c;有效降低计算成本~ 作者 | 吴松&#xff08;…

当Unity实时3D引擎遇上AI虚实交互,Unity要成为元宇宙时代的新引擎

游戏引擎巨头Unity&#xff0c;还在为蔚来、小鹏、理想等14家车厂提供智能座舱等解决方案&#xff0c;以及为香港机场、北京城建、海尔卡奥斯提供数字孪生方案。实时3D引擎&#xff0c;也将是元宇宙时代的核心支撑。 编辑 | 宋慧 出品 | CSDN AI 领域的年度盛会——2022世界人…

告警运维中心|构建高效精准的告警协同处理体系

简介&#xff1a;基于报告&#xff0c;ARMS 能快速的整合上下文&#xff0c;包括 Prometheus 监控进行监控。还有前端监控的相关数据&#xff0c;都会整合到报告里面&#xff0c;进行全方位检测来收敛相关问题。 作者&#xff1a;延福 在开始正式内容前&#xff0c;我想跟大家…

01let和const

1.1 let 作用 声明局部变量 特性 不存在变量提升不能重复声明不作为window属性块级作用域暂时性死区&#xff08;声明前不能使用&#xff09; 1.2 const 作用 生成常量 特性 与let一致 globalThis 对象 Es5模块中的this是windowEs6模块中的this是undefined函数中的this&…

数字人技术在直播场景下的应用

作者 | 薄志浩本文介绍了在数字人AI技术发展迅猛&#xff0c;整体AI数字人市场呈现高速增长的趋势下&#xff0c;与强调高实时性互动的直播业务场景的结合与应用&#xff0c;通过数字人渲染技术、强大的AI全栈能力、算力为虚拟主播赋能&#xff0c;在面部表情、肢体动作、问答对…

CNCF 沙箱项目 OCM Placement 多集群调度指南

简介&#xff1a;在这篇文章中&#xff0c;将介绍 Placement 如何选择到所需的集群&#xff0c;Placement 可以提供的调度功能&#xff0c;以及一些场景下的最佳实践&#xff0c;使用者可以参考示例来编写符合自己要求的 Placement。其他一些高级调度功能&#xff0c;如支持污点…

02 解构赋值

解构赋值 1.1 什么是解构赋值 允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构 只要某种数据结构具有 Iterator 接口&#xff0c;都可以采用数组形式的解构赋值 1.2 数组解构赋值和对象解构赋值的区别 数组的元素是按次…

如何帮助业务丝滑配置?阿里巴巴用了 11 年的“功能开关” 是什么?

简介&#xff1a;AHAS 功能开关是一个轻量级的动态配置框架&#xff0c;通过功能开关可以动态管理代码中的配置项&#xff0c;根据需求为某个应用开启或关闭部分功能&#xff0c;或设置某个性能指标的阈值。功能开关通常用于设置黑白名单、运行时动态调整日志级别、降级业务功能…

摆脱 AI 生产“小作坊”:如何基于 Kubernetes 构建云原生 AI 平台

简介&#xff1a;本文将介绍和梳理我们对云原生 AI 这个新领域的思考和定位&#xff0c;介绍云原生 AI 套件产品的核心场景、架构和主要能力。 作者&#xff1a;张凯 前言 云原生&#xff08;Cloud Native&#xff09;[1]是云计算领域过去 5 年发展最快、关注度最高的方向之一…

Node 之父斥责 Oracle:你们也不用,那请交出 JavaScript 商标!

整理 | 苏宓出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;也许 13 年前&#xff0c;Oracle 以 74 亿美元收购 Sun Microsystems 公司时&#xff0c;也不会想到自己后续要牵扯到诸多的版权诉讼与投诉的漩涡之中。众所周知&#xff0c;Oracle 在收购 Sun 之后&…

mobx的使用

mobx的使用 1、API mobx-react Provider 包裹根组件&#xff0c;用于传递数据observer 组件变为响应式inject 接收mobx实例(用于类组件)MobXProviderContext mobx observable 声明变量action 声明函数用于修改observable 的值makeObservable 更新状态 2、安装 yarn add mo…

OPLG:新一代云原生可观测最佳实践

简介&#xff1a;OPLG 体系拥有成熟且富有活力的开源社区生态&#xff0c;同时也经过了大量企业生产环境的实践检验&#xff0c;是当下建设新一代云原生统一可观测平台的热门选择。但是&#xff0c;OPLG 只是提供了一个技术体系&#xff0c;如何灵活运用&#xff0c;解决实际问…

EventBridge 集成云服务实践

简介&#xff1a;本篇文章主要向大家分享了通过 EventBridge 如何集成云产品事件源&#xff0c;如何集成云产品事件目标以及通过事件流如何集成消息产品。 作者&#xff1a;李凯&#xff08;凯易&#xff09; EvenBridge 集成概述 EventBridge 是阿里云所推出了一款无服务器…

前端性能——数据持久化

如何实现数据持久化 一般情况下&#xff0c;借用本地存储用的比较多&#xff0c;或者一些插件&#xff0c;如vue的keep-alive&#xff0c;配合redux使用的persist 为什么需要数据持久化 1、减少发起请求的次数&#xff0c;从而提高性能。 场景&#xff1a;比如一个网站&…

云原生微服务的下一站,微服务引擎 MSE 升级

简介&#xff1a;管好微服务&#xff0c;成为云原生时代的新难题。 管好微服务&#xff0c;成为云原生时代的新难题。 从建好微服务到管好微服务&#xff0c;差的虽是一个字&#xff0c;连接起两边的却需要大量的微服务落地经验。因为软件架构的核心挑战是解决业务快速增长带…

火爆全网的“数字人”,到底是个啥?

作者 | 小枣君来源 | 鲜枣课堂庄子他老人家说过&#xff1a;“人生&#xff0c;就是一场游戏。”对于这场游戏&#xff0c;有些人玩得很嗨&#xff0c;到了结尾不肯退场&#xff0c;总希望无限期玩下去。例如秦始皇&#xff0c;总想着灵丹妙药、长生不死。还有些人呢&#xff0…

阿里云RemoteShuffleService新功能:AQE和流控

简介&#xff1a;阿里云EMR自2020年推出Remote Shuffle Service(RSS)以来&#xff0c;帮助了诸多客户解决Spark作业的性能、稳定性问题&#xff0c;并使得存算分离架构得以实施。为了更方便大家使用和扩展&#xff0c;RSS在2022年初开源&#xff0c;欢迎各路开发者共建。本文将…

react如何在父组件中调用子组件事件

父组件是如何使用子组件的事件的&#xff0c;下边数值累加的例子 类组件 将子组件的this传到父组件&#xff0c;给父组件添加一个属性&#xff0c;值为this&#xff0c;之后就可以通过父组件的属性调用子组件的事件了 import React,{Component} from react;// 这是子组件 clas…

OpenSergo 正式开源,多家厂商共建微服务治理规范和实现

简介 OpenSergo&#xff0c;Open 是开放的意思&#xff0c;Sergo 则是取了服务治理两个英文单词 Service Governance 的前部分字母 Ser 和 Go&#xff0c;合起来即是一个开放的服务治理项目。 该项目由阿里云、bilibili、字节跳动&#xff0c;以及 Spring Cloud Alibaba、Nacos…

Linux中常见的网络端口号

在使用计算机或智能手机时&#xff0c;我们使用各种硬件端口&#xff0c;如用于音频、HDMI、Type-c 等的 3.5mm 端口&#xff0c;其用于与硬件外围设备通信。同样&#xff0c;网络端口可以让我们在一台计算机上访问各种网络服务来达到通信的目的。因此&#xff0c;端口被认为是…