大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了两个vscode中编写typescript的好用插件有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联自2013年创立以来,是专业互联网技术服务公司,拥有项目成都做网站、网站制作、成都外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元明水做网站,已为上家服务,为明水各地企业和个人服务,联系电话:028-86922220
由于项目组最近准备从javascript
迁移到typescript
;在使用ts过程中有部分类型定义
及代码片段
有重复;所以编写了两个vscode
插件;如有需要可以查阅。【推荐:vscode基础教程】
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
使用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语句 |
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 ; } }
tsrfc
import * as React from "react"; interface IAppProps {} const App: React.FC= (props) => { return ; }; export default App;
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);
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);
tsrpfc
import * as React from "react"; export interface IAppProps {} export function App(props: IAppProps) { return ; }
感谢你能够认真阅读完这篇文章,希望小编分享的“两个vscode中编写typescript的好用插件有哪些”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!