跳到主要内容

TypeScript总结

最近几个项目一直在用TS,说实话各种代码提示已经确认类型然后不需要各种类型验证确实很爽,但是在开发过程中会有各种类型报错,类型声明以及类型的强制转换,在用的时候积累了一点点小小的经验,所以在这里稍微记录下。

// 声明一个对象但是不想让他被束缚的时候
const obj = {} as any;
// 当一个变量从已有水平判断不出来是什么类型但是使用者很确定的时候
// 大致就是先转为unknown然后强制转换为Location类型,并且里面肯定有quert这个参数;
const location = useLocation() as unknown as Location & { query: { from?: string } };
// 或者
const str = getString() as string;

接下来是在React的一些

// 声明useState
const [data, setData] = useState<boolean>(false);
// antd中很多数据都有到处的type内容,可以直接拿来用
import type { ProColumns, ActionType } from '@ant-design/pro-table';
const columns: ProColumns<typeDefine>[] = [];
// 还有一些定义props和state的方式
interface Props {
routes: { path: string; breadcrumbName: string }[];
}
const FunComponent = (props: Props) => {
return xxx
}
// 类组件中state和props的定义
interface IProps {
}

interface IState {
playOrPause?: string;
}

class Player extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);

this.state = {
playOrPause: 'Play'
};
}

render() {
return(
<div>
<button
ref={playPause => this.playPause = playPause}
title={this.state.playOrPause} // in this line I get an error
>
Play
</button>
</div>
);
}
}

大部分东西其实都是挺基础的知识,不过在用的时候偶尔确实会被这些基础的东西卡那么一下,尤其是当只是学过一些,但是没有实际工程中写过的时候,所以这段时间的一些项目其实也是给我一个验证前一段时间对TS学习的一个机会吧。至于结果呢只能说大部分时候都有一个思路向着去解决,但是问题呢其实就是一些回过头来看特别简单的东西当初可能会找了很多资料去解决。

不过呢,好处是当你习惯ts之后开发起来还是很爽的,有那么一丢丢一切尽在掌握的成就感

缺点就是没了js的那种灵活,很多时候要写一些代码去断言和强转类型。

而且在开发过程中呢我一直尽量少用甚至不用any,不过有些时候确实不太好定义那些类型,尤其是当数据嵌套层数比较深的时候,一层层的写类型断言其实是很累甚至感觉付出和收获不成正比,所以这种时候我会倾向用any。

Loading Comments...