Da sich das Projektteam kürzlich auf die Migration von javascript zu typescript vorbereitet, sind einige Typdefinitionen und -Codes enthalten Der Prozess der Verwendung von ts-Fragmenten wird dupliziert, also zwei vscodejavascript迁移到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)
代码片段
| 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语句 Plugins wurden geschrieben; Sie können es bei Bedarf überprüfen. [Empfohlen: Vscode Basic Tutorial
| ]
tools1: Konvertieren Sie JSON in Schnittstelle des Typoskripts
Funktionen
1. Konvertieren Sie die JSON-Daten der Zwischenablage in interface (Windows: Strg + Alt+ C , Mac: ^+?+C)
2. Wählen Sie JSON-Daten aus, die in interface konvertiert werden sollen (Windows: Strg+Alt+S , Mac: <code>^+?+S)
3. Konvertieren Sie die JSON-Datei in interface (Windows: Strg+Alt+F , Mac: ^+?+F)
Herunterladen
Das obige Geschenk-Bild kann möglicherweise schneller abgespielt werden: Öffnen Sie das vscode-Plug-in und suchen Sie nach json to ts
tools2: vscode-react-typescript-snippet
Verwenden Sie ts, um react-Codefragmente zu schreiben. Herunterladen
Öffnen Sie das vscode-Plug-in und suchen Sie nach vscode-react-typescript-snippet.
Unterstützende Dateien h3>
- TypeScript (.ts)
- TypeScript React (.tsx)
Code-Snippet li>
h3>
| Trigger |
Content |
tsrcc→ |
React-Class-Komponente
tsrcstate |
Klassenkomponente mit Requisiten, Status und Konstruktor
|
tsrpcc→
|
React PureComponent |
tsrpfc🎜 |
React Functional Component🎜 🎜 |
tsdrpfc🎜 |
Funktionale Reaktionskomponente mit Standardexport🎜🎜 |
tsrfc🎜 |
Zustandslose funktionale Reaktionskomponente🎜🎜 |
conc→🎜 |
react-Konstruktor-Methode🎜🎜 |
cwm→🎜 |
componentWillMount-Methode🎜🎜 |
ren→🎜
render method🎜🎜 |
cdm→ code >🎜<td>
<code>componentDidMount-Methode🎜🎜 |
cwrp→🎜 |
componentWillReceiveProps-Methode 🎜 🎜 |
scu→🎜 |
shouldComponentUpdate-Methode🎜🎜 |
cwu→🎜 |
componentWillUpdate-Methode🎜🎜 |
cdu→🎜 |
componentDidUpdate-Methode 🎜🎜 |
cwum→🎜 |
componentWillUnmount-Methode🎜🎜 |
sst→🎜 |
this.setState generiert🎜🎜 |
bnd→🎜 Bind-Anweisung🎜🎜 |
met→🎜 |
Erstellen Sie eine Methode🎜 🎜 |
tscredux→🎜 |
Erstellen Sie einen Klassenredux, einschließlich connect🎜🎜 |
tsrfredux->🎜 |
Erstellen Sie einen funktionalen Redux, einschließlich Connect🎜🎜 |
imt 🎜 |
Generieren Sie eine Importanweisung🎜🎜🎜🎜🎜zustandsbezogen🎜🎜🎜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>;
}
}Nach dem Login kopieren import * as React from "react";
interface IAppProps {}
const App: React.FC<IAppProps> = (props) => {
return <div></div>;
};
export default App;Nach dem Login kopieren 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);Nach dem Login kopieren 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);Nach dem Login kopieren import * as React from "react";
export interface IAppProps {}
export function App(props: IAppProps) {
return <div></div>;
}Nach dem Login kopieren |
|
Das obige ist der detaillierte Inhalt vonZwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
