Integración con TypeScript

Integración con TypeScript

Añadimos las dependencias:

npm install typescript ts-loader @types/react @types/react-dom @types/webpack

Cuando estamos trabajando con typescript, tenemos que agregar un archivo de su configuración llamado tsconfig.json:
tsconfig.json.

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "module": "es6",
        "jsx": "react",
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
	"moduleResolution": "node",
	"baseUrl": "./",
	"paths": {
		"@components": [
			"src/components/*"	
		],
	}
    }
}

y añadimos una nueva regla en webpack.config.dev.js:
Y después en webpack.config.js

{
	test: /\.tsx?$/,
	use: 'ts-loader',
	exclude: '/node_modules/',
},

Creamos en components > el archivo Title.tsx:

import React from 'react';

type TitleProps = {
    title: string,
}

const Title = ({ title }: TitleProps) => <span>{title}</span>;

export default Title;

Lo importamos en components/Header.jsx:

import Title from '@components/Title';

Y en la parte del logo, la agregamos:

      <Link to="/">
        <img src={logo} alt="logo" width="32" />
        <Title title="Platzi Store" />
      </Link>

IMPORTANTE: añadir en webpack.config.js y webpack.config.dev.js > resolve:
La extensión .tsx

    extensions: ['.tsx', '.js', '.jsx'],

y npm run build && npm run start para verificar