TypeScript判断对象类型的四种方式

- 日理万妓 2024-03-26 12:36 30阅读 0赞

#### 一、typeof ####

typeof "";  //string
    typeof 1;   //number
    typeof false; //boolean
    typeof undefined; //undefined
    typeof function(){}; //function
    typeof {}; //object
    typeof Symbol(); //symbol
    typeof null; //object
    typeof []; //object
    typeof new Date(); //object
    typeof new RegExp(); //object

#### 二、**instanceof** ####

{} instanceof Object; //true
    [] instanceof Array;  //true
    [] instanceof Object; //true
    "123" instanceof String; //falsenew String(123) instanceof String; //true

#### **三、**constructor ####

#### **四、**Object.prototype.toString() ####

function getType(obj){
      let type  = typeof obj;
      if(type != "object"){
        return type;
      }
      return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
    }

**使用案例：**

<script setup lang="ts">
    
    const vFocus = {
      mounted: (el: HTMLElement, binding: any) => {
        // 指令绑定的元素
        console.log(typeof el);
        console.log(el);
        // 指令绑定的参数
        console.log(binding)
    
        // 如果是输入框
        if (el instanceof HTMLInputElement) {
          // 元素聚焦
          el.focus();
          el.placeholder = '请输入';
          el.value = '勤奋、努力'
        }else if (el instanceof HTMLAnchorElement) {
          // 如果是<a>标签我们就导向 百度翻译
          el.href='https://fanyi.baidu.com/'
        }
      }
    }
    </script>
    
    <template>
      <input v-focus/>
      <p/>
      <a v-focus href="https://www.baidu.com/">百度一下，你就知道</a>
    </template>

![2adc2ed449c8408c81eb7b47081cc18e.png][]

[2adc2ed449c8408c81eb7b47081cc18e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3fe3bc1b0fde4c259c4c5e67b6db96c0.png