专栏首页方球typescript入门-高级类型

typescript入门-高级类型

交叉类型

交叉类型是将多个类型合并为一个类型

interface Man{
  name:string
}
interface Job{
  position:string
}
type clerk = Man & Job


const c:clerk = {
  name: 'x',
  position: 'x'
}

联合类型

联合类型表示一个值可以是几种类型之一

type status = string | number
const c:status = 0
const b:status = 'x'
  • 只能访问此联合类型的所有类型里共有的成员
interface A{
  name:string
  count:number
}
interface B{
  name:string
  color:string
}
type C = A | B
const c:C = { name:'xx', count: 10 }
console.log(c.name) // okay
console.log(c.count) // error

类型区分

通过类型区分,确定联合类型的具体类型

  • 属性判断
let pet = getSmallPet();


// 每一个成员访问都会报错
if (pet.swim) {
    pet.swim();
}
else if (pet.fly) {
    pet.fly();
}
  • 断言
let pet = getSmallPet();


if ((<Fish>pet).swim) {
    (<Fish>pet).swim();
}
else {
    (<Bird>pet).fly();
}

类型保护

类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域里的类型。 既是通过一次类型判断,值在当前作用域下类型为确定值

  • 函数类型保护

返回类型谓词 的断言函数

function isFish(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}
  • typeof 类型保护
function padLeft(value: string, padding: string | number) {
    if (typeof padding === "number") { // 通过 typeof 明确值类型
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}
  • instanceof 类型保护
interface Padder {
    getPaddingString(): string
}


class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString() {
        return Array(this.numSpaces + 1).join(" ");
    }
}


class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString() {
        return this.value;
    }
}


function getRandomPadder() {
    return Math.random() < 0.5 ?
        new SpaceRepeatingPadder(4) :
        new StringPadder("  ");
}


// 类型为SpaceRepeatingPadder | StringPadder
let padder: Padder = getRandomPadder();


if (padder instanceof SpaceRepeatingPadder) {
    padder; // 类型细化为'SpaceRepeatingPadder'
}
if (padder instanceof StringPadder) {
    padder; // 类型细化为'StringPadder'
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从C#到TypeScript - 高级类型

    C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不...

    用户1147588
  • TypeScript: 常用的高级类型

    今天这篇文章分享的内容挺简单,却应该引起重视,在实践场景中各种交叉使用又会让内容变得复杂。因此掌握基础不难,在实践中的思考与总结则是我们更应该随时要做的事情。

    用户6901603
  • typescript入门-基础类型

    copy_left
  • typescript 入门-工具类型

    copy_left
  • TypeScript高级类型与实用程序

    我们一起来看一下今天的大纲,希望这些高级类型 与实用程序能够帮助大家节省一些开发的时间:

    疯狂的技术宅
  • TypeScript系列教程九《高级类型》

    这个技巧在运行时赋值表达式十分有用,例如冷冻一个对象( frozen object)):

    ZY_FlyWay
  • typescript入门-类

    copy_left
  • TypeScript中的高级类型工具类型及关键字

    本文主要帮助理解 TypeScript 中的高级类型及工具类型。在实际使用 TypeScript 的开发过程中,得益于这些高级类型于工具类型,我们可以更方便的构...

    路过的那只狗
  • 速查手册 - TypeScript 高级类型 cheat sheet

    温馨提示:因微信中外链都无法点击,请通过文末的” “阅读原文” 到技术博客中完整查阅版;(本文整理自技术博客)

    JSCON简时空
  • TypeScript高级类型备忘录(附示例)

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    刘小夕
  • TypeScript入门笔记(二):数据类型

    为了使编写的代码更规范,更有利于维护,增加了类型校验,写 ts 代码必须指定类型。typescript中除了es5中的常见数据类型之外还多了元组类型tuple、...

    王小婷
  • typescript入门-泛型

    copy_left
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    桃翁
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    ConardLi
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    前端达人
  • TypeScript 高级类型总结(含代码案例)

    TypeScript 是一种类型化的语言,允许你指定变量、函数参数、返回的值和对象属性的类型。

    疯狂的技术宅
  • 类型即正义:TypeScript 从入门到实践(三):类型别名和类

    学习了注解函数,又了解了类型运算如联合类型和交叉类型,接下来我们来了解一些 TS 中独有的类型别名,它类似 JS 变量,是类型变量,接着我们还会学习 TS 中内...

    一只图雀
  • 类型即正义:TypeScript 从入门到实践(一)

    JavaScript 已经占领了世界上的每一个角落,能访问网页的地方,基本上就有 JavaScript 在运作,然而 JavaScript 因为其动态、弱类型、...

    一只图雀
  • Vite2 + Vue3 + Typescript 入门级教程

    页面上我们需要输入框输入内容之后,回车触发向仓库添加数据,在 views/home.vue 添加如下代码:

    公众号---人生代码

扫码关注云+社区

领取腾讯云代金券