Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.