TypeScript函数和类型断言实例详解

目录
  • 开始
  • 断言
    • 非空断言
    • 类型断言
      • 尖括号
      • as
    • 确定赋值断言
  • 类型守卫
    • trpeof
    • in
  • 函数
    • 可选参数
    • 默认值参数
    • 函数重载
  • 结束

开始

现在要加速学习了,大佬们有没有内推,给个推荐

会vue2/vue3 + ts

断言

非空断言

非空断言就是确定这个变量不是null或者undefined,就是把null或者undefined从他的类型中排除

function demo(message:string|undefined|null) {
    const str: string = message
}
demo(undefined)

此时我们没有用非空断言,message的值是undefined和null,所以不能赋值给str,此事运行会报错(Type 'string | null | undefined' is not assignable to type 'string'.Type 'undefined' is not assignable to type 'string'.)

如果用上非空断言

let message:string
function demo(message:string|undefined|null) {
    const str: string = message!
}
demo(undefined)

此时代码没有问题

类型断言

确定此时的变量类型

尖括号

我们可以用尖括号

let message: any = "scc"
let mesLength:number = (<string>message).length

as

as用来判断变量是不是后面的类型

let message: any = "scc"
let mesLength:number = (message as string).length

确定赋值断言

这个变量一定会被赋值,就可以使用确定赋值断言

let message!:string

变量名后面添加一个!就可以

类型守卫

ts类型守卫就是起到一个缩小类型范围作用

trpeof

typeof关键字可以使用===判断此时的类型是什么

function demo(message: string | number | boolean) {
    if (typeof message === "string") {
        message.toUpperCase()
    }
}

此时message的类型被缩小成string类型,所以能调用toUpperCase方法

道理很简单,相信有一定基础的同学很快就会明白

in

in用来判断变量是否在类型范围内

interface Person {
    name: string
    age:number
}
interface Dog {
    name: string
    walk:string
}
type x = Dog|Person
function all(emp: x) {
    if ("walk" in emp) {
        console.log(d.walk);
    }
}

函数

可选参数

参数可以设成可选参数,可选参数最好在必填参数和有默认值的参数后面

function demo(num:number,str?:string){
}

默认值参数

function demo(num:number,bol:boolean = true,str?:string){
}

bol就是有默认值的参数,如果传值,那么值为传来的值,不传就是默认值

函数重载

函数重载可以让函数根据传值得类型,自动选择应该执行的函数

function add(a1: number, a2: number):number
function add(a1: string, a2: string):string
function add(a1: any, a2: any):any {
        return a1 + a2
}
console.log(add(20,30));
console.log(add("scc","brd"));

当我们传入不同的值时,会返回调用不同的函数

结束

到此这篇关于TypeScript函数和类型断言的文章就介绍到这了,更多相关TS函数和类型断言内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • TypeScript中的函数和类你了解吗

    目录 函数 作为参数 定义函数 函数参数的类型 可选类型 参数默认值 剩余参数 this的默认推导 函数重载 类 初始化 继承 多态 成员修饰符 总结 函数 以下声明了一个函数类型,通过type来定义类型别名,void 表示没有返回值 type fnType = () => void; 作为参数 函数可以作为参数,传递到另一个函数中 type fnType = () => void; function foo(fn: fnType) { fn(); } function bar() { con

  • TypeScript的函数定义与使用案例教程

    TypeScript中函数的定义和使用 1. 声明一个函数约束其传参类型,以及返回值类型 传入两个参数,没有返回值 const fun1 = (key: string, value: number): void => { console.log(key, value);//"Typescript",100 }; fun1("Typescript", 100); 2.TypeScript中的函数配置可选参数,在ES5或者ES6中函数中的实参可以不传递进去,但是在

  • TypeScript中的函数

    目录 1.函数定义 1.1JavaScript中的函数 1.2TypeScript中的函数 3.可选参数和默认参数 4.剩余参数 1.函数定义 1.1JavaScript中的函数 在学习TypeScript中的函数前我们先来回顾一下JavaScript中的函数定义常用的包含以下几种: 第一种:使用function关键字声明函数 function add1 (x, y) { return x + y } 第二种:使用字面量方式声明函数 const add2 = function (x, y) {

  • TypeScript函数和类型断言实例详解

    目录 开始 断言 非空断言 类型断言 尖括号 as 确定赋值断言 类型守卫 trpeof in 函数 可选参数 默认值参数 函数重载 结束 开始 现在要加速学习了,大佬们有没有内推,给个推荐 会vue2/vue3 + ts 断言 非空断言 非空断言就是确定这个变量不是null或者undefined,就是把null或者undefined从他的类型中排除 function demo(message:string|undefined|null) { const str: string = messag

  • JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

    前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过正.那关于eval和with到底是什么情况呢?本文将详细介绍eval()函数和with语句 eval 定义 eval()是一个全局函数,javascript通过eval()来解释运行由javascript源代码组成的字符串 var result = eval('3+2'); console.log(result,typeof result)

  • Spring MVC自定义日期类型转换器实例详解

    Spring MVC自定义日期类型转换器实例详解 WEB层采用Spring MVC框架,将查询到的数据传递给APP端或客户端,这没啥,但是坑的是实体类中有日期类型的属性,但是你必须提前格式化好之后返回给它们.说真的,以前真没这样做过,之前都是一口气查询到数据,然后在jsp页面上格式化,最后展示给用户.但是这次不同,这次我纯属操作数据,没有页面.直接从数据库拿数据给它们返数据.它们给我传数据我持久化数据,说到这里一个小问题就默默的来了. 首先把问题还原一下吧(这是一个数据导出功能),下图中用红框圈

  • Sql Server 开窗函数Over()的使用实例详解

    利用over(),将统计信息计算出来,然后直接筛选结果集 declare @t table( ProductID int, ProductName varchar(20), ProductType varchar(20), Price int) insert @t select 1,'name1','P1',3 union all select 2,'name2','P1',5 union all select 3,'name3','P2',4 union all select 4,'name4

  • python open函数中newline参数实例详解

    目录 问题的由来 具体实例 总结 问题的由来 我在读pythoncsv模块文档 看到了这样一句话 如果 csvfile 是文件对象,则打开它时应使用 newline=‘’.其备注:如果没有指定 newline=‘’,则嵌入引号中的换行符将无法正确解析,并且在写入时,使用 \r\n 换行的平台会有多余的 \r 写入.由于 csv 模块会执行自己的(通用)换行符处理,因此指定 newline=‘’ 应该总是安全的. 我就在思考open函数中的newline参数的作用,因为自己之前在使用open函数时

  • TypeScript顺时针打印矩阵实现实例详解

    目录 前言 梳理思路 实现代码 示例代码 前言 有一个矩阵,如何按照从外向里以顺时针的顺序依次打印出每一个元素?本文将跟大家分享下这个算法,欢迎各位感兴趣的开发者阅读本文. 梳理思路 当我们遇到一个复杂的问题时,可以通过举例将它画出来,这样就可以更直观的发现规律.那么我们就先构造一个矩阵出来,如下所示: const matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16] ]; 顺时针访问一个矩阵,那么它的访

  • awk正则表达式和内置函数的使用方法实例详解

    awk正则表达式及内置函数实例详解: 1.模糊匹配: 复制代码 代码如下: awk '{if($3~/97/) print $0}' data.f:如果第三项中含有"97"则打印该行 awk '{if($4!~/ufcx/) print $0}' data.f:如果第三项中不含ufcx有则打印 2.精确匹配: 复制代码 代码如下: awk '{if($5==66) print $0}' data.f:如果第五项是66则打印 awk '{if($5!=66)print $0}' data

  • TypeScript 的条件类型使用示例详解

    目录 TypeScript 的条件类型使用方式 条件类型和 keyof 组合 在条件返回中使用 T 在类型输出中使用 T 时的联合类型 使用条件类型推断类型 总结 TypeScript 的条件类型使用方式 我们可以使用 TypeScript 中的条件类型来根据逻辑定义某些类型,就像是在编写代码那样. 它采用的语法和我们在 JavaScript 中熟悉的三元运算符很像:condition ? ifConditionTrue : ifConditionFalse. 我们来看看他是怎么工作的. 假设我

  • Python定义函数功能与用法实例详解

    本文实例讲述了Python定义函数功能与用法.分享给大家供大家参考,具体如下: 1.函数的意义 一般数学上的函数是,一个或者几个自变量,通过某种计算方式,得出一个因变量. y = f(x) 在Python中,为了使操作更加简洁,就引入了函数这个概念. Python中的函数,可以把一大串要反复使用的代码"定义"(封装)成一个函数,给予这个函数一个标识符作为函数名,设置自变量和因变量.然后要使用这一大串代码的时候,就调用这个我们自己创造的函数,输入自变量,然后会返回给我们因变量. 2.函数

  • ES6中Symbol类型用法实例详解

    本文实例讲述了ES6中的Symbol类型.分享给大家供大家参考,具体如下: Symbol是在ES6中新加入的类型. 正如我们所知,JavaScript中有以下几种类型: Undefined ,Null ,Boolean ,Number ,String, Object. 但是上述类型在处理某些情况的时候是远远不够的.下面我们来举一个例子: 假设我们要移动div,也需要在某些情况下判断该div是否处于移动状态,所以我们会想到给div这类的对象设置一个属性. if (element.isMoving)

随机推荐