Skip to content

Instantly share code, notes, and snippets.

@dengue8830 dengue8830/typescript.json
Last active Nov 24, 2018

Embed
What would you like to do?
vscode snippets
{
"Crea nuevo modelo": {
"prefix": "snpNuevoModelo",
"body": [
"import { Errores } from './errores';",
"",
"export interface I${1:}Attrs {",
" id?: string;",
" ${2:};",
"}",
"",
"export class ${1:Modelo} implements I${1:}Attrs {",
" id?: string;",
"",
" constructor(raw: I${1:}Attrs) {",
" this.id = raw.id;",
" }",
"",
" static parseItem(raw: I${1:}Attrs): ${1:} {",
" if (!raw) {",
" throw new Error(Errores.Parse);",
" }",
" return new ${1:}(raw);",
" }",
"",
" static parseArray(raws: I${1:}Attrs[]): ${1:}[] {",
" if (!raws || !raws.length) {",
" return [];",
" }",
" return raws.map(raw => ${1:}.parseItem(raw));",
" }",
"}"
]
},
"Parsea un attr": {
"prefix": "snpParseAttr",
"body": [
"this.${1:attr} = raw.${1:};",
"${2:}"
],
"description": "Cuando estamos en el constructor, vamos parseando attrs del raw a la instancia."
}
}
{
// Docs: https://code.visualstudio.com/docs/editor/userdefinedsnippets
// Snippets: https://github.com/infeng/vscode-react-typescript/blob/master/snippets/snippets.json
"Componente react native completo para un screen": {
"prefix": "snpRNScreen",
"body": [
"import * as React from 'react';",
"import { RouteComponentProps } from 'react-router';",
"import { BackHandler } from 'react-native';",
"import { Container, Content } from 'native-base';",
"",
"interface IProps extends RouteComponentProps {",
"}",
"",
"interface IState {",
// No podemos saber la ruta relativa asi que le das ctrl+espacio y ya
" estadoCarga: EstadoCarga;",
"}",
"",
"export class ${1:}Screen extends React.Component<IProps, IState> {",
" constructor(props: IProps) {",
" super(props);",
"",
" this.state = {",
" estadoCarga: EstadoCarga.Exito,",
" }",
" }",
"",
"componentDidMount() {",
" BackHandler.addEventListener('hardwareBackPress', this.atras);",
"}",
"",
"componentWillUnmount() {",
" BackHandler.removeEventListener('hardwareBackPress', this.atras);",
"}",
"",
"atras() {",
"",
" return true;",
"}",
"",
" public render() {",
" return (",
" <Container style={{ backgroundColor: '#f8f8f8' }}>",
" <Content>",
" {",
" this.state.estadoCarga === EstadoCarga.Cargando &&",
" <CartelCargando />",
" }",
" {",
" this.state.estadoCarga === EstadoCarga.Exito &&",
" <Content />${2:}",
" }",
" </Content>",
" </Container>",
" );",
" }",
"}",
""
],
"description": "Crea un componente react native con todo lo que un screen comprende"
},
"Componente funcional archivo compartido": {
"prefix": "snpFuncionalArchivoCompartido",
"body": [
"interface I${1:}Props {",
"",
"}",
"",
"export const ${1:App} = (props: I${1:}Props) =>",
" $0;",
""
],
"description": "Crea un componente funcional suponiendo nombres porque no puede chocar con otros"
},
"Componente funcional archivo propio": {
"prefix": "snpFuncionalArchivoPropio",
"body": [
"import * as React from 'react';",
"",
"interface IProps {",
"",
"}",
"",
"export const ${1:Name} = (props: IProps) =>",
" $0;",
""
],
"description": "Crea un componente funcional sin suponer nombres porque puede chocar con otros"
},
"constructor": {
"prefix": "snpConstructor",
"body": [
"constructor(props) {",
" super(props);",
" ${1:}",
"}"
],
"description": "Add a constructor in class."
},
"componentWillMount": {
"prefix": "snpComponentWillMount",
"body": [
"componentWillMount() {",
" ${1:}",
"}"
],
"description": "Invoked immediately before mounting occurs. It is called before render()."
},
"componentDidMount": {
"prefix": "snpComponentDidMount",
"body": [
"componentDidMount() {",
" ${1:}",
"}"
],
"description": "Invoked immediately after a component is mounted."
},
"componentWillReceiveProps": {
"prefix": "snpComponentWillReceiveProps",
"body": [
"componentWillReceiveProps(nextProps: ${1:}) {",
" ${2:}",
"}"
],
"description": "Invoked before a mounted component receives new props."
},
"shouldComponentUpdate": {
"prefix": "snpShouldComponentUpdate",
"body": [
"shouldComponentUpdate(nextProps: ${1:}, nextState) {",
" ${2:}",
"}"
],
"description": "Invoked before rendering when new props or state are being received."
},
"componentWillUpdate": {
"prefix": "snpComponentWillUpdate",
"body": [
"componentWillUpdate(nextProps: ${1:}, nextState) {",
" ${2:}",
"}"
],
"description": "Invoked immediately before rendering when new props or state are being received."
},
"componentDidUpdate": {
"prefix": "snpComponentDidUpdate",
"body": [
"componentDidUpdate(prevProps: ${1:}, prevState) {",
" ${2:}",
"}"
],
"description": "Invoked immediately after updating occurs. This method is not called for the initial render"
},
"componentWillUnmount": {
"prefix": "snpComponentWillUnmount",
"body": [
"componentWillUnmount() {",
" ${1:}",
"}"
],
"description": "Invoked immediately before a component is unmounted and destroyed"
},
"componentSetState": {
"prefix": "snpSetState",
"body": [
"this.setState({ ${1:} });"
]
},
"bind method": {
"prefix": "snpBind",
"body": [
"this.${1:} = this.${1:}.bind(this);"
],
"description": "Bind de un metodo"
},
"method": {
"prefix": "snpMetodo",
"body": [
"${1:methodName} = (${2:e}) => {",
" ${3:}",
"}"
],
"description": "Crea un metodo de clase"
},
"import": {
"prefix": "snpImport",
"body": [
"import { $2 } from '$1';"
],
"description": "Crea un import"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.