关于typescript:推荐vscode编写typescript的两个插件

因为项目组最近筹备从 javascript 迁徙到 typescript；在应用 ts 过程中有局部 类型定义 及代码片段 有反复；所以编写了两个 vscode 插件；如有须要能够查阅。

tools1: JSON 转换成 typescript 的 interface

github 地址: 欢送 star

特色

1. 从剪切板 json 数据转换成interface (windows: ctrl+alt+C , Mac : ^+⌥+C)

1. 抉择 json 数据转换成interface (windows: ctrl+alt+S , Mac : ^+⌥+S)

1. 将 json 文件转换成interface (windows: ctrl+alt+F , Mac : ^+⌥+F)

下载

下面的 gift 图可能播放较快，有趣味同学能够下载应用：关上 vscode 插件 并搜寻json 转 ts

tools2: vscode-react-typescript-snippet

github 地址: 欢送 star

应用 ts 编写 react 代码片段。

下载

关上 vscode 插件 并搜寻 vscode-react-typescript-snippet 即可。

反对文件

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

代码片段

state 相干

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

functional 相干

tsrfc

import * as React from "react";

interface IAppProps {}

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

export default App;

redux 相干

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);

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);

tsrpfc

import * as React from "react";

export interface IAppProps {}

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