PHP 当中有许多很有用的魔术变量, 比如__CLASS__, __METHOD__之类. 但是typescript中并没有. 因此我写了一个插件typescript-magic-variable-plugin来使用它们, 源代码已经放到了GitHub上: https://github.com/acrazing/t….

使用方法

1. 首先你需要安装这个包: npm install -D typescript-magic-variable-plugin

2. 修改一下你的tsconfig:

   {
       "compilerOptions": {
           "plugins": [
               { "transform": "typescript-magic-variable-plugin" }
           ]
       },
       "include": [
           // ...
           "./node_modules/typescript/magic-variable-plugin/types/globals.d.ts"
       ]
   }

3. 在代码中使用魔术变量, 比如:

   export class Foo {
       constructor() {
           console.log(__CLASS__)
       }
   }

4. 用ttypescript来编译你的项目, 注意这里不能用typescript, 因为没有开放transform接口, 需要全局安装一下ttypescript: npm i -g ttypescript, 然后调用ttsc来编译.

进阶

1. 也可以在webpack中使用:

   const { createMagicVariableTransformer } = require('typescript-magic-variable-plugin')
   // ...
   rules: [
       {
           test: /\.tsx?$/,
           loader: 'awesome-typescript-loader',
           options: {
               // ... other loader's options
               getCustomTransformers: program => ({
                   before: [
                      createMagicVariableTransformer(program, {})
                   ]
               })
           }
       }
   ]

2. 目前支持的变量:

   name	type	description
   __NAMESPACE__	string	the full name of the current namespace, use . to join the parents
   __CLASS__	string	the class name of the declaring class
   __METHOD__	string	the method name of the declaring method
   __FUNCTION__	string	the function name of the declaring function
   __DIR__	string	the current directory of the code
   __FILE__	string	the current file full name of the code
   __LINE__	number	the current line number

3. 可以自动给React的组件添加displayName属性, 默认开启, 比如:

   export class Foo extends Component {}

   会自动给Foo增加静态属性: Foo.displayName = "Foo"

4. 配置:

   interface Options {
       addDisplayName: boolean; // 是否给react组件添加displayName属性, 默认开启
       rootDir: string; // __DIR__的相对路径, 默认为tscofnig.json中的rootDir或者当前文件夹
   }