Two useful plug-ins recommended for writing typescript in vscode

As the project team is recently preparing to migrate fromjavascripttotypescript; there are sometype definitionsin the process of using ts andcode snippetsare duplicated; therefore, twovscodeplug-ins were written; you can refer to them if necessary. [Recommended:vscode Basic Tutorial]

tools1: JSON to typescript interface

Features

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)

Download

The abovegiftpicture may play faster, interested students can download and use: openvscode plug-inAnd search forjson to ts

##tools2: vscode-react-typescript-snippet

Written using

tsreactCode snippets.

Download

Open the

vscode plug-inand search forvscode-react-typescript-snippet.

Supported files

TypeScript (.ts)
• TypeScript React (.tsx)

Code 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 
; } }

Trigger Content ##tsrcc→ react class component tsrcstate Contains Props, State, and constructor class components ##tsrpcc→ tsrpfc ##tsdrpfc tsrfc conc→ cwm→ shouldComponentUpdate method ##componentWillUpdate method componentDidUpdate method componentWillUnmount method this.setState generates Bind statement Create a method Create a class-style redux, including connect ##tsrfredux-> Create a functional redux, Contains connect functional related

react PureComponent component
react functional components
Functional react component with default export
Stateless Functional react component
react constructor method
componentWillMount method	##ren→
render method	cdm→
componentDidMount method	cwrp→
componentWillReceiveProps method	##scu→
	cwu→
	cdu→
	cwum→
	sst→
	bnd→
	met→
	tscredux→
##imt	Generates an import statement
state related	tsrcstate

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.d import { 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.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!