实战篇
2020-09-03 18:13:32 244 举报AI智能生成
实战篇
作者其他创作
大纲/内容
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<{
...
}>
...
}>
action
type Action={
type:string;
payload:any
}
type:string;
payload:any
}
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
处理报错
0 条评论
下一页
