目录
一、函数
参数列表里面的每个参数都需要名称和类型。
1、为函数定义类型
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。
TypeScript能够根据返回语句自动推断出返回值类型，因此我可以省略它。
函数形参必须声明数据类型，返回值可以不声明数据类型（根据函数体种的逻辑推到出的）
//声明式，作用域中直接声明function
function add(x: number, y: number): number {
return x + y;
}
function fm(n1:number,n2:string):[number,string]{
return [n1*2,n2]
}
function fm3(n1:number,n2:string):any[]{
return [n1*2,n2,100]
}
//定义式（当作数据引用）
let myAdd = function(x: number, y: number): number { return x + y; };
let obj={fn:function():void{}};
let arr=[function():void{}];
(function(n:number):number{return n*2})(100)2、可选参数和默认参数
传递给一个函数的参数个数必须与函数期望的参数个数一致。
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right在TypeScript里我们可以在参数名旁使用 `?`实现可选参数的功能。
可选参数必须跟在必选参数后面
当然，还可以给参数设置默认值，在所有必选参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。
ps:带默认值的参数不需要放在必选参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 `undefined`值从而来获得默认值。
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // works correctly now
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right
function fn(a1:number,n1?:number,n2?:string):Array<number|string>{
return [a1,n2]
}
fn(100) //因为第二个参数没传，所以是unde，在非严格模式下可以将undef传给任何类型
fn(100,100,"hello")
function fm (n2:string,n3?:number,n1:number=100) { //n1是可选默认
}
fm("hello")3、剩余参数
在js里面叫rest参数 ...restArr。必须写在最后面
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
function fm (n1:number,n2:string,...reset) {
console.log(reset)
}
fm(10,"hello",10,203,405,[10]) // [10,203,405,[10]]
fm(10,"hello") //[]
function fg (n1:number,n2:string,...reset:[number,string]) { //如果这样写元组，那参数必须传
console.log(reset) //[100,"hello"]
}
fg(10,"hello",100,"hello")
function fg2 (n1:number,n2:string,...reset:number[]) {
console.log(reset)
}
fg2(10,"hello",100,"hello") //报错
fg2(100,"helloo")
fg2(100,"helloo",10,203,4)
fg2(100,"helloo",[10,203,4]) //报错
function fg (n1:number,n2:string,...reset:[number,string]):[any[],Array<number>] {
return [[10,203,true],[10,20]]
}
fg(100,"hello",10,"hello")4、函数类型变量
-
变量的类型可以声明为函数类型;
let myAdd: (x: number, y: number) => number =
function(x: number, y: number): number { return x + y; };2.函数类型属于自定义类型，包含两部分：参数类型和返回值类型；
//声明一个变量并指定类型为自定义的函数类型
let myadd:(x:number, y:number)=>number;
//声明一个函数
function add(x: number, y: number): number {
return x + y;
}
//把函数赋值给类型为函数类型的变量
myadd = add;
//赋值匿名函数
myadd = function(x: number, y: number): number {
return x + y;
}
//赋值箭头函数
myadd = (x: number, y: number):number=>{
return x + y;
}3.只要参数类型是匹配的，那么就认为它是有效的函数类型，并不要求参数名一样，很多时候参数名是为了增加可读性
let myAdd: (baseValue: number, increment: number) => number =
function(x: number, y: number): number { return x + y; };4.在函数和返回值类型之前使用( `=>`)符号，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 `void`而不能留空。
//这里是声明c变量是一个函数类型 函数类型的写法 必须是: (某某参数类)=>返回值 这个格式不是箭头函数只是表达函数类型的表达式
let c:(n1:number,n2:[number])=>[number,string];
//然后将c赋值给声明式的函数
c=function(agr1:number,arg2:[number]):[number,string]{
return [100,"hello"]
}
//也可以把c赋值给箭头函数
c=(a1:number,a2:[number]):[number,string]=>{
return[10,"a"]
}5、使用接口封装函数变量类型
接口可以描述函数类型；为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。
自定函数类型代码往往很长，可以使用接口来封装该类型，之后使用接口来代表该类型
//函数类型接口
interface addType {
(baseVaule:number, increValue:number):number
}
function add(x: number, y: number): number {
return x + y;
}
let myadd1:addType = add;
let myadd2:addType = (x:number, y:number):number=>{
return x+y;
}
interface UseEffect{
():[] //没有参数，返回值是没有值的元组
}eg：
interface callback1{
(number):number
}
interface UseEffect{
(number,callback1):[number]
}
interface obj1{ //对象
age:number,
name:string
}
interface UseMemo{
(obj1):[obj1,UseEffect]
}
let reactuseEfeect:UseMemo;
reactuseEfeect=function(arg1:obj1):[obj1,UseEffect] {
function fg(n1:number,n2:callback1):[number]{
return [100]
}
return [{age:20,name:"karen"},fg]
}
let [x,y]=reactuseEfeect({age:20,name:"karen"})
// y的使用
y(100,function(arg:number):number{
return 1
})