Aqui dejo el link original que esta en ingles --> link
[ES]
BIBLIOGRAFÍA:
MECANOGRAFIADO
En primer lugar, necesitamos instalar TypeScript en nuestro proyecto, este paquete contiene la API de la biblioteca de idiomas:
`` jsx
hilo añadir mecanografiado -D
o
npm i mecanografiado --save-dev
’’
** CONFIGURACIÓN TYPESCRIPT **
Necesita un archivo de configuración para guiar el tipo de TypeScript. Acerca del archivo de configuración y su significado aquí.
En la raíz de su proyecto, cree el siguiente archivo: ** tsconfig.json **
‘’
{
“compilerOptions”: {
“sourceMap”: verdadero,
“noImplicitAny”: falso,
“módulo”: “commonjs”,
“target”: “es5”,
“lib”: [
“esnext”,
“dom”,
“dom.iterable”
],
“removeComments”: verdadero,
“allowSyntheticDefaultImports”: verdadero,
“jsx”: “reaccionar”,
“allowJs”: verdadero,
“baseUrl”: “./”,
“esModuleInterop”: verdadero,
“resolveJsonModule”: verdadero,
“moduleResolution”: “nodo”,
“downlevelIteration”: verdadero,
“caminos”: {
“componentes / *”: [
“src / components / *”
]
}
},
“incluir”: [
"./src",
"./webpack.config.ts"
]
}
’’
** REACT Y SUS PAQUETES TYPESCRIPT **
Ahora instalemos la biblioteca de reacción, su API y el paquete DOM para que podamos renderizar en dom. Pero reaccionar comprende Javascript, por lo que también necesitamos paquetes adicionales para que comprenda TypeScript:
`` jsx
hilo añadir reaccionar reaccionar-dom
hilo agregar @ tipos / react @ tipos / react-dom -D
o
npm reacciono react-dom --save
npm i @ tipos / react @ tipos / react-dom --save-dev
’’
** CARPETAS BÁSICAS **
Finalmente, cree una estructura básica para su aplicación. Este paquete incluye un ** index.html ** dentro de una carpeta ./public desde la raíz; un ** index.tsx ** y ** App.tsx ** en la carpeta ./src desde la raíz; y un componente como ** HelloWorld.tsx ** en ./src/components desde la raíz. Entonces, puede que index.js renderice App.tsx que renderizará el componente HelloWolrd. Pero necesitamos un paquete, así que aquí viene Webpack.
`` jsx
hilo agregar paquete web paquete web-cli paquete web-dev-servidor ts-nodo @ tipos / nodo
@ tipos / paquete web @ tipos / paquete web-dev-servidor tsconfig-rutas-paquete-web-plugin -D
o
npm i paquete web paquete web-cli paquete web-dev-servidor ts-nodo @ tipos / nodo
@ tipos / paquete web @ tipos / paquete web-dev-servidor tsconfig-rutas-paquete-web-plugin --save-dev.
’’
`` jsx
hilo agregar ts-loader fork-ts-checker-webpack-plugin html-webpack-plugin -D
o
npm i ts-loader fork-ts-checker-webpack-plugin html-webpack-plugin --save-dev
’’
** WEBPACK.CONFIG.JS **
Ahora gracias a ** webpack-cli ** cuentas con una interfaz para establecer la configuración que desees. La plantilla que obtuve es esta: * Complemento definido por Webpack, podemos configurar y acceder a las variables de entorno dentro de nuestra aplicación (es decir, verificar si estamos en modo de desarrollo o producción, imprimir la etiqueta de la versión) *
`` jsx
importar ruta de “ruta”;
importar paquete web, {Configuración} de “paquete web”;
importar HtmlWebpackPlugin desde “html-webpack-plugin”;
importar ForkTsCheckerWebpackPlugin desde “fork-ts-checker-webpack-plugin”;
importar {TsconfigPathsPlugin} desde “tsconfig-path-webpack-plugin”;
const webpackConfig = (env): Configuración => ({
entrada: “./src/index.tsx”,
resolver: {
extensiones: [".ts", “.tsx”, “.js”],
complementos: [nuevo TsconfigPathsPlugin ()]
},
salida: {
ruta: ruta.join (__ dirname, “/ dist”),
nombre de archivo: “build.js”
},
módulo: {
reglas: [
{
prueba: /.tsx?$/,
cargador: “ts-loader”,
opciones: {
transpileOnly: verdadero
},
excluir: / dist /
}
]
},
complementos: [
new HtmlWebpackPlugin ({
plantilla: “./public/index.html”
}),
nuevo webpack.DefinePlugin ({
“process.env.PRODUCTION”: env.production || ! env. desarrollo,
“process.env.NAME”: JSON.stringify (require ("./ package.json"). name),
“process.env.VERSION”: JSON.stringify (require ("./ package.json"). versión)
}),
new ForkTsCheckerWebpackPlugin ({
eslint: {
files: “./src/**/*.{ts,tsx,js,jsx}” // requerido - igual que el comando eslint ./src/**/*.{ts,tsx,js,jsx} - -ext .ts, .tsx, .js, .jsx
}
})
]
});
exportar webpackConfig predeterminado;
’’
** PAQUETE.JASON **
`` jsx
"guiones": {
“dev”: “webpack-dev-server --mode development --env.development --open --hot --progress”,
“build”: “webpack --mode production --env.production --progress”,
“lint”: “eslint ‘./src//*.{ts,tsx}’",
“lint: fix”: "eslint './src//*.{ts,tsx}’ --fix”
},
’’
`` jsx
hilo add @ babel / core babel-loader @ babel / preset-react @ babel / preset-typescript
@ babel / preset-env @ babel / plugin-propuesta-clase-propiedades
@ babel / plugin-propuesta-objeto-resto-propagación --save-dev
’’
**. BABELRC.JSON **
`` jsx
{
“Preajustes”: [
"@ babel / preset-env",
"@ babel / preset-typescript",
"@ babel / preset-react"
],
“complementos”: [
"@ babel / propuesta-clase-propiedades",
"@ babel / propuesta-objeto-descanso-propagación"
]
}
’’
** TSCONFIG.JSON **
`` jsx
"compilerOptions": {
// Asegúrese de que tsc cree los archivos .d.ts, pero no los archivos .js
"declaración": verdadero,
“emitDeclarationOnly”: verdadero,
// Asegúrese de que Babel pueda transpilar archivos de forma segura en el proyecto TypeScript
"isolatedModules": verdadero
}
’’
‘‘
hilo añadir más bonito -D
o
npm yo más bonito --save-dev
’’
‘’
{
“printWidth”: 100,
“trailingComma”: “ninguno”,
“tabWidth”: 4,
“semi”: cierto,
“singleQuote”: falso,
“bracketSpacing”: falso,
“jsxBracketSameLine”: falso,
“arrowParens”: “siempre”,
“endOfLine”: “auto”,
“jsxSingleQuote”: falso,
“proseWrap”: “preservar”,
“quoteProps”: “según sea necesario”,
“useTabs”: falso,
“htmlWhitespaceSensitivity”: “css”
}
’’
Además, recomiendo configurar Prettier para que ** se ejecute en cada guardado **. Ver: https://prettier.io/docs/en/editors.html
‘‘
yarn agregar eslint eslint-plugin-react eslint-plugin-react-hooks @ typescript-eslint / eslint-plugin @ typescript-eslint / parser eslint-plugin-más bonito eslint-config-más bonito eslint-plugin-import -D
o
npm i eslint eslint-plugin-react eslint-plugin-react-hooks @ typescript-eslint / eslint-plugin @ typescript-eslint / parser eslint-plugin-prettier eslint-config-prettier eslint-plugin-import --save-dev
’’
‘’
{
“parser”: “@ typecript-eslint / parser”,
“complementos”: [
"@ mecanografiado-eslint",
“reaccionar”,
“react-hooks”,
“eslint-plugin-import”,
“más bonita”
],
“env”: {
“navegador”: verdadero
},
“extiende”: [
“complemento: @ typescript-eslint / recommended”,
“complemento: reaccionar / recomendado”,
“complemento: más bonito / recomendado”
],
“parserOptions”: {
“proyecto”: [
“tsconfig.json”
],
“ecmaVersion”: 2020,
“sourceType”: “módulo”,
“ecmaFeatures”: {
“jsx”: verdadero
}
},
“reglas”: {
"@ typecript-eslint / explicit-function-return-type": “desactivado”,
"@ typecript-eslint / no-unused-vars": “desactivado”,
“react / jsx-filename-extension”: [
“advertir”,
{
“extensiones”: [
".jsx",
".tsx"
]
}
],
“react / prop-types”: “desactivado”,
“react-hooks / rules-of-hooks”: “error”,
“react-hooks / exhaustive-deps”: “advertir”
},
“configuración”: {
“reaccionar”: {
“versión”: “detectar”
}
}
}
’’
‘‘
webpack.config.ts
’’
Hola tendrás el repositorios del ejemplo que estas mostrando?