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

这篇文章主要介绍了两个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)

代码片段

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.dimport { 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.dimport { 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的好用插件有哪些"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!