typescript入门之：如何使用、不限定函数参数的个数传参、interface约束（对象、函数、数组、类）、定义可选参数

一、如何使用

1、全局安装ts（仅需安装一次）npm / cnpm install -g typescript
2、在项目文件里打开cmd，输入tsc --init，出现tsconfig.json配置文件
3、修改tsconfig.json的 “outDir” ，确认编译成的js文件的输入路径
4、编译环境（如vs code）——找到“运行任务”——选择“监听tsconfig.json”

如此一来，编写ts代码，就会即时生成编译成的js代码

二、不限定函数参数的个数传参

// 用“...” 传递不定个数参数
function sum(...params:number[]):number{
    
    let result = 0;
    for(let i=0;i<params.length;i++){
        result += params[i]; 
    }
    return result;
}

sum(1,2,3,4,5);//15
sum(1,2,3);   //6

三、interface约束

1、约束【对象属性】

interface person{
    name:string;
    age:number;
}
function getPerson(p1:person):void{
    alert(p1.name+p1.age);
}

//直接传参的话，会约束传入的对象必须含有name和age这两个key属性，多了少了都会提示错误
getPerson({name:"大猪猪", age:28});

//先创建对象，再传参，则多个key属性也不会报错（如以下多了tall属性），但是缺key则会报错
let p2={name:"小猪猪", age:29, tall:150};
getPerson(p2);

2、约束【函数类型】

//关注语法即可，输入参数用小括号，后面带输出参数
interface someFunction{
    (key:string, value:string):string;
}

let f:someFunction=function(key:string, value:string):string{
    return key+value;
}

3、约束【数组、对象】

//该类型的数据index只能是数字，说明该类型数据是数组————不常用
interface F1{
    [index:number]:string;
}
let f1:F1=["haha"];

//该类型的数据index只能是string，说明该类型数据是字典（key-value形式）————不常用
interface F2{
    [index:string]:number;
}
let f2:F2={"age":10};

4、约束【类】

interface Animal{
    name:string;
    eat(food:string):void;
}
class Cat implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(food: string): void {
        alert(this.name + " eat " + food);
    }
}

let cat=new Cat("小花猫");
cat.eat("老鼠");        //  小花猫 eat 老鼠

四、可选参数

在可选参数名后加“？”，表示该参数可输入可不输入

1、函数

function dynamicParams(name:string, age?:number):void{
    if(age){
        console.log(name+age);
    }else{
        console.log(name);
    }
}

dynamicParams("麦小兜");      //麦小兜
dynamicParams("麦小兜", 29); //麦小兜29

2、接口

//同样表示person的age属性可有可不有
interface person{
    name:string;
    age?:number;
}