Home>Article>Development Tools> Two useful plug-ins recommended for writing typescript in vscode

Two useful plug-ins recommended for writing typescript in vscode

青灯夜游
青灯夜游 forward
2020-09-04 10:19:04 6028browse

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)

Two useful plug-ins recommended for writing typescript in vscode

2. Select json Data is converted tointerface(windows:ctrl alt S, Mac :^ ? S)

Two useful plug-ins recommended for writing typescript in vscode

3. Convert the json file tointerface(windows:ctrl alt F, Mac:^ ? F)

Two useful plug-ins recommended for writing typescript in vscode

Download

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

Two useful plug-ins recommended for writing typescript in vscode

##tools2: vscode-react-typescript-snippet

Written using

tsreactCode snippets.

Download

Open the

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

Two useful plug-ins recommended for writing typescript in vscode

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete