ibclee / one-piece Goto Github PK

Math.random().toString().slice(-6)

1. 调研typescript，基于老项目向typescript迁移， 参考：
   ProtoTeam
   Migrating from JavaScript
   TypeScript-React-Conversion-Guide

2. 遇到问题，配置后打包报错，升级webpack4应该可以解决，但是webpack4不向下兼容，尝试安装旧版本awesome-script-loader解决了
   ERROR in ./src/base/index.js Module build failed: Error: It looks like you're using an old webpack version without hooks support. If you're using awesome-script-loader with React storybooks consider upgrading @storybook/react to at least version 4.0.0-alpha.3

3. 之后又遇到antd的报错
   ERROR in [at-loader] ./node_modules/antd/lib/form/Form.d.t Type 'keyof T' does not satisfy the constraint 'string'.
   通过在tsconfig.js增加 "keyofStringsOnly": true 配置，
   原因是TypeScript 2.9中添加的另外一项重要特性是在keyof和映射对象类型（mapped object type）中使用符号（symbol）和数字字面量。keyof操作符要比TypeScript推断唯一符号类型这一特性更早，因此keyof一直不能识别符号化的key。TypeScript 2.9改变了keyof的行为，能够识别唯一符号和数字字面量类型。因为这是一个破坏性的变更，所以可以通过--keyofStringsOnly标记切换回TypeScript 2.9版本之前的行为模式。

1. linux清理磁盘
   df -h ，这个命令用于查看服务器空间，
   du -h --max-depth=1，这个命令用于查看当前目录，哪个文件占用最大
   du -sh *，这个命令也用于查看当前目录下各文件及文件夹占用大小

2. 查看端口号是否被占用
   netstat -anp|grep 80

1. 过滤对象
   Object.fromEntries( Object.entries(this.getPorts()).filter( ([, port]) => port.isDefaultPort(), ), );

TypeScript在node项目中的实践

export 和 export default

1. export与export default均可用于导出常量、函数、文件、模块等
2. 在一个文件或模块中，export、import可以有多个，export default仅有一个
3. 通过export方式导出，在导入时要加{ }，export default则不需要
4. export能直接导出变量表达式，export default不行。

Linux查看某个端口号是否被占用： netstat -anp|grep 80

1. 在一个vue项目中配置了单元测试，看了一些文档：Vue Test Utils

2. 参考了vue官方的jest测试配置仓库：vue-test-utils-jest-example

3. 执行test命令的时候遇到了一些es6语法编译的错误，搜索了一些解决办法，但是还没有解决
   ERROR: 'import' and 'export' may appear only with 'sourceType: "module"' (3:0)

4. 查看了axios文档，在项目中重新封装了一下

1.createProtal:render到一个组件里面去，实际改变的事网页上另一处的DOM结构

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "antd";

export default class PortalSample extends React.PureComponent {
  state = { visible: false };
  renderButton() {
    return (
      <Button type="primary" onClick={() => this.setState({ visible: true })}>
        打开对话框
      </Button>
    );
  }
  renderDialog() {
    return (
      <div className="portal-sample">
        <div>这是一个对话框！</div>
        <br />
        <Button
          type="primary"
          onClick={() => this.setState({ visible: false })}
        >
          关闭对话框
        </Button>
      </div>
    );
  }
  render() {
    if (!this.state.visible) return this.renderButton();
    return ReactDOM.createPortal(
      this.renderDialog(),
      document.getElementById("dialog-container"),
    );
  }
}

2. 代码统计
   git log --since=2018-06-11 --until=2018-07-06 --author="libaochang" --pretty=tformat: --numstat | gawk '{ add += $1 ; subs += $2 ; loc += $1 - $2 } END { printf "added lines: %s removed lines : %s total lines: %s\n",add,subs,loc }' -

1. 为了防csrf攻击，设置cookie字段后，请求头里没有带过去，因为页面是套在iframe里面的，ifame的地址是www.ab.com/a， 所以cookie的path默认是/a，而访问的地址路径是www.cd.com，所以只会找当前域根路径下的cookie，如果访问地址是www.cd.com/a则不会有问题，解决办法document.cookie='path=/'

1. tsconfig.json配置介绍：tsconfig.json
2. How to use refs in React with Typescript
3. 今天主要问题：编写第三方库的声明文件
   参考：
   https://www.tslang.cn/docs/handbook/declaration-files/do-s-and-don-ts.html
   https://my.oschina.net/fenying/blog/748805

以一个名为 abc 的模块为例，TS源代码如下：

export function abc(s: string): string { return s.substr(0, 4); }
其声明文件有两种写法：

第一种，模块导出声明写法

declare interface funcAbcSign { (s: string): string } export declare let abc: funcAbcSign;

第二种，全局类型声明写法

declare module "abc" { interface funcAbcSign { (s: string): string } export let abc: funcAbcSign; }
如果要理解两者的区别，首先要理解其意义。模块导出声明写法 中，单从这个文件内容 看来是无法得知这些内容属于哪个模块的。所以必须将之与模块放在一起，作为内建声明文件， TypeScript 编译器才能得知其所属的模块。（或者放进 typings 的 external 目录）