兩個(gè)vscode中編寫typescript的好用插件有哪些

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

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

由于項(xiàng)目組最近準(zhǔn)備從javascript遷移到typescript；在使用ts過(guò)程中有部分類型定義及代碼片段有重復(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é)可以下載使用：打開(kāi)vscode插件并搜索json轉(zhuǎn)ts

tools2: vscode-react-typescript-snippet

使用ts編寫react代碼片段。

下載

打開(kāi)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	無(wú)狀態(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→	綁定語(yǔ)句
met→	創(chuàng)建一個(gè)方法
tscredux→	創(chuàng)建一個(gè)類式的redux，包含connect
tsrfredux->	創(chuàng)建一個(gè)函數(shù)式的redux，包含connect
imt	生成一個(gè)import語(yǔ)句

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

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

當(dāng)前題目：兩個(gè)vscode中編寫typescript的好用插件有哪些
文章分享：http://muchs.cn/article8/pgdeop.html

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

廣告

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