What are the useful plug-ins for writing typescript in the two vscode
This article mainly introduces the two vscode in the preparation of typescript plug-ins which are useful, have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
As the project team recently prepared to migrate from javascript to typescript;, there are some type definitions and code snippets that are duplicated in the process of using ts; so two vscode plug-ins have been written; refer to them if necessary. [recommended: vscode basic tutorial]
Tools1: the interface feature of converting JSON to typescript
1. Convert json data from clipboard to interface (windows: ctrl+alt+C, Mac: ^ +? + C)
2. Select json data to convert to interface (windows: ctrl+alt+S, Mac: ^ +? + S)
3. Convert json files to interface (windows: ctrl+alt+F, Mac: ^ +? + F)
download
The above gift diagram may play faster, students who are interested can download and use: open the vscode plug-in and search for json to ts
Tools2: vscode-react-typescript-snippet
Write react code snippets using ts.
download
Just open the vscode plug-in and search for vscode-react-typescript-snippet.
Support file
TypeScript (.ts)
TypeScript React (.tsx)
Code snippet TriggerContenttsrcc → react classy component tsrcstate contains Props, State And constructor's tsrpcc → react PureComponent component tsrpfcreact functional component tsdrpfc has default export's functional react component tsrfc stateless functional react component conc → react constructor method cwm → componentWillMount method ren → render method cdm → componentDidMount method cwrp → componentWillReceiveProps scu → shouldComponentUpdate method cwu → componentWillUpdate method componentWillUpdate → componentWillUpdate method componentWillUpdate → componentWillUpdate method cdu → to generate a → binding statement to create a method to create a → to create a class Contains connecttsrfredux- > to create a functional redux, including connectimt to generate an import statement related to state
Tsrcstate
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;}} functional related
Tsrfc
Import * as React from "react"; interface IAppProps {} const App: React.FC = (props) = > {return;}; export default App;redux related
Tsrcredux
Import * as React from "react"; import {connect} from "react-redux"; import {Dispatch} from "redux"; / you can define global interface ConnectState in @ / state/connect.dimport {ConnectState} from "@ / state/connect.d"; export interface IAppProps {} export type ReduxType = ReturnType & 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)
Tsrfredux
Import * as React from "react"; import {connect} from "react-redux"; import {Dispatch} from "redux"; / / you can define global interface ConnectState in @ / state/connect.dimport {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;} Thank you for reading this article carefully. I hope the article "what are the useful plug-ins for writing typescript in the two vscode" shared by the editor will be helpful to you. At the same time, I also hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!
