登录免费注册

首页  思维导图  详情



 



实战篇

实战篇

2020-09-03 18:13:32   244  举报





实战篇

typescript

模板推荐

作者其他创作

大纲/内容

typescript+react

环境搭建

手动

jsx：react

安装react声明文件

选择构建工具

ts-loader

babel-loader

脚手架

npx create-react-app tsTest --typescript

umiJS

组件与类型

函数组件

React.FC<P>

props 隐含children声明

函数属性自动提示

const Index=(props:IProps)=>{  }

类组件

Component<P,S>

高阶组件

被包装组件类型 React.ComponentType<P>

新组件类型 Component<P & NewProps>

Hooks

useState<T>

事件与类型

event: React.FormEvent<HTMLInputElement>

数据请求

使用interface维护前后端接口

增加可维护性

自动补全

类型检查

redux与类型

state

type State=Readonly<{<br>     ...<br>}>

action

type Action={<br>  type:string;<br>  payload:any<br>}

dispatch

Dispatch

typescript+node

环境搭建

使用express创建工程

安装typescript

重命名文件

解决报错

安装声明文件

更改express导出方式

修复其他类型问题

设置outDir

编写拷贝静态资源脚本

构建并启动监控模式

操作数据库

添加路由

修改代理

安装mysql及声明文件

配置数据库连接，封装连接池

CRUD操作

文件下载

安装excel-export

编写声明文件

typescript+Vue

环境搭建

手动

添加vue-shims.d.ts声明文件

添加ts-loader

vue-cli

typescript

组件封装与发布

分离开发环境与生产环境入口

SFC封装

编写声明文件

npm publish

渐进式迁移策略

共存策略

含义:原有JavaScript代码不动，新增代码都用typescript编写

步骤

添加ts(x)文件

安装typescript

选择构建工具

保留babel

安装 @babel/preset-typescript

修改webpack配置

添加 tsc --watch 模式

放弃babel

安装ts-loader

修改webpack配置

检查JavaScript

allowJs:true

checkJs:true

处理JavaScript报错

// @ts-nocheck

JSDoc注释

宽松策略

含义: 将所有js(x) 文件重名为 ts(x)文件，在不修改代码的基础上，使用最宽松的类型检查规则

步骤

重命名文件(shelljs)

修改webpack入口

strict:false

严格策略

含义: 开启最严格的类型检查规则，处理剩余报错

步骤

strict:true

处理报错

得到：刘润·五分钟商学院（实战篇)

 Collect

Get Started

得到：刘润·五分钟商学院（实战篇)

Q4新品销售实战特训营·课程框架

 Collect

Get Started

Q4新品销售实战特训营·课程框架

Python AI 全栈工程旗舰班（26年全新）

 Collect

Get Started

Python AI 全栈工程旗舰班（26年全新）

 Collect

Get Started

逻辑精点（基础篇）-赵鑫全













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document