찾다

집 >개발 도구 >VSCode >vscode에서 TypeScript 작성에 권장되는 두 가지 유용한 플러그인

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

青灯夜游
青灯夜游앞으로
2020-09-04 10:19:046200검색

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

최근 프로젝트 팀이 javascript에서 typescript로 마이그레이션을 준비하고 있으므로 여기에는 몇 가지 유형 정의 및 코드가 있습니다. ts 조각을 사용하는 프로세스가 중복되므로 두 개의 vscodejavascript迁移到typescript；在使用ts过程中有部分类型定义及代码片段有重复；所以编写了两个vscode插件；如有需要可以查阅。【推荐：vscode基础教程】

tools1: JSON转换成typescript的interface

特色

1、从剪切板json数据转换成interface  (windows: ctrl+alt+C , Mac : ^+?+C)

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

2、选择json数据转换成interface (windows: ctrl+alt+S , Mac : ^+?+S)

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

3、将json文件转换成interface   (windows: ctrl+alt+F , Mac : ^+?+F)

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

下载

上面的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)

代码片段

]

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 기본 튜토리얼

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

2. 인터페이스로 변환할 json 데이터를 선택하세요(windows: ctrl+alt+S , 맥: <code>^+?+S)vscode에서 TypeScript 작성에 권장되는 두 가지 유용한 플러그인

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

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

다운로드

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

vscode에서 TypeScript 작성에 권장되는 두 가지 유용한 플러그인를 검색하세요.

tools2: vscode-react-typescript-snippet

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

다운로드

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

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

지원 파일 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명：
    이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
    이전 기사：VSCode에서 10가지 멋진 조명 테마 추천다음 기사：VSCode에서 10가지 멋진 조명 테마 추천

    관련 기사

    더보기