TypeScript typeof 操作符

极简至宽 發表於 2020-9-28 15:31:00

<h3>一、typeof 简介</h3>
在 TypeScript 中， typeof 操作符可以用来获取一个变量或对象的类型。
<div>
<div>
<pre><code class="hljs php">interface Person {
name: string;
age: number;
}

const sem: Person = { name: "semlinker", age: 30 };
type Sem = typeof sem; // type Sem = Person
</code></pre>
</div>
</div>
在上面代码中，我们通过 typeof 操作符获取 sem 变量的类型并赋值给 Sem 类型变量，之后我们就可以使用 Sem 类型：
<div>
<div>
<pre><code class="hljs php">const lolo: Sem= { name: "lolo", age: 5 }
</code></pre>
</div>
</div>
你也可以对嵌套对象执行相同的操作：
<div>
<div>
<pre><code class="hljs javascript">const kakuqo = {
name: "kakuqo",
age: 30,
address: {
 province: '福建',
 city: '厦门'
}
}

type Kakuqo = typeof kakuqo;
/*
type Kakuqo = {
name: string;
age: number;
address: {
 province: string;
 city: string;
};
}
*/
</code></pre>
</div>
</div>
此外， typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型，比如：
<div>
<div>
<pre><code class="hljs javascript">function toArray(x: number): Array<number> {
return ;
}

type Func = typeof toArray; // -> (x: number) => number[]</code></pre>
</div>
</div>
 
<h3>二、const 断言</h3>
TypeScript 3.4 引入了一种新的字面量构造方式，也称为 const 断言。当我们使用 const 断言构造新的字面量表达式时，我们可以向编程语言发出以下信号：
<pre><code class="hljs nginx">readonly
readonly
</code></pre>
下面我们来举一个 const 断言的例子：
<div>
<div>
<pre><code class="hljs javascript">let x = "hello" as const;
type X = typeof x; // type X = "hello"

let y = [10, 20] as const;
type Y = typeof y; // type Y = readonly

let z = { text: "hello" } as const;
type Z = typeof z; // let z: { readonly text: "hello"; }
</code></pre>
</div>
</div>
数组字面量应用 const 断言后，它将变成 readonly 元组，之后我们还可以通过 typeof 操作符获取元组中元素值的联合类型，具体如下：
<div>
<div>
<pre><code class="hljs javascript">type Data = typeof y; // type Data = 10 | 20
</code></pre>
</div>
</div>
这同样适用于包含引用类型的数组，比如包含普通的对象的数组。这里我们也来举一个具体的例子：
<div>
<div>
<pre><code class="hljs javascript">const locales = [
{
locale: "zh-CN",
language: "中文"
},
{
locale: "en",
language: "English"
}
] as const;

// type Locale = "zh-CN" | "en"
type Locale = typeof locales["locale"];
</code></pre>
</div>
</div>
另外在使用 const 断言的时候，我们还需要注意以下两个注意事项：
 
const 断言只适用于简单的字面量表达式
 
<div>
<div>
<pre><code class="hljs javascript">// A 'const' assertions can only be applied to references to enum members,
// or string, number, boolean, array, or object literals.
let a = (Math.random() < 0.5 ? 0 : 1) as const; // error

let b = Math.random() < 0.5 ? 0 as const :
1 as const;
</code></pre>
</div>
</div>
 
const 上下文不会立即将表达式转换为完全不可变
 
<div>
<div>
<pre><code class="hljs javascript">let arr = [1, 2, 3, 4];

let foo = {
name: "foo",
contents: arr,
} as const;

foo.name = "bar"; // error!
foo.contents = [];// error!

foo.contents.push(5); // ...works!</code></pre>
</div>
</div>
vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com
<h3>三、typeof 和 keyof 操作符</h3>
在 TypeScript 中， typeof 操作符可以用来获取一个变量或对象的类型。而 keyof 操作符可以用于获取某种类型的所有键，其返回类型是联合类型。了解完 typeof 和 keyof 操作符的作用，我们来举个例子，介绍一下它们如何结合在一起使用：
<div>
<div>
<pre><code class="hljs javascript">const COLORS = {
red: 'red',
blue: 'blue'
}

// 首先通过typeof操作符获取Colors变量的类型，然后通过keyof操作符获取该类型的所有键，
// 即字符串字面量联合类型 'red' | 'blue'
type Colors = keyof typeof COLORS
let color: Colors;
color = 'red' // Ok
color = 'blue' // Ok

// Type '"yellow"' is not assignable to type '"red" | "blue"'.
color = 'yellow' // Error</code></pre>
</div>
</div> 
来源：https://www.cnblogs.com/xiaonian8/p/13744976.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript typeof 操作符