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

青灯夜游
リリース: 2020-09-04 10:24:08
転載
6008 人が閲覧しました

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

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

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

機能

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

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

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

)

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

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

)

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

ダウンロード

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

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

tools2: vscode-react-typescript-snippet

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

ダウンロード

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

vscode で typescript を書くために推奨される 2 つの便利なプラグイン#サポートされるファイル

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

import * as React from "react"; export interface IAppProps {} export interface IAppState {} export default class App extends React.Component { constructor(props: IAppProps) { super(props); this.state = {}; } render() { return 
; } }
ログイン後にコピー
import * as React from "react"; interface IAppProps {} const App: React.FC = (props) => { return 
; }; export default App;
ログイン後にコピー
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 & ReturnType & IAppProps; class App extends React.Component { render() { return 
; } } const mapStateToProps = (state: ConnectState) => { return {}; }; const mapDispatchToProps = (dispatch: Dispatch) => { return {}; }; export default connect(mapStateToProps, mapDispatchToProps)(App);
ログイン後にコピー
トリガー ##tsrcc→ tsrcstate tsrpcc→ 反応機能コンポーネント デフォルトのエクスポートを使用した関数型反応コンポーネント ##tsrfc ##ren→ レンダリング メソッド cdm→ componentDidMount メソッド cwrp→ ##scu→ ##componentWillUpdate メソッド componentDidUpdate メソッド componentWillUnmount メソッド this.setState は バインド ステートメント 作成メソッド # connectを含むクラススタイルのreduxを作成します 機能関連 tsrcredux
コンテンツ
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 & ReturnType & IAppProps; const App: React.FC = (props) => { return 
; }; 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 
; }
ログイン後にコピー
関連のおすすめ:

プログラミング教育! !

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

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!