首页 前端知识 TS的数组类型和函数类型

TS的数组类型和函数类型

2024-09-01 00:09:10 前端知识 前端哥 238 229 我要收藏

一、数组的类型


1. 类型[ ]

var arr1: number[] = [1, 2, 3];    // 数字类型的数组
var arr2: string[] = ["1", "2"];   // 字符串类型的数组
var arr3: any[] = [1, "2", true];  // 任意类型的数组
console.log(arr1,arr2,arr3);

在这里插入图片描述

2. 数组泛型

  • Array<类型>
let arr:Array<number> = [1,2,3,4,5]
console.log(arr);

3. 用接口表示数组

interface X {
  name: string,
  age?:number
}

let arr: X[] = [
  {name: '小满'},
  {name: '小青'}
]
console.log(arr);

4. 多维数组

let arr1:number[][] = [[1,2], [3,4]];
let arr2:Array<Array<number>> = [[1,2], [3,4]];
let arr3:any[] = [1, 'qwer', true, {}]
let arr4:[number, string, boolean, {}] = [1, 'qwer', true, {}]

在这里插入图片描述

5. arguments类数组

function Arr(...args:any): void {
  console.log(...args)
  console.log(arguments)
}
Arr(111, 222, 333)

在这里插入图片描述

function Arr(...args:any): void {
  console.log(arguments) 
  //ts内置对象IArguments 定义
  let arr:IArguments = arguments
}
Arr(111, 222, 333)

//其中 IArguments 是 TypeScript 中定义好了的类型,它实际上就是:
interface IArguments {
length: number;
callee: Function;
[index: number]: any;
}

6. any 在数组中的应用

let list: any[] = ['test', 1, [],{a:1}]
console.log(list);

二、函数的类型


1.函数(箭头函数)定义类型和返回值

  • 普通函数
function add(a:number, b:number):number{
  return a+ b
}
console.log(add(1,1));
  • 箭头函数
const add = (a:number, b:number):number => a+ b
console.log(add(1,1));

2.函数默认的参数和函数可选参数

  • 函数默认的参数
// 默认参数
function add(a:number=10, b:number=20):number{
  return a+ b
}
console.log(add(1));
  • 函数可选参数
//通过?表示该参数为可选参数
const fn = (name: string, age?:number): string => {
  return name + age
}
console.log(fn('张三'));

3.参数是一个对象如何定义

interface User{
  name: string
  age: number
}

function add(user:User){
  return user
}
console.log(add({name: '张三', age: 18}));

4. 函数this类型

interface Obj {
  user: number[]
  add:(this:Obj, num:number) => void
}

// ts可以定义this的类型 在js中无法使用 必须是第一个参数定义this的类型
let obj: Obj = {
  user: [1, 2, 3],
  add(this: Obj, num: number) {
    this.user.push(num)
  }
}
obj.add(4)
console.log('obj', obj);

5.函数重载

// 函数重载
let user:number[] = [1,2,3]
// 如果传入的是一个number类型的数组,添加操作
function findNum(add: number[]):number[]
// 如果传入的是id,查询操作
function findNum(id: number):number[]
// 如果没有传入, 查询全部
function findNum():number[]

function findNum(ids?:number | number[]):number[]{
  if(typeof ids == 'number'){
    return user.filter(v=>v === ids)
  }else if(Array.isArray(ids)){
    user.push(...ids)
    return user
  }else{
    return user
  }
}
console.log(findNum());
console.log(findNum(3));
console.log(findNum([4,5,6]));

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17343.html
标签
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!