Para configurar cada proyecto
Cuando crees un proyecto de react que vivirá en el mundo de vtex, por favor basa tu proyecto en hello-react-ts y además sigue las siguientes recomendaciones:
-
Cambiar
tsconfig
del proyecto por el dehello-react-ts
. -
Agregar
tsconfig-types
(esta enhello-react-ts
). -
Crear
index.ts
en raíz react (solo si otros proyectos aun no llaman ese index). -
Agregar index.ts en el
vtexigniore
(solo si otros proyectos aun no llaman ese index).
*CUIDADO* react/index.ts *CUIDADO*
react/tsconfig-types.json
react/__mocks__
react/__tests__
react/tslint
react/sonar-project.properties
-
Agregar carpeta de types generada (se debe llamar igual al proyecto y se encuentra en la raíz de /react) al
gitignore
. -
Agregar
.prettierrc
,tslint.json
, librería para validar regla hooks (todos estos archivos se encuentran enhello-react-ts
)
yarn add tslint-react-hooks
- Corregir carpeta typings, borrar cosas innecesarias y tratar de llevar el siguiente formato:
typings:
│
│ files.d.ts
│ index.d.ts
│ global.d.ts (solo si vas usar declare global)
│
├───libs
│ index.d.ts
│ react-select.d.ts (crear archivos por librería, si hay más de un tipo de dicha librería, sino todo ponerlo en index.d.ts)
│
└───vtex
index.d.ts
vtex.store-components.d.ts (crear archivos por componente, si hay más de un tipo de dicho componente, sino todo ponerlo en index.d.ts)
Para trabajar en la carpeta typings
Por favor seguir las siguientes reglas:
-
Hay 2 carpetas propuestas libs y vtex y la raíz (podrían ser más pero con argumentos).
-
La carpeta
libs
esta destinada a todos aquellos types relacionado con librerías de terceros que no cuenten con types, la mayor parte dichas librerías ya cuenta con sus propios types en el repositorio original o en el repositorio DefinitelyTyped en github. -
En
libs/index.d.ts
colocar solodeclare module 'nombre-de-tu-librería';
si quieres ser más especifico y definir más types de una librería como por ejemplo algo como esto:declare module 'react-select/lib/components/containers';En este caso es valido crear un nuevo archivo dentro de la carpeta
libs
con el nombre de tu librería, en el caso del ejemplo anterior crearlibs/react-select.d.ts
. -
La carpeta
vtex
esta destinada a todos los types relacionados con los proyectos de vtex, la mayoría se encuentran en vtex-apps githubvtex-apps y en vtex github. -
La idea es que en la carpeta vtex agreguemos solo los types de proyectos que no se encuentren ya tipados en este repositorio, como por ejemplo el proyecto
vtex.render-runtime
el cual se debe definir manualmente envtex/index.d.ts
comodeclare module 'vtex.render-runtime';
ya que este es bastante complicado generarle types automáticamente. -
Aplicar la regla #3 igualmente para el archivo
vtex/index.d.ts
.
-
Realizar link en vtex del proyecto y corregir errores.
-
Agregar script al package.json (yarn get-types) y ejecutarlo.
"get-types": "rm -rf exito.${nombre proyecto} && tsc -p tsconfig-types.json --outDir exito.${nombre proyecto}"
-
Documentar cambios en
manifest
yCHANGELOG
. -
Instalar librería de tipos.
yarn add -D types-exito