摘要:由于项目组最近准备从javascript迁移到typescript;在使用ts过程中有部分类型定义及代码片段有重复;所以编写了两个vscode插件;如有需要可以查阅。【推荐:vscode基础教程】tools1
由于项目组最近准备从javascript
迁移到typescript
;在使用ts过程中有部分类型定义
及代码片段
有重复;所以编写了两个vscode
插件;如有需要可以查阅。【推荐:vscode基础教程】
1、从剪切板json数据转换成interface
(windows: ctrl+alt+C
, Mac : ^+?+C
)
2、选择json数据转换成interface
(windows: ctrl+alt+S
, Mac : ^+?+S
)
3、将json文件转换成interface
(windows: ctrl+alt+F
, Mac : ^+?+F
)
上面的gift
图可能播放较快,有兴趣同学可以下载使用:打开vscode插件
并搜索json转ts
使用ts
编写react
代码片段。
打开vscode插件
并搜索vscode-react-typescript-snippet
即可。
tsrcc→
react 类式组件
tsrcstate
包含Props, State, 和 constructor的类式组件
tsrpcc→
react PureComponent组件
tsrpfc
react 函数式组件
tsdrpfc
拥有default export的函数式react组件
tsrfc
无状态的函数式react组件
conc→
react constructor 方法
cwm→
componentWillMount 方法
ren→
render 方法
cdm→
componentDidMount 方法
cwrp→
componentWillReceiveProps 方法
scu→
shouldComponentUpdate 方法
cwu→
componentWillUpdate 方法
cdu→
componentDidUpdate 方法
cwum→
componentWillUnmount 方法
sst→
this.setState生成
bnd→
绑定语句
met→
创建一个方法
tscredux→
创建一个类式的redux,包含connect
tsrfredux->
创建一个函数式的redux,包含connect
imt
生成一个import语句
state 相关tsrcstate
import * as React from "react"; export interface IAppProps {} export interface IAppState {} export default class App extends React.Component<IAppProps, IAppState> { constructor(props: IAppProps) { super(props); this.state = {}; } render() { return <div></div>; } }functional 相关
tsrfc
import * as React from "react"; interface IAppProps {} const App: React.FC<IAppProps> = (props) => { return <div></div>; }; export default App;redux 相关
tsrcredux
import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; // you can define global interface ConnectState in @/state/connect.d import { ConnectState } from "@/state/connect.d"; export interface IAppProps {} export type ReduxType = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IAppProps; class App extends React.Component<ReduxType> { render() { return <div></div>; } } const mapStateToProps = (state: ConnectState) => { return {}; }; const mapDispatchToProps = (dispatch: Dispatch) => { return {}; }; export default connect(mapStateToProps, mapDispatchToProps)(App);
tsrfredux
import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; // you can define global interface ConnectState in @/state/connect.d import { ConnectState } from "@/state/connect.d"; export interface IAppProps {} export type ReduxType = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IAppProps; const App: React.FC<ReduxType> = (props) => { return <div></div>; }; const mapStateToProps = (state: ConnectState) => { return {}; }; const mapDispatchToProps = (dispatch: Dispatch) => { return {}; }; export default connect(mapStateToProps, mapDispatchToProps)(App);
tsrpfc
import * as React from "react"; export interface IAppProps {} export function App(props: IAppProps) { return <div></div>; }
相关推荐:编程教学!!
相关文章推荐
网站谷歌评分90+意味着什么?2022-09-06
怎样将不安全网站变成安全网站访问?2022-09-26
网站排名下降,可能跟算法更新没关系2022-09-20
网站如何设置高质量的网页标题?2022-09-14
做外贸网站选哪些语言?法语、德语最吃香2022-09-13