React project uses Typescript to transform practice records

Technology stack:

1. ant design [support TS syntax]
2. react
3. react-router-dom
4. react-redux

ready:

typescript is only used to process .ts and .tsx files, if allowJS:true is configured, this can process JS files

Start:

• Function component modification

import React from 'react';

interface CompProps {
    
    
	name: string,
	children: React.ReactNode,
}
function Comp({
    
    name, children}) {
    
    
	return (
	<div>
		{
    
    name}
		{
    
    children}
	</div>
	)
}

• Type inference of hooks- useState

const [isShow, setIsShow] = useState(false);
// 上面这种简单的类型typescript可以推断出来

const [manList, setManList] = useState([]);
// 上面这种对象数组，typescript无法推断出详细的类型。此时我们可以将类型作为通用参数穿进去
interface Man {
    
    
	name: string,
}
const [manList, setManList] = useState<Man[]>([]);

Hooks performance in Typescript

1. useState

• If the initial value is not null/undefined, it is capable of type inference, and the type is inferred based on the initial value passed in;
• If the initial value is null/undefined, you need to explicitly pass the type definition for constraints;
• Passed in through the first paradigm parameter of useState

// 可推断为string
const [name, setName] = useState('Default');

// 不可推断，需明确
// 一般情况下推荐传入类型
interface MyObj {
    
    
	name: string;
	age: number;
}
const [info, setInfo] = useState<myObj>(null);

doubt:

1. In the following code, what is the difference between interface and type? Which way of writing is recommended?

interface AA {
    
    
	name: string,
}

type AA = {
    
    
	name: string,
}

The official document is like this:

• An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
• An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

But
when doing the above type definition, I didn't feel the difference between the two? ?

Same point

• Can be used to describe an object or function

interface User {
    
    
	name: string;
}
interface SetUser {
    
    
	(name: string): void;
}

type Animal = {
    
    
	name: string,
}
type SetAnimal = (name: string) => void;

• Extensions are allowed
  • interface extends type ✅
  • type extends interface ✅
  • The above two have similar effects but different syntax

// interface -- interface
interface Man extend User {
    
    
	age: number;
}
// type -- type
type Dog = Animal & {
    
    age: number;}

// interface -- type
interface Cat extends Animal {
    
    
	age: number;
}

// type -- interface
type Boy = User & {
    
    age: number;}

Difference - type

• Type can be declared: basic types of aliases, union types, primitive ancestors and other types

// 别名
type NewName = string;

// 联合类型
type nameType = string | number

// 具体定义数组每个位置的类型
type list = [string, number, boolean]

• You can use typeof to get the type of the instance for assignment

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

• Other operations

type StringOrNumber = string | number;  
type Text = string | {
    
     text: string };  
type NameLookup = Dictionary<string, Person>;  
type Callback<T> = (data: T) => void;  
type Pair<T> = [T, T];  
type Coordinates = Pair<number>;  
type Tree<T> = T | {
    
     left: Tree<T>, right: Tree<T> };

Difference --interface

• interface can declare merge
  • Declaring the same type multiple times, the only way to go is to merge, not overwrite

interface Box {
    
    
	width: number;
}
interface Box {
    
    
	height: number;
}

// 实际Box为： {width, height}，合并为如下：
interface Box {
    
    
	width: number;
	height: number;
}