1、函数

2、类

1、函数

（1）参数列表里面的每个参数都需要名称和类型（形参、实参、返回值都要）。我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

// 函数有两个参数，第一个参数表示数字，第二个表示任类型的数组
// 参数少了不行
// :[number,any[]]表示返回的是元组,第一个数字，第二个是任意类型的数组
function fm (arg1:number,arg2:any[]):[number,any[]]{
return [arg1*arg1,[10,"hello",arg2]]
}

let [x,y]=fm(100,[10,20,true]) // 解构赋值
console.log(x,y);

（2）为函数定义类型

// 声明式：只有一种

function add(x: number, y: number): number {
    return x + y;
}
// 定义式：只要是引用的方式都是
let myAdd = function(x: number, y: number): number { return x + y; };

区别：定义式可以改变this的指向，call、apply、bound

（3）可选参数和默认参数

可选参数加？号；

// 函数可选参数
// 接口
interface Params{
    params:object
}
// 要求arg2 是Params的类型，且必须带有params：object
function Myaxiosget(arg1:string,arg2?:Params){};
Myaxiosget('http://xxx',{params:{}}); // 可选或者不可选
Myaxiosget('http://xxx');

默认参数：如果给了默认值这个参数默认就是可选参数

// 函数默认参数
function fn(arg1:number,arg2:string='test'):void{
    console.log(arg1,arg2)
}
 
fn(100,'hello'); // 传了第二个参数，打印传的参数
fn(200)   // 没传第二个参数，打印默认的参数

cmd打印的结果如下

（4）函数参数位置问题

4.1 可选参数只能放在必选参数的后面，放在前面会报错。

function fn (arg1?:string,arg2:number){

}
fn('hello') // 报错

function fn (arg1:string,arg2?:number){

}
fn('hello') // 不报错

4.2 如果有两个参数可选，怎么调用？传 undefined

4.3 默认参数放在任意位置都可以

// 如果有两个参数可选，怎么调用？ 传undefined

function fn (arg1:string,arg2?:number,arg3?:boolean){
    console.log(arg1,arg2,arg3); // 打印 hello undefined true
    
    }
    fn('hello',undefined,true)


function fn (arg1:string,arg2?:number,arg3?:number){
console.log(arg1,arg2,arg3); // 打印 hello undefined 100

}
fn('hello',undefined,100)


// 默认参数放在任意位置都可以

function fn (arg1:string,arg2:number=100,arg3:number){
    console.log(arg1,arg2,arg3); // 打印 hello 100 200
    
    }
    fn('hello',undefined,200)

function fn (arg1:string="123",arg2?:number,arg3?:boolean){
    console.log(arg1,arg2,arg3); // 打印 123 undefined true
    
    }
    fn(undefined,undefined,true)

（5）剩余参数

1.1 当传的参数多了，不可能一一写完，就用剩余参数。想传多少就传多少。

// 剩余参数
function fn(arg1:number,arg2:string,...rest):void{
    console.log(arg1,arg2,rest);
}
fn(100,"hello",200,300);
fn(100,"hello",200);

1.2 表示剩余参数的类型是一个number类型的数组

function fn(...rest:number[]):void{
    console.log(rest);
    
}
fn(1,2,3)

（6）函数类型

第一种：定义式写法

// 定义式写法
let fn = function(arg1:number):number {
    return arg1+1
}
fn(10)

第二种：声明式写法

function fn(arg1:number):number {
    return 200
}

注意：函数通过参数和返回值来对函数进行分类

6.1 函数类型写法

// 函数类型写法
// (参数1：类型，参数2：类型，....)=>返回值类型
let fn:(number)=>number;

注意：这不是箭头函数，表示函数的类型是number，有一个形参，是number。

6.2 函数认准位置，不关心单词。

// 注意 arg2 和 arg3 的位置
let fn:(arg1:number,arg2:number,arg3:boolean)=>[number,number,boolean];
fn= function (arg1:number,arg3:number ,arg2:boolean) {
    return [arg1,arg3,arg2]
}

6.3 箭头函数，注意返回的值，和函数的类型区别开来

let fn=(arg1:number):number=>arg1;

6.4 前面箭头表示函数返回的类型，后面表示箭头函数

let fn:(number)=>number=(arg1:number):number=>arg1;

6.5 返回类型是函数的必要类型，如果不写，加void。

可以不加返回值return。

// 不写return ，加void
function fn(arg:number):void{
    console.log(arg)
}

// 写return，写返回值的类型
function fn(arg:number):number{
    return 10;
}

// 定义式函数不加return，写void的写法
let fn:(number)=>void

6.6 描述函数类型的另外一种方式

interface 接口表示方式，用在对象上。

(number)表示参数的类型

：number 表示返回值的类型

interface mytool {
    (number): number
    // 表示参数的类型
}

let fn:mytool;
fn = (arg:number):number=>{
    return arg+1;
}

6.7 难点开发时不这样写

arg3 表示返回值是元组的类型

注意元组和数组的区别

数组：any[]

元组：[]

2、类

（1）类的定义

1. 定义类的关键字为 class；

2. 类体中声明类的成员(都是可选的)

- 字段 − 也就是属性，可包含0到多个
- 构造函数 − constructor，可包含0到1个
- 方法 − 也就是行为动作，可包含0到多个

（2）类的属性

class Person {
    constructor() {
        console.log(123);
        // 如果写了constructor就是调用自己写的，不写会有一个默认的空的constructor调用
        // new 创建对象的时候 会自动去调用构造函数
    }

    say() {
        console.log("say被调用了");

    }
}

let p1: Person = new Person;
console.log(p1);
p1.say()

（3）类属性的声明

TS 只能在类内部提前声明，成员只能在类里面写，脱离了类就会报错，所以统一在类里面声明未来创建的对象声明属性。

TS基础了解二

1、函数

2、类

1、函数

2、类

猜你喜欢