React 使用 TypeScript 需要特别注意的型态问题

TypeScript 顾名思义就是所有的变数都需要先宣告，即使在开发环境能开启并测试，等要打包时还是无法编译，虽然还是能强制编译，不过使用 TypeScript 就是要避免更多无法预知的错误，所以还是要想办法将语法上的错误先解决在进行编译

PS. 如想快速开发并看到成果还是先使用JavaScript版本，用了 TypeScript 真的花不少时间在解决形态上的错误

接下来特别列出几个比较难处理的型态问题，希望能帮到你

forwardRef 的型态问题

写 js 时forwardRef 都不会管型态，但在 TypeScript 时父阶取得 ref 并呼叫函式却会出现错误

测试时都能正常执行，但编译却过不了，以下是处理的方式

由于我们是要挂程式给其他组件用，所以型态内需要放函式，另外forwardRef 的泛型需要设定 ref 跟 props 的型态，所以 props 的 type 也一起宣告

type PropsType={  rowSelectType:RowSelectionType,  setMaster: (arg:PlmCompanyDataType)=>void,  setAvls: (arg:PlmCompanyDataType[])=>void,}export interface RefType {cleanSelected:()=>void,reload:()=>void,};

export default forwardRef<RefType, PropsType>((props: PropsType, ref)={

const masterDataRef = useRef<RefType>(null);const avlsDataRef = useRef<RefType>(null);

以上都完成就不会报错了

useState若放的是物件也需要设定泛型

useState 设定泛型跟 useRef 一样，都是加在 useState 后就好

const [master, setMaster] = useState<PlmCompanyDataType>({});const [avls, setAvls] = useState<PlmCompanyDataType[]>([]);

需要特别注意 array 的写法，另外通常用 array 后都会在使用 map 进行处理，不过 map 内的变数就不需特别指定了，它会使用一样的型态

avls.map((avl) => {newAVLGroup = {master: { ...master },avl: { ...avl },}createAVLGroup(newAVLGroup)})

部分组件出现错误

这是使用 Ant Design 的 Select 以及其底下的 Option，不知为何 Option 就是有错误，由于 Option只是为了显示内容，最后只好使用标準组件 option 代替(小写)

没用到的变数会出现警告

这比较无伤大雅，真的用不到就移除吧

不过在 ProTable 中 onChange 带入两个变数，第一个没用的参数也出现警告

最后只好将他打印出来 XD