本文已参与「新人创作礼」活动,一起开启掘金创作之路。

数组

数组与函数是开发中必不可少的类型之一，下面就学习一下数组与函数的ts写法以及新功能

第一种写法类型[]

    let arr:string[]=["1","2","3"];字符串数组
    let num:number[]=[1,2,3,4,5,6];数字数组
    interface A{
        name:string,
        age:number
    }
    let obj:A[]=[{
        name:"张三"，
        age:18,
    },{
        name:"丽丝",
        age:20
    }]

多维数组

//注意这种写法数组里每个元素都必须同样是数组并且元素类型必须为number型，只有在确定好数据类型才可以这样写。

   let num:number[][]=[[1],[2],[3],[5]]
   let num:Array<Array<number>>=[[1],[2],[3],[5]]

第二种写法泛型 Array<类型>

    let arr:Array<string>=["1","2","3"];字符串数组
    let num:Array<number>=[1,2,3,4,5,6];数字数组
    interface A{
        name:string,
        age:number
    }
    let obj:Array<A>=[{
        name:"张三"，
        age:18,
    },{
        name:"丽丝",
        age:20
    }]

使用接口实现数组

数组是一个特殊对象，只不过对象的键是无序的 必须为字符串，在上一章节中我们学习了任意属性。可以使用它来实现数组定义

//实现了一个number数组
interface Array {
    [index: number]: number;
}
let fibonacci: Array = [1, 1, 2, 3, 5];
//表示：只要索引的类型是数字时，那么值的类型必须是数字。

实现类数组

类数组与数组基本相同

   interface IArguments {
       [index: number]: any;
       length: number;
       callee: Function;
   }
   play(1,2,3,4,5);
   
   function play(...arg){
       consolr.log(arg) //[1,2,3,4,5]
       console.log(arguments) {0:1,1:2,2:3,4:5}
   }

函数

//注意，参数不能多传，也不能少传 必须按照约定的类型来
const fn = (name: string, age:number): string => {
    return name + age
}
fn('TiGa',3000)
//使用别名提前定义号函数的参数返回值类型
type fun=(name:string,age:number)=>string
const fn:fun= (name, age) => {
    return name + age
}
fn('TiGa',3000)

参数可选

当函数参数有多个并且想要根据参数多少实现不同功能时可以设置为可选参数

参数默认值

参数默认值的设置与平常写js是一样的

    //只需要传一个参数即可
    play("Tiga")
    function play (name:string,age=3000){
        console.log("我是"+name+"我"+age+"岁")
    }

函数重载

在Java中同名函数根据参数不同会进入不同函数执行。这种被称为函数重载，在ts里面也实现了这种功能。不过与java不同ts不支持多个实现方法只能在一个方法里面通过参数来实现不同功能

    function play(name: string): void;
    function play(name: string, age: number): string;
    function play(name: string, age: number, hobby: string): number;

    function play(name: string, age?: number, hobby?: string) {
       if (name && !age && !hobby) console.log(name)
       if (name && age && !hobby) return name + age;
       if (name && age && hobby) return age
    }
    play("TiGa")
    play("TiGa", 18)
    play("TiGa", 18,"打篮球")

定义函数接口

可以通过type或者interface来约束函数当然也可以直接在函数上进行约束，不过还是推荐进行抽离，方便复用

//定义参数 num 和 num2  ：后面定义返回值的类型
interface Add {
    (num:  number, num2: number): number
}
 type Add=(num:  number, num2: number)=> number

const fn: Add = (num: number, num2: number): number => {
    return num + num2
}
fn(5, 5)

函数剩余参数

与js拿到剩余参数是一样的，不过就是多了一个类型约束

const fn = (name:string,...items:any[]):void => {
       console.log(name,items)//"TiGa" [4,5,6]
}
fn("TiGa",4,5,6)

TS从入门到精通（三）数组与函数

数组

第一种写法 类型[]