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

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

tools1: JSON转换成typescript的interface

github地址: 欢送star

特色

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

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

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

代码片段

Trigger	Content
`tsrcc→`	`react 类式组件`
`tsrcstate`	`蕴含Props, State, 和 constructor的类式组件`
`tsrpcc→`	`react PureComponent组件`
`tsrpfc`	`react 函数式组件`
`tsdrpfc`	`领有default export的函数式react组件`
`tsrfc`	`无状态的函数式react组件`
`conc→`	`react constructor 办法`
`cwm→`	`componentWillMount 办法`
`ren→`	`render 办法`
`cdm→`	`componentDidMount 办法`
`cwrp→`	`componentWillReceiveProps 办法`
`scu→`	`shouldComponentUpdate 办法`
`cwu→`	`componentWillUpdate 办法`
`cdu→`	`componentDidUpdate 办法`
`cwum→`	`componentWillUnmount 办法`
`sst→`	`this.setState生成`
`bnd→`	`绑定语句`
`met→`	`创立一个办法`
`tscredux→`	`创立一个类式的redux，蕴含connect`
`tsrfredux->`	`创立一个函数式的redux，蕴含connect`
`imt`	`生成一个import语句`

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.dimport { 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.dimport { 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>;}