站長資訊網(wǎng)
由于項(xiàng)目組最近準(zhǔn)備從javascript遷移到typescript；在使用ts過程中有部分類型定義及代碼片段有重復(fù)；所以編寫了兩個(gè)vscode插件；如有需要可以查閱?！就扑]：vscode基礎(chǔ)教程】
tools1: JSON轉(zhuǎn)換成typescript的interface
github地址: 歡迎star
特色
1、從剪切板json數(shù)據(jù)轉(zhuǎn)換成interface (windows: ctrl+alt+C , Mac : ^+?+C)
2、選擇json數(shù)據(jù)轉(zhuǎn)換成interface (windows: ctrl+alt+S , Mac : ^+?+S)
3、將json文件轉(zhuǎn)換成interface (windows: ctrl+alt+F , Mac : ^+?+F)
下載
上面的gift圖可能播放較快，有興趣同學(xué)可以下載使用：打開vscode插件并搜索json轉(zhuǎn)ts
tools2: vscode-react-typescript-snippet
github地址: 歡迎star
使用ts編寫react代碼片段。
下載
打開vscode插件并搜索vscode-react-typescript-snippet即可。
支持文件
- TypeScript (.ts)
- TypeScript React (.tsx)
代碼片段
| Trigger | Content |
|---|---|
tsrcc→ |
react 類式組件 |
tsrcstate |
包含Props, State, 和 constructor的類式組件 |
tsrpcc→ |
react PureComponent組件 |
tsrpfc |
react 函數(shù)式組件 |
tsdrpfc |
擁有default export的函數(shù)式react組件 |
tsrfc |
無狀態(tài)的函數(shù)式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→ |
創(chuàng)建一個(gè)方法 |
tscredux→ |
創(chuàng)建一個(gè)類式的redux，包含connect |
tsrfredux-> |
創(chuàng)建一個(gè)函數(shù)式的redux，包含connect |
imt |
生成一個(gè)import語句 |
state 相關(guān)
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 相關(guān)
tsrfc
import * as React from "react"; interface IAppProps {} const App: React.FC<IAppProps> = (props) => { return <div></div>; }; export default App;
redux 相關(guān)
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>; }
