Since the project team is recently preparing to migrate from javascript to typescript; In the process of using TS, some type definitions and code snippets are repeated. So I wrote two VSCode plug-ins; Check it out if you need to.

Tools1: JSON to typescript interface

Github: Welcome star

features

  1. From clipboard JSON data tointerface (windows: ctrl+alt+C , Mac : ^ + ⌥ + C)

  1. Select json data to convert tointerface (windows: ctrl+alt+S , Mac : ^ + ⌥ + S)

  1. Convert the JSON file tointerface (windows: ctrl+alt+F , Mac : ^ + ⌥ + F)

download

Open the VSCode plugin and search for JSON to TS

tools2: vscode-react-typescript-snippet

Github: Welcome star

Write React code snippets using TS.

download

Open theVscode plug-inAnd search forvscode-react-typescript-snippetCan.

Supporting documents

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

Code snippet

Trigger Content
TSRCC - React class component
tsrcstate Class-like components containing Props, State, and constructor
TSRPCC - The react PureComponent components
tsrpfc React functional component
tsdrpfc A functional React component with default Export
tsrfc A stateless functional React component
The conc - The react constructor method
The CWM - ComponentWillMount method
Ren - Render method
The CDM - ComponentDidMount method
CWRP - ComponentWillReceiveProps method
Scu - ShouldComponentUpdate method
The cwu - ComponentWillUpdate method
The cdu - ComponentDidUpdate method
Cwum - ComponentWillUnmount method
The SST - Enclosing setState generated
BND - Binding statements
He met - Create a method
Tscredux - Create a class-like redux, including Connect
tsrfredux-> Create a functional redux, including Connect
imt Generate an import statement

The state related

tsrcstate

import * as React from "react";

export interface IAppProps {}

export interface IAppState {}

export default class App extends React.Component<IAppProps.IAppState> {
  constructor(props: IAppProps) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>; }}Copy the code

The functional related

tsrfc

import * as React from "react";

interface IAppProps {}

const App: React.FC<IAppProps> = (props) = > {
  return <div></div>;
};

export default App;
Copy the code

Story 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<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> &
  IAppProps;

class App extends React.Component<ReduxType> {
  render() {
    return <div></div>; }}const mapStateToProps = (state: ConnectState) = > {
  return {};
};
const mapDispatchToProps = (dispatch: Dispatch) = > {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
Copy the code

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<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> &
  IAppProps;

const App: React.FC<ReduxType> = (props) = > {
  return <div></div>;
};

const mapStateToProps = (state: ConnectState) = > {
  return {};
};
const mapDispatchToProps = (dispatch: Dispatch) = > {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
Copy the code

tsrpfc

import * as React from "react";

export interface IAppProps {}

export function App(props: IAppProps) {
  return <div></div>;
}
Copy the code