在前端开发中，我们经常需要使用字符串形式的变量名来操作对象的属性或方法。但是，手写字符串容易出错，尤其是在重构或改名变量时。为此，开发者们创造出了很多解决方案。
然而，还有一种更好的方式来获取变量名——使用 typesrcript 元编程。在 TypeScript 中，我们可以使用 typeof 和 keyof 来访问变量类型和属性名称。
为了方便使用 TypeScript 元编程，开发者 @RyanCavanaugh 在 GitHub 上创建了一个 npm 包，名为 ts-nameof。
在本文中，我们将介绍 @ts-nameof/common 这个包的使用方法，帮助读者尽快上手使用该包。
安装和引入
为了安装和使用 @ts-nameof/common，首先需要引入该包。方法如下：
npm install @ts-nameof/common
然后在需要使用的 TypeScript 文件中引入：
import nameof from '@ts-nameof/common';
基础使用
使用 @ts-nameof/common 很简单。只需要调用 nameof(variableName) 函数传入一个变量名，就可以得到该变量的字符串形式的名称。例如：
class Person {
public name = '小明';
}
const person = new Person();
console.log(nameof(person.name)); // 'name'这个例子展示了如何获取 person 这个对象中的 name 属性名称。
nameof(variableName) 函数会返回一个字符串，是传入变量名称的字符串形式。注意，nameof() 函数只能传入变量名，不支持字符串字面量。
传入变量
在前面的例子中，我们看到了如何将一个对象属性名称传递给 nameof() 函数。但是该函数不限于对象属性。实际上，只要是一个变量名都可以作为传入变量，包括类、命名空间等。例如：
-- -------------------- ---- ------- ----- ------ - ------ --- - --- - --------- -------- - ------ ----- ------ - --- --------- - ----------------------------------------- -- -----
在这个例子中，我们调用 nameof() 函数并传入 MyPerson.person.age。该函数返回字符串 'age'。
更复杂的情况
如果我们需要访问多层次的对象，或者需要在函数中使用 nameof()，该怎么办？
假设我们有一个比较复杂的数据结构：
-- -------------------- ---- -------
--------- ----- -
------ ----- ----- - -
--- -
----- -
---------- ------
----------- -----
--
--
--
-
-------- ---------- -------- ------ -------- -
----------------------------- - -----
------------------------------ - ------
-
---------- -------如果我们想要将 state.ui.view.leftPanel 的字符串传递给函数，应该如何操作？我们不能使用以下方式：
console.log(nameof(Store.state.ui.view.leftPanel)); // TypeError: Cannot read property 'view' of undefined
这是因为 nameof() 函数只能接收简单变量的名称作为参数。但是有一种解决方法：将多层次的属性访问拆分为单个变量名，最后将它们拼接在一起即可。如下所示：
const ui = nameof(Store.state.ui); // 'ui' const view = nameof(ui.view); // 'view' const leftPanel = nameof(view.leftPanel); // 'leftPanel' console.log(leftPanel); // 'leftPanel'
在这个例子中，我们首先将 Store.state.ui 的字符串名称赋值给一个变量 ui。然后，我们利用这个变量获取 ui.view，再利用 view 获取 view.leftPanel。最终结果是字符串 'leftPanel'。
那么如何在函数中使用 nameof() 函数呢？同样的原理：将多层次的属性访问拆分为单个变量名，最后将它们拼接在一起即可。如下所示：
-- -------------------- ---- -------
--------- ----- -
------ ----- ----- - -
--- -
----- -
---------- ------
----------- -----
--
--
--
-
-------- ----------- ---- --------- ------ -
--- -------- ------ - --------------
--- ------ ---- -- ------ -
------- -- -------------------
-
--------------------- -- --------------------------
-
----------------- --------------- -------------------- --------------在这个例子中，我们对 state 的属性进行了多层次的访问。首先，我们将 store.state 的字符串名称赋值给 current 变量。然后，我们循环遍历传入的 props，并将每个属性的字符串名称拼接到 current 变量中。最终结果是字符串 'state.ui.view.rightPanel'。
总结
在本文中，我们为读者介绍了 @ts-nameof/common 包及其使用方法。无论是基础还是稍微复杂的情况，读者都可以轻松地使用 TypeScript 元编程来获取变量名字符串，避免手写字符串带来的隐患。同时，我们还重点介绍了如何处理多层次的对象属性访问以及在函数中使用 nameof() 函数。希望本文对读者有所启发，同时也希望读者可以运用 @ts-nameof/common 包来提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc972b5cbfe1ea0612369