在TypeScript項(xiàng)目中像PHP一樣使用魔術(shù)變量

?xiaoxiao, 發(fā)布于2019-08-26 12:18 / 2894人閱讀

摘要：當(dāng)中有許多很有用的魔術(shù)變量比如之類但是中并沒(méi)有因此我寫了一個(gè)插件來(lái)使用它們?cè)创a已經(jīng)放到了上使用方法首先你需要安裝這個(gè)包修改一下你的在代碼中使用魔術(shù)變量比如用來(lái)編譯你的項(xiàng)目注意這里不能用因?yàn)闆](méi)有開放接口需要全局安裝一

PHP 當(dāng)中有許多很有用的魔術(shù)變量, 比如__CLASS__, __METHOD__之類. 但是typescript中并沒(méi)有. 因此我寫了一個(gè)插件typescript-magic-variable-plugin來(lái)使用它們, 源代碼已經(jīng)放到了GitHub上: https://github.com/acrazing/t....

使用方法

首先你需要安裝這個(gè)包: npm install -D typescript-magic-variable-plugin

修改一下你的tsconfig:

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

在代碼中使用魔術(shù)變量, 比如:

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

用ttypescript來(lái)編譯你的項(xiàng)目, 注意這里不能用typescript, 因?yàn)闆](méi)有開放transform接口, 需要全局安裝一下ttypescript: npm i -g ttypescript, 然后調(diào)用ttsc來(lái)編譯.

進(jìn)階

也可以在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, {})
                ]
            })
        }
    }
]

目前支持的變量:

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

可以自動(dòng)給React的組件添加displayName屬性, 默認(rèn)開啟, 比如:

export class Foo extends Component {}

會(huì)自動(dòng)給Foo增加靜態(tài)屬性: Foo.displayName = "Foo"

配置:

interface Options {
    addDisplayName: boolean; // 是否給react組件添加displayName屬性, 默認(rèn)開啟
    rootDir: string; // __DIR__的相對(duì)路徑, 默認(rèn)為tscofnig.json中的rootDir或者當(dāng)前文件夾
}