前端进阶--react全家桶(3)

1、安装ts版项目

create-react-app my-app --template typescript

2、ts语法

2.1、面试题：ts与js的区别

（1）类型系统：

JS是一种动态类型语言，变量的类型在运行时确定，可以随时改变。这意味着你可以在不声明类型的情况下直接给变量赋值。
TS是一种静态类型语言，变量的类型在编译时确定，需要显式声明变量类型。TS支持类型注解和类型推断，可以在开发阶段检测出类型错误，提高代码的可靠性和健壮性。

（2）编译：
JS是解释型语言，代码在运行时逐行解释执行。
TS是编译型语言，需要在编译阶段将TS代码转换为纯粹的JS代码，然后才能在浏览器或其他环境中运行。

（3）TypeScript 相对于 JavaScript 的优势是什么？

TS增加了静态类型（泛型），可以在开发人员编写脚本时检测错误，使得代码质量更好，更健壮。优势:IDE自动填充，自动联想;杜绝手误导致的变量名写错;类型可以一定程度上充当文档;便于维护与重构。

2.2、泛型？

泛型是指在定义函数，接口或类的时候，不预定指定具体的类型，使用时再去指定类型的一种特性。

2.3、TypeScript 中 any、never、unknown、null & undefined 和 void 有什么区别？

any: 动态的变量类型（失去了类型检查的作用）。

never: 永不存在的值的类型。例如：never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

unknown: 任何类型的值都可以赋给 unknown 类型，但是 unknown 类型的值只能赋给 unknown 本身和 any 类型。

null & undefined: 默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。当你指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自。

void: 没有任何类型。例如：一个函数如果没有返回值，那么返回值可以定义为void。

2.4、type、interface与class的区别 

3、react结合react的使用

1、基本类型与Araay

// String(原生的构造函数) vs string (ts中的类型)
var myname:string = "字符"
var mybool:boolean = false
var mynumber:number = 100
var mylist:Array<string> = ["111","222","3333"]
var myname2:string | number | boolean = 100
var myname3:string | number = "kerwin"
var mylist2:Array<string| number> = [1,2,"kerwin"]
var mylist3:(string| number)[] = [1,2,"kerwin"]

2、对象 

interface MyInter {
  name:String, //必选属性
  readonly country:String,//只读属性
  getName?:(name:sting)=>string//定义方法

   [propName:string]:any
}

 MyObj:MyInter={
 name="kerwin"
 country="China"
 private age = 100 //私有属性， 不能在接口定义
 getName(name:string){
   //...

return name
 }
 private getAge(){
   //...
 } //私有方法， 不能在接口定义

3、函数（弱点）

（需要补充promise的限定） 

function Test(list:String[],text?:String,...args:String[]):void{
    console.log(list,text,args)
 }
  Test(["1111","2222"])

interface SearchFunc {
(source: string, subString: string): boolean;
}
//对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
 let result = src.search(sub);
 return result > -1;
} 

interface objFunc {   //objFunc约束这一个类必须含有getName方法
getName: ()=>boolean;
}

class MyObj implements objFunc {

        getName(){

return name

}

}

4、对于类组件的ts约束

（1）变量前加下划线表示不被该组件或该文件以外给访问到。例如_list

private protect  public   abstract类的限制，后续java学习中补充

（2）对第一个参数props、第二个参数state做类型限定

 （3）对DOM节点的限制

 const mytext = useRef<HTMLInputElement>(null)
<input type="text" ref={mytext}/> 

 （4）对定时器的类型限制

5、 函数组件的约束

（1）对props的限定

const [list,setlist]=usestate<string []>([])

//子组件接受属性 -1
interface iprops {
  count:number
}
const Child:React.FC<iprops> = (props)=>{
  return <div>
    child-{props.count}
  </div>
}

（2） useContext

interface IContext{
 call:string
}
const GlobalContext = React.createContext<IContext>({
 call:"" //定义初始值,按照接口规则
})
<GlobalContext.Provider value={{
     call:"电话"
}}>
   ....
</GlobalContext.Provider>
const {call} = useContext(GlobalContext)

（3）安装第三方的包时（不懂）

（4）路由的约束

会用断言

interface IParams{
  id:string
}

// 使用编程式导航，需要引入接口配置
import { RouteComponentProps } from "react-router-dom";
interface IProps {自己定义的接口}
type HomeProps = IProps & RouteComponentProps<IParams>; //两个接口属性都支持
interface IState {}
class Home extends React.Component<HomeProps, IState> {

}

（5）redux的约束

import {createStore} from 'redux'
interface ActionInter{
  type:String,
  payload:any
}
const reducer  = (prevState={},action:ActionInter)=>{
  return action.payload
}
const store = createStore(reducer,//enhancer)
export default store

6、styled-components:组件内写样式

 7、单元测试（需补充）

react-test-renderer

test下创建文件A.test.js，运行时是npm test

（1）浅查询，查询字段与增加删除

（2） 删除

（3）enzyme

安装enzyme与@wojtekmaj/enzyme-adapter-react-17

8、redux-saga代替redux-chunk,

之前处理redux异步函数的是redux的中间件redux-chunk,

理解生成器

8.1、saga的使用（模糊，后续补充）

1.监听生成器

2.运行生成器

3.

可以简写

4.

5.

9、首页懒加载

//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));

<Suspense fallback={<div>Loading...</div>}>
    {
      this.state.visible
       ?
       <OtherComponent />
      :
       null
    }
    </Suspense>