• 如何将变量用作typescript的类型注解


    我们在学习typescript的时候都知道一个概念:变量声明空间

    意思是说,一些用 var 声明的变量,也只能在变量声明空间使用,不能用作类型注解。

    官网中给出的例子是这样的:

    const foo = 123;
    let bar: foo; // ERROR: "cannot find name 'foo'"
    
    • 1
    • 2

    那么在实际使用过程中,如果我们需要将foo作为类型注解我们该怎么办呢?

    其实只需要在变量前面加一个typeof就可以了。

    const foo = 123;
    const bar:typeof foo = 123;
    const bar2:typeof foo = 13; // ERROR: "Type '13' is not assignable to type '123'."
    
    • 1
    • 2
    • 3

    这样就可以直接使用已定义的变量作为类型注解了。

    需要注意的是定义变量用的关键字对结果是有影响的,可以这么理解const
    是严格的,let是宽泛的。

    let foo = 123;
    const bar:typeof foo = 123;
    const bar2:typeof foo = 13; 
    const bar3: typeof foo = '13'; // Type 'string' is not assignable to type 'number'.
    
    • 1
    • 2
    • 3
    • 4

    从上面的例子可以看出,const要求变量必须等于123,而let只需要是个number就可以了。

    我稍微对这个规律做了个总结:

    变量类型constlet
    numberselfnumber
    stringselfstring
    booleanselfself
    nullselfself
    undefinedselfself
    SymbolselfSymbol
    Object遵循Object结构,内部属性类型是宽泛的遵循Object结构,内部属性类型是宽泛的
    Array可以包含数组中已存在的宽泛类型可以包含数组中已存在的宽泛类型

    我们主要来看看ObjectArray的例子吧。

    let foo = {key: 123, a: {b: 1}};
    const bar:typeof foo={key: 12, a:{b:123}}; // success
    const bar1:typeof foo={key: 123}; // Error: Property 'a' is missing in type '{ key: number; }' but required in type '{ key: number; a: { b: number; }; }'.
    
    let foo = [1, '2', 3];
    const bar:typeof foo=[1, 2, '3323', 'true', 1232]; // success
    const bar1:typeof foo=[1, 2, '3323', 'true', false, 1232]; // Error: Type 'boolean' is not assignable to type 'string | number'.
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    注:我虽然总结了这些东西,但是完全是出于好奇,我个人是非常不推荐直接使用变量作为类型注解的。还是使用独立的类型注释文件来进行类型定义比较好,既便于维护,也易于理解。除非万不得已,就不要自己折腾自己了。

  • 相关阅读:
    新版jdk的keytool没有md5,怎么解决?
    【C++】继承 ⑩ ( 继承机制中的 static 静态成员 | 子类中访问父类静态成员的方法 )
    力扣周赛 313 反转二叉树的奇数层(dfs镜像遍历 or bfs提取层节点)
    .net core-利用BsonDocumentProjectionDefinition和Lookup进行 join 关联查询(MongoDB)
    2022谷粒商城学习笔记(十二)仓库管理功能
    华为云各项指标介绍
    SpringBoot基础
    unigui手机端如何防止左右滑动退出页面
    Aspose.PDF for Java Crack by Xacker
    IP路由策略1
  • 原文地址:https://blog.csdn.net/sayUonly/article/details/126707653