温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

两个vscode中编写typescript的好用插件有哪些

发布时间:2021-01-11 10:09:05 来源:亿速云 阅读:488 作者:小新 栏目:软件技术

这篇文章主要介绍了两个vscode中编写typescript的好用插件有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

由于项目组最近准备从javascript迁移到typescript;在使用ts过程中有部分类型定义代码片段有重复;所以编写了两个vscode插件;如有需要可以查阅。【推荐:vscode基础教程】

tools1: JSON转换成typescript的interface

特色

1、从剪切板json数据转换成interface  (windows: ctrl+alt+C , Mac : ^+?+C)

两个vscode中编写typescript的好用插件有哪些

2、选择json数据转换成interface (windows: ctrl+alt+S , Mac : ^+?+S)

两个vscode中编写typescript的好用插件有哪些

3、将json文件转换成interface   (windows: ctrl+alt+F , Mac : ^+?+F)

两个vscode中编写typescript的好用插件有哪些两个vscode中编写typescript的好用插件有哪些

下载

上面的gift图可能播放较快,有兴趣同学可以下载使用:打开vscode插件并搜索json转ts

两个vscode中编写typescript的好用插件有哪些

tools2: vscode-react-typescript-snippet

使用ts编写react代码片段。

下载

打开vscode插件并搜索vscode-react-typescript-snippet即可。

两个vscode中编写typescript的好用插件有哪些

支持文件

  • TypeScript (.ts)

  • TypeScript React (.tsx)

代码片段

TriggerContent
tsrcc→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,包含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>;
}

感谢你能够认真阅读完这篇文章,希望小编分享的“两个vscode中编写typescript的好用插件有哪些”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI