TypeScript 踩坑记

[HuangHongRui]

提示需要安装 dva ...（但实际已有） 解决： 在 tsconfig.json 中加入：

删除 include

---

出现 N+ 错误..由webpack配置的tslint导致.. 可以通过 npm run eject 显示配置config， 在生成出来的 /config > webpack.config.dev.js > 屏蔽

      {
        test: /\.(ts|tsx)$/,
        loader: require.resolve('tslint-loader'),
        enforce: 'pre',
        include: paths.appSrc,
      },

用于调试使用，真正开发最好开着...规范第一！

---

报错： TS2339: Property 【】 does not exist on type 【】

解决： 在class {} extends {} component 下第一行定义该属性： private timerID: any;

---

[HuangHongRui]

[ts] 无法找到模块“rc-form”的声明文件。“e:/Rui/Project/my-react-app/node_modules/rc-form/lib/index.js”隐式拥有 "any" 类型。 尝试 "npm install @types/rc-form" (如果存在)，或者添加一个包含“声明模块‘rc-form’”的新声明文件(.d.ts)； 自己建个 d.ts 文件

declare module 'rc-form' {
    export const createForm: Function;
}

---

[ts]类型“(buttonIndex: any) => void”的参数不能赋给类型“(() => void) | undefined”的参数。 不能将类型“(buttonIndex: any) => void”分配给类型“() => void”。 [ts] 参数“buttonIndex”隐式具有“any”类型。 (parameter) buttonIndex: any 解决办法 断言

---

解决：tsconfig.json 中加入： "allowSyntheticDefaultImports": true

---

问题：Type declaration of 'any' loses type-safety. Consider replacing it with a more precise type. 解决：// tslint:disable-next-line:no-any

[HuangHongRui]

Antd-Mobile Icon 缺少的问题：

因为项目要跟Pc端同步（Pc端使用Antd-Design）...所以：试了几个方案..

一开始使用阿里巴巴的 Iconfont 网站 , 老大表示以前使用过，后面会难以管理（如人员调动..傍晚独自加工，管理Icon账号的管理等等..） 所以我推荐了 Awesome ....但使用后发现 Awesome 虽然全而多..但是缺少多样性.. 经过反应，最后还是看看能否把PC端的 Icon - Antd-Design 挪过来用..毕竟 手机端Pc端统一是有好处的：

技术栈： React TypeScript Antd-Mobile

【1.】创建一个Dumb组件： 外部只需要传入 icon 的样式即可：（如： ）

import React,{Component} from 'react'
import { Icon } from 'antd'

class AntdIcon extends Component<AntdIconProps> {
  constructor(props :AntdIconProps) {
    super(props)
  }
  render() {
    return <i className={`anticon anticon-${this.props.type}`}/>
  }
}
export default AntdIcon

interface AntdIconProps {
  type : string;
}

---

【2.】因为目前 Antd-Mobile 只有10几个可用...那么需要把Pc端的那些Icon给挪过来

找到三个文件——并Copy到自己项目中（建一个存放文件，如：iconfont.less）： 存放 Icon 的主文件：node_modules\antd\es\style\core\iconfont.less 将顶部两个依赖路径给删了，并进入其内部.. 存放变量的文件：node_modules\antd\es\style\themes\default.less

// ICONFONT
@iconfont-css-prefix    : anticon;
@icon-url               : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi";

只需Copy这段 变量申明 到 项目中的 iconfont.less 存放Icon样式的文件：node_modules\antd\es\style\mixins\iconfont.less 全部复制，并依赖顺序放于 iconfont.less

---

【3.】 接下来...只需将该icon文件和Dumb组件导入使用即可...