由于項目組最近準備從javascript遷移到typescript；在使用ts過程中有部分類型定義及代碼片段有重復；所以編寫了兩個vscode插件；如有需要可以查閱。【推薦：vscode基礎教程】
tools1: json轉換成typescript的interface特色
1、從剪切板json數據轉換成interface (windows: ctrl alt c , mac : ^ ? c)
2、選擇json數據轉換成interface (windows: ctrl alt s , mac : ^ ? s)
3、將json文件轉換成interface (windows: ctrl alt f , mac : ^ ? f)
下載
上面的gift圖可能播放較快，有興趣同學可以下載使用：打開vscode插件并搜索json轉ts
tools2: vscode-react-typescript-snippet
使用ts編寫react代碼片段。
下載
打開vscode插件并搜索vscode-react-typescript-snippet即可。
支持文件typescript (.ts)typescript react (.tsx)代碼片段
triggercontenttsrcc→react 類式組件tsrcstate包含props, state, 和 constructor的類式組件tsrpcc→react purecomponent組件tsrpfcreact 函數式組件tsdrpfc擁有default export的函數式react組件tsrfc無狀態的函數式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→創建一個方法tscredux→創建一個類式的redux，包含connecttsrfredux->創建一個函數式的redux，包含connectimt生成一個import語句state 相關
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 相關
tsrfc
import * as react from "react";interface iappprops {}const app: react.fc<iappprops> = (props) => { return <div></div>;};export default app;redux 相關
tsrcredux
import * as react from "react";import { connect } from "react-redux";import { dispatch } from "redux";// you can define global interface connectstate in @/state/connect.dimport { 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.dimport { 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>;}相關推薦：編程教學！！

phpmyadmin出現1862錯誤怎么辦？
“黑色星期五”在華遇冷 海淘屬性很難在短時間得到認同
終端應用與與云服務器配置
廣東云服務器的價格
H5三個設計方向的自我定位
3dmax玻璃材質怎么弄 3dmax玻璃材質渲染教程
豪擲500萬 海名微拿下全球首屆微商節總贊助
域名注冊完成之后的那些事 域名注冊后還要做好這些