TS的数组类型和函数类型

一、数组的类型

---

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]));