vscode에서 TypeScript 작성에 권장되는 두 가지 유용한 플러그인

최근 프로젝트 팀이 javascript에서 typescript로 마이그레이션을 준비하고 있으므로 여기에는 몇 가지 유형 정의 및 코드가 있습니다. ts 조각을 사용하는 프로세스가 중복되므로 두 개의 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)

代码片段

]

tools1: JSON을 다음으로 변환 typescript의 인터페이스

기능

1. 클립보드 json 데이터를 인터페이스로 변환합니다(windows: ctrl +alt+ C , Mac: ^+?+C)

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语句 플러그인이 작성되었습니다. 필요한 경우 확인할 수 있습니다. [권장: vscode 기본 튜토리얼

2. 인터페이스로 변환할 json 데이터를 선택하세요(windows: ctrl+alt+S , 맥: <code>^+?+S)

3. json 파일을 인터페이스로 변환합니다(windows: ctrl+alt+F , Mac: ^+?+F)

다운로드

위의 선물 이미지는 더 빠르게 재생될 수 있습니다. 관심 있는 학생들은 다운로드하여 사용할 수 있습니다. vscode 플러그인을 엽니다. 및 json to ts

를 검색하세요.

tools2: vscode-react-typescript-snippet

ts를 사용하여 react 코드 조각을 작성하세요.

다운로드

vscode 플러그인을 열고 vscode-react-typescript-snippet을 검색하세요.

지원 파일 h3>

• TypeScript(.ts)
• TypeScript React(.tsx)

코드 스니펫 li>

h3>ren→🎜

트리거	콘텐츠
tsrcc→	반응 클래스 구성요소
tsrcstate	Prop, State 및 생성자를 포함하는 클래스 구성 요소
tsrpcc→	react PureComponent
tsrpfc🎜	react 기능 구성 요소🎜 🎜
tsdrpfc🎜	기본 내보내기가 포함된 기능적 반응 구성 요소🎜🎜
tsrfc🎜	상태 비저장 기능적 반응 구성 요소🎜🎜
conc→🎜	반응 생성자 메서드🎜🎜
cwm→🎜	comComponentWillMount 메서드🎜🎜
렌더링 방법🎜🎜
cdm→ code >🎜<td> <code>comComponentDidMount 메소드🎜🎜
cwrp→🎜	comComponentWillReceiveProps 메소드 🎜 🎜
scu→🎜	shouldComponentUpdate 메소드🎜🎜
cwu→🎜	comComponentWillUpdate 메소드🎜🎜
cdu→🎜	comComponentDidUpdate 메소드 🎜🎜
cwum→🎜	comComponentWillUnmount 메소드🎜🎜
sst→🎜	this.setState가 생성🎜🎜
bnd→🎜 바인드 문🎜🎜
met→🎜	메서드 만들기🎜 🎜	tscredux→🎜	connect를 포함한 redux 클래스 생성🎜🎜
tsrfredux->🎜	연결을 포함한 기능적 redux 생성🎜🎜
imt 🎜	import 문 생성🎜🎜🎜🎜🎜상태 관련🎜🎜🎜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>; } } 🎜기능 관련🎜🎜🎜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 작성에 권장되는 두 가지 유용한 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!