• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • typeof 操作符

    JavaScript 本身就有typeof操作符,你可以在表达式上下文中使用:

    // Prints "string"
    console.log(typeof "Hello world");
    

    而 TypeScript 添加的typeof方法可以在类型上下文(type context)中使用,用于获取一个变量或者属性的类型

    let s = "hello";
    let n: typeof s;
    // let n: string
    

    如果仅仅用来判断基本的类型,自然是没什么太大用,和其他的类型操作符搭配使用才能发挥它的作用。


    举个例子:比如搭配 TypeScript 内置的ReturnType<T>。你传入一个函数类型,ReturnType<T>会返回该函数的返回值的类型:

    type Predicate = (x: unknown) => boolean;
    type K = ReturnType<Predicate>;
    // type K = boolean
    

    如果我们直接对一个函数名使用ReturnType,我们会看到这样一个报错:

    function f() {
        return { x: 10, y: 3 };
    }
    type P = ReturnType<f>;
    
    // 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?
    

    这是因为值(values)和类型(types)并不是一种东西。为了获取值f也就是函数f的类型,我们就需要使用typeof

    function f() {
        return { x: 10, y: 3 };
    }
    type P = ReturnType<typeof f>;
    
    // type P = {
    //    x: number;
    //    y: number;
    // }
    


    在 JavaScript 中,所有的可以由我们自主命名的,都可以称为是标识符。例如:变量名、函数名、属性名都属于标识符。

    标识符命名一个标识符时需要遵守如下的规则:

    • 标识符中可以含有字母、数字、_$。标识符不能以数字开头。
    • 标识符不能是 ES 中的关键字或保留字。
    • 标识符一般都采用驼峰命名法(首字母小写,每个单词开头大写,其余字母小写)。


    限制

    TypeScript 有意的限制了可以使用typeof的表达式的种类。

    在 TypeScript 中,只有对标识符(比如变量名)或者他们的属性使用typeof才是合法的。这可能会导致一些令人迷惑的问题:

    // Meant to use = ReturnType<typeof msgbox>
    let shouldContinue: typeof msgbox("Are you sure you want to continue?");
    // ',' expected.
    

    我们本意是想获取msgbox("Are you sure you want to continue?")的返回值的类型,所以直接使用了typeof msgbox("Are you sure you want to continue?"),看似能正常执行,但实际并不会,这是因为typeof只能对标识符和属性使用。而正确的写法应该是:

    ReturnType<typeof msgbox>
    

    (注:官方手册内容到这里就结束了)


    typeof 对象

    我们可以对一个对象使用typeof

    const person = { name: "kevin", age: "18" }
    type Kevin = typeof person;
    
    // type Kevin = {
    //    name: string;
    //    age: string;
    // }
    


    typeof 函数

    我们也可以对一个函数使用typeof

    function identity<Type>(arg: Type): Type {
        return arg;
    }
    
    type result = typeof identity;
    // type result = <Type>(arg: Type) => Type
    
    type resultType = ReturnType<typeof identity>);
    // type resultType = Type
    


    typeof 枚举

    在 TypeScript 中,enum(枚举)是一种新的数据类型,但在具体运行的时候,它会被编译成对象。

    enum UserResponse {
        No = 0,
        Yes = 1,
    }
    

    对应编译的 JavaScript 代码为:

    var UserResponse;
    (function (UserResponse) {
        UserResponse[UserResponse["No"] = 0] = "No";
        UserResponse[UserResponse["Yes"] = 1] = "Yes";
    })(UserResponse || (UserResponse = {}));
    

    如果我们打印一下UserResponse

    console.log(UserResponse);
    
    // [LOG]: {
    //   "0": "No",
    //   "1": "Yes",
    //   "No": 0,
    //   "Yes": 1
    // } 
    

    而如果我们对UserResponse使用typeof

    type result = typeof UserResponse;
    
    // ok
    const a: result = {
        "No": 2,
        "Yes": 3
    }
    
    result 类型类似于:
    // {
    //  "No": number,
    //  "YES": number
    // }
    

    不过对一个 enum 类型只使用typeof一般没什么用,通常还会搭配keyof操作符用于获取属性名的联合字符串:

    type result = keyof typeof UserResponse;
    // type result = "No" | "Yes"