vscode で typescript を書くために推奨される 2 つの便利なプラグイン

プロジェクト チームは最近、javascript から typescript への移行の準備を行っているため、いくつかの typescript が存在します。 ts と コード スニペット を使用するプロセスが重複しているため、2 つの vscode プラグインが作成されており、必要に応じて参照できます。 [推奨: vscode 基本チュートリアル]

tools1: JSON から typescript インターフェイス

機能

1. クリップボードの JSON データから インターフェイスへの変換 (windows: ctrl alt C 、Mac : ^ ? C)

2. データが変換される json を選択します。 interface (Windows: ctrl alt S 、Mac : ^ ? S

)

3. 変換json ファイルを interface (Windows: ctrl alt F 、Mac: ^ ? F

)

ダウンロード

上の ギフト画像はより速く再生される可能性があります。興味のある学生はダウンロードして使用できます: vscode プラグイン を開いて検索してくださいjson から ts

tools2: vscode-react-typescript-snippet

ts ## を使用して記述#reactコード スニペット。

ダウンロード

vscode プラグイン を開き、vscode-react-typescript-snippet を検索します。

#サポートされるファイル

TypeScript (.ts)

• TypeScript React (.tsx)
• コード スニペット

トリガー##tsrcc→ tsrcstatetsrpcc→反応機能コンポーネントデフォルトのエクスポートを使用した関数型反応コンポーネント##tsrfc##ren→レンダリング メソッドcdm→componentDidMount メソッドcwrp→##scu→##componentWillUpdate メソッドcomponentDidUpdate メソッド componentWillUnmount メソッドthis.setState は バインド ステートメント作成メソッド# connectを含むクラススタイルのreduxを作成します

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

機能関連

import * as React from "react";

interface IAppProps {}

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

export default App;

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

コンテンツ
react クラス コンポーネント
Props、State、およびコンストラクター クラス コンポーネント
#react PureComponent コンポーネント	##tsrpfc
	##tsdrpfc
	#ステートレス関数型反応コンポーネント
conc→	#react コンストラクター メソッド
cwm→	componentWillMount メソッド
#componentWillReceiveProps メソッド
#ShouldComponentUpdate メソッド	cwu→
	cdu→
	cwum→
	sst→
	## を生成します#bnd→
	met→
	#tscredux→
##tsrfredux->	connect を含む関数 Redux を作成します
imt	インポート ステートメントを生成します
状態関連	tsrcstate
tsrfc	redux関連

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

関連のおすすめ:

プログラミング教育! ！

以上がvscode で typescript を書くために推奨される 2 つの便利なプラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。