两个vscode中编写typescript的好用插件推荐-VSCode-php.cn

两个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

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

tools2: vscode-react-typescript-snippet

使用ts编写react代码片段。

下载

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

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

支持文件

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 { constructor(props: IAppProps) { super(props); this.state = {}; } render() { return 
; } }

Copier après la connexion

functional 相关

tsrfc

import * as React from "react"; interface IAppProps {} const App: React.FC = (props) => { return 
; }; export default App;

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion

tsrpfc

import * as React from "react"; export interface IAppProps {} export function App(props: IAppProps) { return 
; }

Copier après la connexion

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

tools1: JSON转换成typescript的interface

特色

下载

tools2: vscode-react-typescript-snippet

下载

支持文件

代码片段

state 相关

functional 相关

redux 相关