這篇文章主要介紹了兩個vscode中編寫typescript的好用插件有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務公司，擁有項目成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元明水做網(wǎng)站,已為上家服務,為明水各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

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

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圖可能播放較快，有興趣同學可以下載使用：打開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組件
tsrpfc	react 函數(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)建一個方法
tscredux→	創(chuàng)建一個類式的redux，包含connect
tsrfredux->	創(chuàng)建一個函數(shù)式的redux，包含connect
imt	生成一個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>;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“兩個vscode中編寫typescript的好用插件有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

當前題目：兩個vscode中編寫typescript的好用插件有哪些
文章分享：http://www.chinadenli.net/article8/pgdeop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、小程序開發(fā)、營銷型網(wǎng)站建設、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)