Skip to main content

3-28

1 玩转TypeScript工具类型​

extends​

条件运算符

type Exclude<T, U> = T extends U ? never : T;
// 表示判断 T 中的每一项是否可以赋值给类型 U ，如果可以，就返回never，如果不可以，就返回当前这项。

[1] 玩转TypeScript工具类型（中）.https://segmentfault.com/a/1190000040690347

2 Timeout的Ts类型​

const timer: ReturnType<typeof setTimeout> = setTimeout(() => '', 1000);

3 推断函数参数类型和返回值​

函数参数类型

type Param1 = Parameters<T extends (...args: any) => any ? T : () => void >
  
// 或者
type Param2 = T extends (...args: infer P) => any ? P : never

函数返回值

ReturnType<T>

4 配置v2rayU的pac模式​

||githubusercontent.com
||discord.com
||github.com

注意：挂上代理后再进行保存操作，否则无法连接githubusercontent.com

[1] 2.1.0版本Pac自定义规则仍然无效.https://github.com/yanue/V2rayU/issues/465

5 把头部变得透明​

.header{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 999;
  background-color: rgba(255,255,255,0.01);
  border-bottom: 0.75px solid #13131320;
}

6 css背景固定​

{
  background-image: url(/static/media/global_bg.ba87a0eb.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 设置为fixed */
  min-height: 100vh;
}

7 css左列固定，右列滚动​

image-20220403104430317

.father {
  display: grid;
  grid-template-columns: 300px 800px;
  grid-gap: 48px;
  position: relative;
  box-sizing: border-box;
}

.left {
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 2rem;
  max-width: 960px;
  box-sizing: border-box;
  padding: 3rem 0;
  min-height: 400px;
  position: -webkit-sticky;
  position: sticky;
  top: 3rem; /* 当页面滚动到距离顶部3rem，则固定再那里 */
  height: 400px; /* 高度只设置在400px */
}

.right {
  /* 什么都不用动，只要列表够长 */
}

8 注意BN.js除法​

整个bn无法为小数，即下面不成立：

new BN(1).div(2)

=> num.isZero is not a function at BN.divmod

解决方法

new BN(1).divn(2)

9 styled components macro not working​

原因：

版本问题, Macro in styled does not work since version 5.2.2

解决方案：

方案一：降级

npm i styled-components@5.2.1

方案二：安装babel插件

yarn add -D babel-plugin-styled-components

[1] https://stackoverflow.com/questions/70189366/styled-components-macro-isnt-working-with-cra

10 styled-components切换主题建议参考pancake​

https://github.com/pancakeswap/pancake-frontend

我抽离了一版：https://github.com/ginlink/theme_demo

11 前端交易相关图标基于recharts​

recharts项目地址：https://github.com/recharts/recharts

recharts文档：https://recharts.org/en-US

使用产品：uniswap-info、pancake

image-20220409004121687

12 pancake的组件封装较好​

特色：

  • styled-components主题

  • styled-system

    精简了css属性，例如：m: { '16px'}

  • 变体variants

13 媒体查询监听设备尺寸​

原理：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

示例：https://github.com/pancakeswap/pancake-frontend/blob/develop/packages/uikit/src/hooks/useMatchBreakpoints.ts

14 Commitlint​

git commit规范化：https://github.com/conventional-changelog/commitlint

15 cra无法引入外部包的问题​

有以下目录结构

[rootDir]
|
|- [packages]
|  |-[uilib]
|    |-[src]
|      |- index.ts
|
|- [src]
|    |-[pages]
|      App.ts
|
|- tsconfig.json
|- webpack.config.js

目的：从App.tsx中引入package/uilib/src/index.ts

方法：有两种

  • 第一种：给相对路径

    // import light theme
    import 'light' from '../../package/uilib/src/index.ts'

  • 第二种：设置别名

    设置别名需要两步操作：1.让ts知道 2.让webpack知道

    tsconfig.json（让ts知道）

    {
      "extends": "./paths.json"
    }

    config-overrides.js（让webpack知道，由于用的cra，所以需要react-app-rewired覆盖一下）

    总的来说，覆盖三部分配置，1.让cra能够导入src以外的文件 2.让ts能够处理src外的文件（cra默认只能处理src内文件） 3.设置别名

    module.exports = override(
      (config) => {

        // Remove the ModuleScopePlugin which throws when we try to import something
        // outside of src/.
        config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

        // Let Babel compile outside of src/.
        const tsRule = config.module.rules[1].oneOf[2];
        tsRule.include = undefined;
        tsRule.exclude = /node_modules/;

        // set alias
        config.resolve = {
          ...config.resolve,
          alias: {
            ...config.resolve.alias,
            '@': path.resolve(__dirname, 'src'),
            '@ginlink/uilib': path.resolve(__dirname, 'packages/uilib/src/index.ts'),
          },
          extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.d.ts']
        };

        return config
      }
    )

一些问题

  • Module parse failed: Unexpected token

    原因：ts没有介入解析过程而导致报错，原因为cra默认的ts处理目录为src，所以需要扩大它的处理范围

    解决：加入webpack配置

    // Remove the ModuleScopePlugin which throws when we try to import something
    // outside of src/.
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    // Let Babel compile outside of src/.
    const tsRule = config.module.rules[1].oneOf[2];
    tsRule.include = undefined;
    tsRule.exclude = /node_modules/;

  • vscode报无法找到 @ginlink/uilib

    原因：ts无法找到类型申明

    解决：在tsconfig.json中设置paths

    {
      ...
      "extends": "./paths.json"
    }

    paths.json

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"],
          "@ginlink/uilib": ["./packages/uilib/src/index.ts"]
        }
      }
    }