大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

由于项目组最近准备从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 {
  constructor(props: IAppProps) {
    super(props);

    this.state = {};
  }

  render() {
    return 
; } }
functional 相关

tsrfc

import * as React from "react";

interface IAppProps {}

const App: React.FC = (props) => {
  return 
; }; 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 &
  ReturnType &
  IAppProps;

class App extends React.Component {
  render() {
    return 
; } } 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 &
  ReturnType &
  IAppProps;

const App: React.FC = (props) => {
  return 
; }; 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 
; }

相关推荐:编程教学!!
当前标题:两个vscode中编写typescript的好用插件推荐
标题网址:http://dzwzjz.com/article/cjgesh.html

在线咨询
服务热线
服务热线:028-86922220
TOP