久久天天躁狠狠躁夜夜avapp,久久久久国产亚洲AV麻豆,久久亚洲sm情趣捆绑调教

兩個vscode中編寫typescript的好用插件推薦

由于項目組最近準備從javascript遷移到typescript；在使用ts過程中有部分類型定義及代碼片段有重復；所以編寫了兩個vscode插件；如有需要可以查閱。【推薦：vscode】

tools1: JSON轉換成typescript的interface

特色

1、從剪切板json數據轉換成interface ?(windows: ctrl+alt+C , Mac : ^+?+C)

兩個vscode中編寫typescript的好用插件推薦

2、選擇json數據轉換成interface (windows: ctrl+alt+S , Mac : ^+?+S)

兩個vscode中編寫typescript的好用插件推薦

3、將json文件轉換成interface ? (windows: ctrl+alt+F , Mac : ^+?+F)

兩個vscode中編寫typescript的好用插件推薦

下載

上面的gift圖可能播放較快，有興趣同學可以下載使用：打開vscode插件并搜索json轉ts

兩個vscode中編寫typescript的好用插件推薦

tools2: vscode-react-typescript-snippet

使用ts編寫react代碼片段。

下載

打開vscode插件并搜索vscode-react-typescript-snippet即可。

兩個vscode中編寫typescript的好用插件推薦

支持文件

TypeScript (.ts)
TypeScript React (.tsx)

代碼片段

Trigger	Content
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>?{ ??constructor(props:?IAppProps)?{ ????super(props);  ????this.state?=?{}; ??}  ??render()?{ ????return?<div></div>; ??} }</iappprops>

functional 相關

tsrfc

import?*?as?React?from?"react";  interface?IAppProps?{}  const?App:?React.FC<iappprops>?=?(props)?=&gt;?{ ??return?<div></div>; };  export?default?App;</iappprops>

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>?&amp; ??ReturnType<typeof>?&amp; ??IAppProps;  class?App?extends?React.Component<reduxtype>?{ ??render()?{ ????return?<div></div>; ??} }  const?mapStateToProps?=?(state:?ConnectState)?=&gt;?{ ??return?{}; }; const?mapDispatchToProps?=?(dispatch:?Dispatch)?=&gt;?{ ??return?{}; };  export?default?connect(mapStateToProps,?mapDispatchToProps)(App);</reduxtype></typeof></typeof>

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>?&amp; ??ReturnType<typeof>?&amp; ??IAppProps;  const?App:?React.FC<reduxtype>?=?(props)?=&gt;?{ ??return?<div></div>; };  const?mapStateToProps?=?(state:?ConnectState)?=&gt;?{ ??return?{}; }; const?mapDispatchToProps?=?(dispatch:?Dispatch)?=&gt;?{ ??return?{}; };  export?default?connect(mapStateToProps,?mapDispatchToProps)(App);</reduxtype></typeof></typeof>

tsrpfc

import?*?as?React?from?"react";  export?interface?IAppProps?{}  export?function?App(props:?IAppProps)?{ ??return?<div></div>; }