Attack on Life ⚔️

Personal blog

发表于 更新于 本文字数： 2.2k 阅读时长 ≈ 4 分钟
本文是作者对TypeScript中的interface vs Type的介绍，包括TypeScript中的interface vs Type的优势、实现细节、相关资料等，这些步骤可以帮助作者提高TypeScript中的interface vs Type的效率。

做TS项目，经常会用到interface，和type。一般类型定义我会使用interface,而简单且是约束值的会使用type，比如type username='bob'|'kelly' ,另外我会通过tslint配置中的Use an interface instead of a type literal.来进行束缚。BUT，准确的差异在哪，到底该怎么用呢，没法闹，这里调查且总结一番。

官网怎么说

As we mentioned, type aliases can act sort of like interfaces; however, there are some subtle differences.

One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name

Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.

On the other hand, if you can’t express some shape with an interface and you need to use a union or tuple type, type aliases are usually the way to go.

官网介绍戳这里

划重点

阅读全文 »

发表于 更新于 本文字数： 549 阅读时长 ≈ 1 分钟
本文是作者对JetBrains IDE常用插件的介绍，包括JetBrains IDE常用插件的优势、实现细节、相关资料等，这些步骤可以帮助作者提高JetBrains IDE常用插件的效率。

Jetbrains系列产品用起来确实高效。从本身IDE的功能强大，到快捷键的丰富支持，再到插件生态的丰富等等。一切铸就了它无愧是当前最强IDE。

持续更新

这里列出我在用的几款插件

Plugins

String Manipulation

阅读全文 »

发表于 更新于 本文字数： 625 阅读时长 ≈ 1 分钟
本文是作者对React调试-插件篇的介绍，包括React调试-插件篇的优势、实现细节、相关资料等，这些步骤可以帮助作者提高React调试-插件篇的效率。

React组件调试，除了万能油console之外，可以利用react-devtools及Redux DevTools辅助工具。因为Team总会来新人，为了快速入门，这里小结一番。

插件安装需要上Chrome商店，如果还不会科学上网，上不了谷歌。我的天，恳请您换职业。当然，b本着人道主义关怀，还是说下怎么解决在不能上谷歌的情况下如何插件安装

获取插件

https://crxextractor.com/
输入，插件商店地址，点击即可下载crx。拖拽到chrome中即可安装。

阅读全文 »

发表于 更新于 本文字数： 1.4k 阅读时长 ≈ 2 分钟
本文介绍如何一键连接Cisco AnyConnect Secure Mobility Client，包括繁琐的启动步骤、如何自动化等实现细节，以提高连接Cisco AnyConnect Secure Mobility Client的效率。

因为最近众所周知的原因，上不了外网了，so开始使用公司VPN，但是公司VPN连接起来总是很费时间。步骤繁琐，于是考虑如何解决。

公司的一封邮件给了很大的帮助，测试成功，这里我也总结一番。

繁琐的启动步骤

  1. 启动Cisco AnyConnect Secure Mobility Client
  2. 输入账户密码
  3. 选择手机短信验证码校验
  4. 手机查收短信验证码
  5. 客户端输入验证码
  6. 点击确定

如何自动化呢

  1. 安装oath-toolkit

    1
    $ brew install oath-toolkit

  2. 编写shell脚本

    比如叫vpn.sh

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #!/bin/bash

    killall 'Cisco AnyConnect Secure Mobility Client' 2>/dev/	null
    /opt/cisco/anyconnect/bin/vpn disconnect >/dev/null

    code=`oathtool --totp -b **secret_key**`

    /opt/cisco/anyconnect/bin/vpn -s connect $1.company.vpn.com << EOF | sed 			's/Password: .*/Password: ********/g'
    **username**
    **password**
    **second_authentication_method_index**
    $code
    EOF
    open -g '/Applications/Cisco/Cisco AnyConnect Secure Mobility Client.app'

  3. 填写变量信息

    • secret_key为我们vpn登陆认证的secret key，比如我司用的Okta Verify，则登陆网站，在修改密码=>Extra Verification=>Okta Verify Mobile App=>Setup=>Next=>Problems scaning barcode=>找到Secret Key，记住这个key.点击返回可继续增加手机App校验。记住两者不影响
    • username即VPN用户名
    • password即VPN用户密码
    • second_authentication_method_index指的是当我们VPN登陆时，选择的校验类型，选择对应的即可，我们既然选择了Secret key，找到对应的序号填入即可

    到此，最麻烦的手机校验码通过这个secret key搞到了

  4. shell增加执行权限

    1
    chmod +x vpn.sh

  5. 执行脚本

    1
    2
    ./vpn.sh bj

阅读全文 »

发表于 更新于 本文字数： 4.6k 阅读时长 ≈ 8 分钟
本文是作者对Redux-Thunk源码阅读的介绍，包括Redux-Thunk源码阅读的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Redux-Thunk源码阅读的效率。

redux-thunk是redux解决异步的中间件。

举个例子，我们需要fetchUser拿到用户信息，然后存到redux中。如果没有thunk，我们需要在组件中fetchUser.then，然后dispatch一个action存到redux中，假如这个操作有多处需要，那么fetchUser.then这个就需要重复，存在一定的代码重复。thunk加入的话，我们可以把fetchUser.then(dispatch action)整体作为一个action进行复用。因为thunk改写了dispatchAPI，我们还是dispatch去用而已，但是已经不是个pure action了。

thunk引入

先看下项目中如何配置thunk。

1
2
3

const middleWares = [sagaMiddleware, thunk, routerMiddleware(history)];
const store = createStore(rootReducer(history), compose(applyMiddleware(...middleWares), reduxDevtools));
阅读全文 »
0%