由于項(xiàng)目組最近準(zhǔn)備從javascript遷移到typescript；在使用ts過程中有部分類型定義及代碼片段有重復(fù)；所以編寫了兩個(gè)vscode插件；如有需要可以查閱。【推薦：vscode基礎(chǔ)教程】

tools1: JSON轉(zhuǎn)換成typescript的interface特色

1、從剪切板json數(shù)據(jù)轉(zhuǎn)換成interface (windows: ctrl+alt+C , Mac : ^+?+C)

2、選擇json數(shù)據(jù)轉(zhuǎn)換成interface (windows: ctrl+alt+S , Mac : ^+?+S)

3、將json文件轉(zhuǎn)換成interface (windows: ctrl+alt+F , Mac : ^+?+F)

下載

上面的gift圖可能播放較快，有興趣同學(xué)可以下載使用：打開vscode插件并搜索json轉(zhuǎn)ts

tools2: vscode-react-typescript-snippet

使用ts編寫react代碼片段。

下載

打開vscode插件并搜索vscode-react-typescript-snippet即可。

支持文件TypeScript (.ts)TypeScript React (.tsx)代碼片段

Trigger Content

tsrcc→react 類式組件tsrcstate包含Props, State, 和 constructor的類式組件tsrpcc→react PureComponent組件tsrpfcreact 函數(shù)式組件tsdrpfc擁有default export的函數(shù)式react組件tsrfc無狀態(tài)的函數(shù)式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→創(chuàng)建一個(gè)方法tscredux→創(chuàng)建一個(gè)類式的redux，包含connecttsrfredux->創(chuàng)建一個(gè)函數(shù)式的redux，包含connectimt生成一個(gè)import語句state 相關(guān)

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 相關(guān)

tsrfc

import * as React from "react";

interface IAppProps {}

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

export default App;

redux 相關(guān)

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

相關(guān)推薦：編程教學(xué)！！

總結(jié)

以上是生活随笔為你收集整理的两个vscode中编写typescript的好用插件推荐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。