09-泛型及接口补充

一.剩余参数和展开运算符

1.剩余参数

1)简介:

剩余参数的语法,我们可以将函数或方法中一个不定数量的参数表示为一个数组。

2)语法及基础代码实例:

①语法:

//剩余参数只能写在最后一位
function 函数名(参数1,参数2,...剩余参数数组){
  //逻辑代码
  //之前的参数:挨个获取即可
  //剩余参数:以数组的形式获取
}

②基础代码实例:

function sum(numA:number,numB:number,...theArgs:number[]){
  let total=numA+numB;
  for(const arg of theArgs){
    total+=arg;
  }
  return total;
}
console.log(sum(1,2,3).toString())
console.log(sum(1,2,3,4).toString())

2.展开运算符

1)简介:

处于程序稳定性,以及运行性能考虑,在ArkTs中 …(展开运算符)只能用在数组上

2)语法及基础代码实例:

const numArr1:number[]=[1,2,3,4]
const numArr2:number[]=[5,6,7]
//合并到一起
const totalArr:number[]=[...numArr1,...numArr2]
console.log(totalArr.toString())

二.接口补充

1.接口补充-接口继承

1)简介:

接口继承使用的关键字是extends。

2)语法及基础代码实例:

①语法

interface 接口1{
  属性1:类型
}
interface 接口2 extends 接口1{
  属性2:类型
}

②基础代码实例

interface IAnimal{
  name:string
}
interface ICat extends IAnimal{
  color:string
}
const cat:ICat ={
  name:'布偶猫',
  color:'白色'
}

2.接口补充-接口实现

1)简介:

可以通过接口结合implements来限制类必须要有某些属性和方法

2)语法及基础代码实例:

①语法

interface 接口{
  属性:类型
  方法:方法类型
}


class 类 implements 接口{
  //必须实现 接口中定义的属性、方法,
  //否则会报错
}

②基础代码实例

interface IDog{
  name:string
  bark:()=>void
}


class Dog implements IDog{
  name:string
  food:string


  constructor(name:string,food:string) {
    this.name=name
    this.food=food
  }
  bark(){
    console.log(`${this.name}一边吃${this.food}一边大叫`)
  }
}


let d1:Dog=new Dog('河马小狗','达犀牛')
d1.bark()

三.泛型

简介:

泛型可以让【函数】等,与多种【不同的类型】一起工作,灵活可复用

通俗一点说就是:类型是可变

1.泛型函数

1)语法

//原函数
function fn1(temp:string):string{
  return temp
}
function fn2(temp:number):number{
  return temp
}
function fn3(temp:boolean):boolean{
  return temp
}
//使用泛型后
function fn<Type>(temp:Type):Type{
  return temp
}


fn<string>('1,2,3')
fn<number>(1)

tips:

ArkTs会根据默认传参,进行类型腿短,动态的配置Type类型参数的值。

但是大家能写全尽量写全,这样会提高代码的可读性。

fn(true)
fn([1,2,3,4,5])

2)基础代码实例1

①练习需求

定义函数,参数是数组(存的类型不定),返回数组长度

②具体代码

function getLength<T>(arr:T[]):number{
  return arr.length
}
console.log('',getLength<number>([1,2,3,4,5]))
console.log('',getLength<string>(['河马','荷花','大炮']))

3)基础代码实例2

①练习需求

定义函数,参数是数组(存的类型不定),返回数组的最后一项。

②具体代码

function getLate<T>(arr:T[]):T{
  return arr[arr.length-1]
}
console.log('',getLate([1,2,3,4,5,6,7]))

2.泛型约束

1)简介:

之前的类型参数,可以传递任何类型,没有限制。

如果希望有限制→泛型约束

interface 接口{
  属性:类型
}
function 函数<Type extends 接口>(){}

2)基础代码实例

interface ILength{
  length:number
}
function fn<T extends ILength>(param:T){
  console.log('',param.length)
}
fn<string>('hahahaha')
fn<boolean>(true) //会报错
interface ILength{
  length:number
}
function fn<T extends ILength>(param:T){
  console.log('',param.length)
}
fn<string>('hahahaha')
/*fn<boolean>(true)*/
class Desk{
  length=2
}
let d1=new Desk()
fn<Desk>(d1)

3.多个泛型参数

1)简介:

日常开发的时候,如果有需要,可以添加多个 类型变量

2)基础代码实例

function  funcA<T,T2>(param1:T,param2:T2){
  console.log('参数1',param1)
  console.log('参数2',param2)
}
funcA<string,number>('河马',888)
funcA<string[],boolean[]>(['荷花'],[false])

4.泛型接口

1)简介:

定义接口的时候,结合泛型定义,就是泛型接口。

interface 接口<Type>{
  //内部使用Type
}

2)基础代码实例

interface IdFunc<Type>{
  //约定有两个方法(id类型不定,可能是string可能是number)
  //1.传入id值,就返回id值。
  //2.返回一个ids数组
  id:(value:Type)=>Type
  ids:()=>Type[]
}


let obj1:IdFunc<number>={
  id(value){
    return value
  },
  ids(){
    return[1,2,3,4,5]
  }
}


let obj2:IdFunc<string>={
  id(value){
    return value
  },
  ids(){
    return['001','002','003']
  }
}

5.泛型类

1)简介:

定义类的时候,结合泛型定义,就是泛型类。

class 类名<Type>{
  //内部可以使用Type
}

2)基础代码实例

//泛型类:定义类的时候,配合泛型一起定义
class Person<T>{
  id:T


  constructor(id:T) {
    this.id=id
  }
  getId(){
    return this.id
  }
}
let p1:Person<string> = new Person('河马')
let p2:Person<number> = new Person(123456789)
console.log(p1.getId())
console.log(p2.getId().toString())

如果您觉得文章对您有帮助,可以支持下博主,网络一线牵,一分也是缘。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇