0726

工作

• 问题：TypeScript 使用 connect 时的 OwnProps 接口问题
• 相关搜索：Typescript 下 Redux connect 带有 Props 组件的问题
• 解决方法：使用 Typescript 踩 react-redux 的坑

我最开始的 方法和上面这个作者的做法类似：

export default connect(mapStateToProps, mapDispatchToProps)(Player as any);

但是这种做法就失去 使用 ts 的意义了，于是改成下面这种

export default connect(mapStateToProps, mapDispatchToProps)(Player as React.ComponentType<PlayerPropsClass>);

明日计划

• 完成剩下除了 拖拽动作 之外的所有需求，包括接口部分。多留下时间自测联调。

---

好文推荐

• 他是如何拿到政采云 P6 Offer的？
• Prettier 完全指南，以及和 Git、VSCode、ESLint 整合，让你的代码变美丽
• 淘系前端架构 - 周刊 - 210726 期
• 总结TypeScript在项目开发中的应用实践体会 最后关于 DVA + TS 结合的地方重点看看

项目推荐

• 还在困惑项目脚手架代码为什么那么写？那这篇webpack5 + react + typescript环境配置代码完全指南送给你 如标题所示，对应的 github 项目值得看看，这里面的项目配置

部分配置摘录：

"scripts": {
    "start": "cross-env NODE_ENV=development node scripts/server",
    "build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.prod.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "lint": "npm run lint-eslint && npm run lint-stylelint",
    "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js src",
    "lint-stylelint": "stylelint --config .stylelintrc.js src/**/*.{less,css,scss}"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9",
    "not op_mini all"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js}": [
      "eslint --config .eslintrc.js"
    ],
    "*.{css,less,scss}": [
      "stylelint --config .stylelintrc.js"
    ],
    "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": [
      "prettier --write"
    ]
  },

谷歌搜索了 how to set lint-stage in react ts project 得到的答案

• Setting ESLint on a React Typescript project (2021)
• Husky + Lint-Staged on a React TypeScript Project

好用的工具

TODOS