03 ts类型缩小,函数

类型缩小

函数类型

函数类型参数的个数

函数调用签名

函数构造签名(理解)

函数参数可选类型

参数默认值

剩余参数

函数的重载(了解)

联合类型与重载

函数中this的默认推导

不明确this类型

this内置工具使用(了解)

类型缩小

在开发中,我们可以增加判断等,来确定某个值到底是什么类型,来缩小他的值范围

而我们编写的判断语句称为类型保护

常见类型保护: typeof 平等缩小(=== == !== != switch) instanceof in 等等

进行类型缩小后,ts的代码提示更好

// typeof
function typeofFun(message: number|string) {if (typeof message === "string") {console.log(message.length);} else {console.log(message);}
}

函数类型

在js中函数作为一等公民,使用函数过程中,函数也有自己的类型,编写函数类型表达式,表示函数类型

function useFun(fn: (num1: number,num2: number) => number) {console.log(fn(10, 20));}function fun(num1: number, num2: number): number {return num1 + num2
}useFun(fun)// 函数赋值给变量
type Fun222 = (num1: number, num2: number) => number
const fun222: Fun222 = (num1: number, num2: number) => {return num1*num2
}useFun(fun222)

函数类型参数的个数

ts对于作为回调函数的参数个数是不进行校验的

type ParamsFn = (num1: number, num2: number)=>number
function counter(fn: ParamsFn) {fn()
}counter(function(){}) // 一个参数都没写,不报错,ts不进行校验// 我们在开发中使用匿名函数太多了,比如foreach需要三个参数,但我们经常只需要一个参数,如果ts要求传三个参数,开发体验不好

函数调用签名

当函数作为对象拥有其他属性可以被调用时，可以使用函数调用签名

// 平常函数类型声明
type FnType = (num1: number, num2: number)=>number
const myfn = (num1: number, num2: number)=>{return num1+num2
}
// 但是函数也是对象，对象上就有属性，当我们还想在对象上获取属性，这个对象又可以向函数那样调用interface IFnType: {name: string,age: number,(num1: number, num2: number): number // 括号里放参数，注意这里是冒号，冒号后面是返回类型
}
const MyFn2: IFnType = (num1: number, num2: number)=>{return num1+num2
}
MyFn2.name = 'zhao'
MyFn2.age = 15
MyFn2()// 总结： 如果只是描述函数类型本身（函数可以被调用），使用函数类型表达式
// 如果描述函数作为对象可以被调用，但还拥有其他属性时，可以使用函数调用签名

函数构造签名(理解)

当你想让别人传过来一个构造函数,你可以通过new去调用,你可以使用构造签名

class Person{}interface IPerson {new (): Person  // 在函数类型 () : 返回值前面加new,表示可以被new调用
}// 让别人传过来一个构造函数你进行new调用
function createPerson(fn: IPerson) {return new fn()
}createPerson(Person) // 这里传入一个类,相当于把构造函数传给他

函数参数可选类型

// 可选类型必须写后面
function funx(x: number, y?: number) {console.log(x,y);
}funx(20)
// 可选参数类型: 我们指定类型与undefined的联合类型

参数默认值

// 带默认参数的话最好写后面,写前面的话,funy(undefined,10)这样调用
function funy(x: number, y: number = 6) {console.log(x+y);
}
funy(20)

剩余参数

将不定量参数放到数组中

function sum(...nums: number[]){console.log(nums);
}sum(20,30)
sum(20,30,80)

函数的重载(了解)

// 需求number类型或string类型相加// 这样写不行,报错string与number联合类型不能+
// function sum(a: number|string, b: number|string ){
//     return a+b
// }// 写多个同名函数,会根据参数类型来执行函数体
function sum(a: number, b: number): number
function sum(a: string, b: string): string
function sum(a: any, b: any): any {return a+b
}
// 有实现体的函数不能被调用
console.log(sum(2,3));
console.log(sum("22","444"));

联合类型与重载

函数中this的默认推导

// ts认为函数eating有一个对应的this的外部对象info,所以在使用时,把this当做该对象,
// 我们不需要其他操作
const info = {name: "shi yun ya",eating: function() {console.log(this.name);}
}info.eating()

不明确this类型

// eating可以被任意调用,ts是推导不到this指向谁,所以要明确this,
// 第一个参数明确this.其他参数往后写
type ThisType = {name: string
}function eating(this: ThisType) {console.log(this.name);
}const info = {name: "shi yun ya",eating: eating
}info.eating()

this内置工具使用(了解)

03 ts类型缩小,函数相关推荐

【TypeScript笔记】03 - TS类型声明文件
导读开发环境版本号描述 node -v v14.18.3 npm -v 6.14.6 tsc -v 4.7.4 ts-node -v 10.9.1 概述类型声明文件:用来为已存在的JS库提供类 ...
ts类型声明declare
类型声明declare 1.概览 1.1 declare是什么前提:假如现在有一门用Typescript写的库,想供其他开发人员使用,有两种方式方式1 打包ts源文件(供ts用户使用)和编译后的j ...
【TypeScript】的类型缩小
文章目录类型缩小 typeof 平等缩小 instanceof in 类型缩小什么是类型缩小呢? 类型缩小的英文是 Type Narrowing: 我们可以通过类似于 typeof padding ...
ts入门笔记——ts类型声明和类型断言
最近玩csdn比较少,欢迎关注我的掘金:杨灿就是杨火山简单快速上手ts的学习路径: 一.熟悉掌握熟悉的强类型定义,初步学习编写强类型代码. 学习ts的声明变量类型,能够初步编写强类型代码: 学习ts ...
TS 类型体操还能这么玩，太秀了
最近在看 TypeScript 相关的内容,做了一下类型体操,真的太秀啦递归.infer 满天飞,今天就来领略一下 TS 能做什么骚操作吧! 先放上本文的几个小标题,很骚巧用数组上数学课模版字符 ...
使用typedef语句定义函数类型和函数指针
首先我们要先明白一个概念,函数名是不是指针?也就是说一个函数名可不可以代表一个地址?以及什么是函数类型? 经过查找,函数名就是一个指针,但是意义是不一样的,如同于数组a[],a和&a其实都是一 ...
TS复习-----TS中的函数
目录一.ts函数的定义二.ts中定义函数传参 1.函数传参方法 2.可选参数 3.默认参数 4.剩余参数函数重载一.ts函数的定义函数是一种特殊的对象,可以被调用.TS 里的函数和原生,ES ...
c语言字符串作为函数返回值的类型,返回字符串类型的函数怎么写？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼描述请判断一个数是不是水仙花数. 其中水仙花数定义各个位数立方和等于它本身的三位数. 输入有多组测试数据,每组测试数据以包含一个整数n(100< ...
给出一种符号表的组织方式和结构设计，要考虑数组类型和函数（不得与课件上的雷同）
给出一种符号表的组织方式和结构设计,要考虑数组类型和函数(不得与课件上的雷同) 给出一种符号表的组织方式和结构设计,要考虑数组类型和函数(不得与课件上的雷同) 符号表的组织方式和结构设计: nameT ...

03 ts类型缩小,函数

类型缩小

函数类型

函数类型参数的个数

函数调用签名

函数构造签名(理解)

函数参数可选类型

参数默认值

剩余参数

函数的重载(了解)

联合类型与重载

函数中this的默认推导

不明确this类型

this内置工具使用(了解)

03 ts类型缩小,函数相关推荐

最新文章

热门文章