记录一些typescript的内容以及最近开发遇到的问题

嗨呀,好久没有看博客了,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写法

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哈哈~

发布了47 篇原创文章 · 获赞 38 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/qq8241994/article/details/102729287