typescript教程阮一峰_在博图里怎样定义一个变量

typescript教程阮一峰_在博图里怎样定义一个变量在TypeScript项目中像PHP一样使用魔术变量

大家好,又见面了,我是你们的朋友全栈君。

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或者当前文件夹
    }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107352.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【机房重构】“ConnectionString属性尚未初始化”「建议收藏」

    【机房重构】“ConnectionString属性尚未初始化”「建议收藏」机房重构ing。在每个学习中一直陪伴我们左右的,还是那些大大小小的问题,正因为它们的存在,才让我们的学习有了收获,有了纠结,也有了乐趣。这几天一直在研究sqlhelper和泛型集合的使用,很那什么的说,纠结了几天,今天算是有点结果了,但是结果永远不会轻松而至,看,问题又来了。

    2022年7月15日
  • webstorm激活教程破解方法

    webstorm激活教程破解方法,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
  • wait(),notify(),notifyAll()_多线程wait和sleep

    wait(),notify(),notifyAll()_多线程wait和sleep前言在上一篇中,我们介绍了Java中的线程的基本概念,我们了解到线程是有很多种状态的,本章,我们就来聊聊线程中的状态是如何进行控制与切换的。Java中提供了很多种方法对线程的状态进行控制以及线程之间的通信,包括wait、notify、notifyAll、sleep,下面我们就来看一下它们之间有什么区别,以及如何使用这些方法进行线程状态的控制与通信。线程之间的通信在Java中可以用w…

    2022年9月8日
  • 表达式求值(中缀转后缀及后缀表达式求值)

    表达式求值(中缀转后缀及后缀表达式求值)。中缀表达式转后缀表达式:中缀表达式转后缀表达式遵循以下原则:1.遇到操作数,直接输出;2.栈为空时,遇到运算符,入栈;3.遇到左括号,将其入栈;4.遇到右括号,执行出栈操作,并将出栈的元素输出,直到弹出栈的是左括号,左括号不输出;5.遇到其他运算符’+”-”*”/’时,弹出所有优先级大于或等于该运

    2022年6月23日
  • ubuntu杀死进程命令_ubuntu系统安装教程图解

    ubuntu杀死进程命令_ubuntu系统安装教程图解在用ubuntu的时候遇到几次程序卡死,但是不知道怎么关闭,心想有没有跟window一样的程序管理器存在?所以就去网上找了下解决方式记录一下:1、打开系统监视器:gnome-ststem-monitor然后就可以选择进程结束掉啦。2、如果知道程序名称可以命令杀死:killallXXX杀掉所有的进程killxxx(PID)杀死进程号xxx的进程,查看所有运行进程的命令:ps-aux…

    2022年9月21日
  • WeakHashMap,源码解读[通俗易懂]

    WeakHashMap,源码解读[通俗易懂]概述WeakHashMap也是Map接口的一个实现类,它与HashMap相似,也是一个哈希表,存储key-valuepair,而且也是非线程安全的。不过WeakHashMap并没有引入红黑树来尽量规避哈希冲突带来的影响,内部实现只是数组+单链表。此外,WeakHashMap与HashMap最大的不同之处在于,WeakHashMap的key是“弱键”(weakkeys),即当一个key不再正…

    2022年5月31日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号