两个vscode中编写typescript的好用插件推荐

发布时间:2024-06-18 点击:59
由于项目组最近准备从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万 海名微拿下全球首届微商节总赞助
域名注册完成之后的那些事 域名注册后还要做好这些