• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
PHP中文网
帮助1556

学新通技术网

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)

代码片段

Trigger Content
tsrcc→ react 类式组件
tsrcstate 包含Props, State, 和 constructor的类式组件
tsrpcc→ react PureComponent组件
tsrpfc react 函数式组件
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,包含connect
tsrfredux-> 创建一个函数式的redux,包含connect
imt 生成一个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.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>;
}

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tangbhhfg
系列文章
更多 icon
同类精品
更多 icon
继续加载