Home>Article>Development Tools> Two useful plug-ins recommended for writing typescript in vscode
As the project team is recently preparing to migrate fromjavascript
totypescript
; there are sometype definitions
in the process of using ts andcode snippets
are duplicated; therefore, twovscode
plug-ins were written; you can refer to them if necessary. [Recommended:vscode Basic Tutorial]
1. Convert from clipboard json data tointerface
(windows:ctrl alt C
, Mac :^ ? C
)
2. Select json Data is converted tointerface
(windows:ctrl alt S
, Mac :^ ? S
)
3. Convert the json file tointerface
(windows:ctrl alt F
, Mac:^ ? F
)
The abovegift
picture may play faster, interested students can download and use: openvscode plug-in
And search forjson to ts
tsreact
Code snippets.
vscode plug-inand search for
vscode-react-typescript-snippet.
import * as React from "react"; export interface IAppProps {} export interface IAppState {} export default class App extends React.Component{ constructor(props: IAppProps) { super(props); this.state = {}; } render() { return ; } }
Content | |
---|---|
| react class component
|
| Contains Props, State, and constructor class components
|
react PureComponent component |
|
react functional components |
| ##tsdrpfc
Functional react component with default export |
| tsrfc
Stateless Functional react component |
| conc→
react constructor method |
| cwm→
componentWillMount method |
##ren→ |
render method
|
cdm→ |
componentDidMount method
|
cwrp→ |
componentWillReceiveProps method
|
##scu→ |
|
cwu→ |
|
cdu→
|
|
cwum→
|
|
sst→
|
|
bnd→
|
|
met→
|
|
tscredux→
|
| ##tsrfredux->
| Create a functional redux, Contains connect
##imt |
Generates an import statement |
state related |
tsrcstate |
import * as React from "react"; interface IAppProps {} const App: React.FCredux Related= (props) => { return ; }; export default App;
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 = ReturnTypetsrfredux& ReturnType & IAppProps; class App extends React.Component { render() { return ; } } const mapStateToProps = (state: ConnectState) => { return {}; }; const mapDispatchToProps = (dispatch: Dispatch) => { return {}; }; export default connect(mapStateToProps, mapDispatchToProps)(App);
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& ReturnType & IAppProps; const App: React.FC = (props) => { return ; }; 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 ; }Related Recommended:
Programming Teaching! !
The above is the detailed content of Two useful plug-ins recommended for writing typescript in vscode. For more information, please follow other related articles on the PHP Chinese website!