Record the contents of some of the problems encountered typescript and the recent development of

Yeah Hey, long time no see blog, and start looking for work in September, and now finally stabilized, it is not easy not easy

The new company use typeScript + react develop, own previously had contact, then experienced a wave of buried bitter school day, also record your own views on typeScript of:

I think it's typeScript js is based on the increase in the types of judgment (including the variable type, parameter type, function type), if the type of inconsistency is not allowed by the compiler, so the advantage is that you can write a more rigorous format type codes, in particular the development of that assembly, become more prominent role of TS;

Following is a brief getting started to write grammar (mainly to write again, memory consolidation ----- embarrassed laugh)

// 定义一个变量
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;
}

The following are questions about the actual development of:

1, sometimes to write some event when the transfer of e do not know what type, can only be a beginning to write any, later found will be displayed if the mouse onto the corresponding event in vscode type:

 

 It is also a small bar tips

 

2, ts based on the wording of the component

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, using this.setState ({}) try not to directly assign a more complex array or the state data to the data in the other state, so the two values ​​within each state can affect, by [ ... arr] way to deconstruct the assignment assignment

4, I had written about a state to pass parameters by refreshing the page disappearance of the matter seems to have no such an approach in an interview time, and now in development, basically get the data by passing a param, and then request the back-end. But my personal feeling method is more convenient.

 

Call ~, breath write so much, stimulating O (∩_∩) O haha ​​~