TS 類型收窄教程示例詳解

更新時(shí)間：2022年09月20日 14:20:34 作者：dingsheng

這篇文章主要為大家介紹了TS 類型收窄教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

JS方法

typeof

缺點(diǎn)

typeof null —→ object
typeof 數(shù)組 —→ object
typeof 日期 —→ object

a instanceof A : A 是否出現(xiàn)在a的原型鏈上

缺點(diǎn)

不支持string 、number 、boolean 等原始類型

不支持TS的自定義類型，如下：

type Person {
  name: string
}

key in obj
Array.isArray()

????類型謂詞is

重點(diǎn)在 shape is Rect

type Rect = {
  width: number
  height: number
}
type Circle = {
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(isRect(shape)) {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}
const isRect = (shape: Rect | Circle): shape is Rect => {
  return 'width' in shape && 'height' in shape
}

????????可辨別聯(lián)合

要求：T = A | B | C

A | B | C … 要有一個(gè)相同的屬性 type或其它
type類型只能為簡(jiǎn)單類型
A | B | C …的type屬性無(wú)交集

type Rect = {
  type: 'rect',
  width: number
  height: number
}
type Circle = {
  type: 'circle'
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(shape.type === 'rect') {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}

以上就是TS 類型收窄教程示例詳解的詳細(xì)內(nèi)容，更多關(guān)于TS 類型收窄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

TypeScript中類型收窄的具體使用

相關(guān)文章

fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
詳解lodash中的cloneDeep使用細(xì)節(jié)
這篇文章主要為大家介紹了詳解lodash中的cloneDeep使用細(xì)節(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
JavaScript中isPrototypeOf函數(shù)
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)，isPrototypeOf() 是 Object函數(shù)（類）的下的一個(gè)方法，用于判斷當(dāng)前對(duì)象是否為另外一個(gè)對(duì)象的原型，如果是就返回 true，否則就返回 false，下面來(lái)看看詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
為輸入框加入數(shù)字js校驗(yàn)代碼分享
這篇文章主要介紹了為輸入框加入數(shù)字js校驗(yàn)代碼分享，還是比較不錯(cuò)的，這里分享給大家，供需要的朋友參考。
2017-11-11
微信小程序教程之wxapp視圖容器 scroll-view
這篇文章主要介紹了微信小程序教程之wxapp視圖容器 scroll-view的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JavaScript集成公式編輯器示例詳解
這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
微信小程序緩存（本地緩存、異步緩存、同步緩存）詳解
這篇文章主要介紹了微信小程序緩存（本地緩存、異步緩存、同步緩存）詳解的相關(guān)資料,需要的朋友可以參考下
2017-01-01
JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序動(dòng)畫的簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序動(dòng)畫的簡(jiǎn)單實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
2017-10-10
JavaScript監(jiān)測(cè)數(shù)據(jù)類型方法全面總結(jié)
這篇文章主要為大家介紹了JavaScript監(jiān)測(cè)數(shù)據(jù)類型方法示例全面總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08