zoukankan      html  css  js  c++  java
  • typescript中使用Object.keys

    开发中使用typescript的时候,经常会遇到使用 Object.keys 这个方法报错的情况,报错如下:

    错误场景1

    var foo = {
        a: '1',
        b: '2'
    }
    
    var getPropertyValue = Object.keys(foo).map(item => foo[item]) // 这里会有typescript的错误提示

     错误场景2

    var foo = {
        a: '1',
        b: '2'
    }
    
    function getPropertyValue(obj, key) { // 这里也会提示obj会有any类型
        return obj[key]
    }

    场景1解决方案:

    通过 keyof 的方式可以获取ts 类型的属性key的值

    var foo = {
        a: '1',
        b: '2'
    }
    // 这里typeof foo => foo的类型 等同于 interface Foo { a: string; b: string; }
    // typeof foo === Foo,这里只所以用 typeof foo,因为这样方便,对于不想写interface的直接量对象很容易获取它的类型
    // keyof typeof foo这里只获取 Foo的类型key值,注意这个keyof后面一定是 typescript的类型
    type FooType = keyof typeof foo; 

    var getPropertyValue = Object.keys(foo).map(item => foo[item as FooType])

    场景2解决方案:

    var foo = {
        a: '1',
        b: '2'
    }
    // 这里声明了两个泛型 TK
    // T
    代表函数第一个参数的类型,K 代表函数第二个参数的类型这个类型指向第一个参数类型中包含的key的值
    function getPropertyValue<T, K extends keyof T>(obj:T, key:K):T[K] { return obj[key] } getPropertyValue(foo, 'a')

    总结:

    这里涉及到typescript的两个知识点

    1、keyof的用法

    2、泛型的用法

  • 相关阅读:
    Chapter 7 Integrity(完整性), Views(视图), Security(安全性), and Catalogs(目录)
    Qt计时器
    linux命令:linux文件处理命令
    JSON.stringify()的不常见用法
    flex知识点归纳
    css伪类
    开发资源汇总
    Math.cbrt() Math.sqrt() Math.pow()
    代码开发注意事项和规范
    关于数组数据容易忽略的点
  • 原文地址:https://www.cnblogs.com/hellolol/p/13371902.html
Copyright © 2011-2022 走看看