由于项目组最近准备从javascript迁移到typescript；在使用ts过程中有部分类型定义及代码片段有重复；所以编写了两个vscode插件；如有需要可以查阅。【推荐：vscode基础教程】
tools1: JSON转换成typescript的interface
特色
1、从剪切板json数据转换成vscode (windows: interface , Mac : ctrl+alt+C )
2、选择json数据转换成^+?+C (windows: interface , Mac : ctrl+alt+S )
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
3、将json文件转换成^+?+S (windows: interface , Mac : ctrl+alt+F )
下载
上面的^+?+F图可能播放较快，有兴趣同学可以下载使用：打开gift并搜索vscode插件
tools2: vscode-react-typescript-snippet
使用json转ts编写ts代码片段。
下载
打开react并搜索vscode插件即可。
支持文件
TypeScript (.ts)TypeScript React (.tsx)
代码片段
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，包含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.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的好用插件推荐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/62584.html
微信扫一扫 
支付宝扫一扫 
