嗨呀,好久没有看博客了,9月份开始找工作,到现在终于稳定了下来,不容易呀不容易
新的公司要用typeScript+react进行开发,自己之前没有接触过,于是经历了一波埋头苦学的日子,也记录一下自己对于typeScript的看法:
我认为的typeScript是在js的基础上,增加了类型的判断(包括变量类型、参数类型、函数类型),如果类型不一致是不允许通过编译的,这样的好处就是可以编写出格式类型比较严谨的代码,尤其是在于组件的开发中,ts的作用愈发凸显;
下面简单写一些入门的语法(主要是为了在写一遍,巩固记忆-----尬笑)
// 定义一个变量
const a: number = 1; // 通过在变量后增加":数据类型"来定义当前数据的类型,常用的有:(number,string,boolean,any)
// 定义一个对象 interface定义对象的格式
interface Obj {
name: string;
age: number;
}
const myobj:Obj = {
name: 'mx',
age: 24,
}
// 定义一个数组
const arr: string[] = ['m', 'x']; // 里面的项只有字符串
const arr: (string|number)[] = ['m', 'x', 24]; // 里面的项可以有字符串和数字
const arr: Obj[]=[{ name: 'mx', age: 24 }] //里面是满足Obj接口的对象
// 定义一个枚举,1代表在线,2代表离线
enum State = {
inline = 1,
outline = 2,
}
const currentState = State.inline;使用枚举
// 定义一个函数 :后面的表示返回值得类型,如果不需要返回:void
function getTotal (x: number, y: number): number {
return x + y;
}
以下是关于在实际开发中的问题:
1、有时候要写一些事件的时候,传递的e不知道是什么类型,一开始只能写any,后来发现在vscode下如果鼠标放到事件上就会显示对应的类型:
这也是一个小技巧吧
2、关于类组件的ts写法
扫描二维码关注公众号,回复:
9763754 查看本文章
interface IRoleState {
list: roleItem[],
searchParams: ISearchParams;
isLoading: boolean;
isError: boolean;
}
// RouteComponentProps是react-router-dom内的一个接口,
// 当有参数需要通过params传递时RouteComponentProps改为RouteComponentProps<{id:string}>
class A extends React.Component<RouteComponentProps,IRoleState> {
}
3、使用this.setState({})的时候尽量不要将state内的一个数组或者更复杂的数据直接赋值给另一个state内的数据,这样的话两个state内的值会互相影响,可以通过[...arr]解构赋值的方式来进行赋值
4、关于我以前写过的一个通过state传递参数刷新页面消失的问题,在面试时候以及现在的开发当中似乎都没有采用这种办法,基本都是通过传递一个param,然后请求后端获取数据。但是个人感觉我的方法更加便捷。
呼~,一口气写了这么多,刺激O(∩_∩)O哈哈~