Razzle: Migrando para Typescript

Criado em 14 abr. 2019 · 3Comentários · Fonte: jaredpalmer/razzle

Tenho um grande projeto e desejo começar a migrar para o Typescript, um componente de cada vez.

Eu tentei --with-typescript, mas isso requer que eu renomeie todos os arquivos de uma vez. Eu gostaria de converter lentamente, garantindo que os arquivos não convertidos mantenham sua extensão inicial enquanto os novos arquivos adotam extensões de arquivo typescript.

Como faço para fazer isso no Razzle?

Fonte

krazyjakee

👍5

Comentários muito úteis

Descobri isso!

npm i -D @babel/preset-typescript ts-loader typescript

Adicione @babel/typescript a .babelrc

"presets": [
    "razzle/babel",
    "@babel/typescript"
]

Adicione isso a razzle.config.js

config.resolve.extensions = config.resolve.extensions.concat(['.ts', '.tsx']);
config.module.rules.push({ test: /\.tsx?$/, loader: 'ts-loader' });

Crie um tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        // Target latest version of ECMAScript.
        "target": "esnext",
        // Search under node_modules for non-relative imports.
        "moduleResolution": "node",
        // Process & infer types from .js files.
        "allowJs": false,
        // Enable strictest settings like strictNullChecks & noImplicitAny.
        "strict": false,
        // Disallow features that require cross-file information for emit.
        "isolatedModules": true,
        // Import non-ES modules as default imports.
        "esModuleInterop": true,
        "jsx": "react"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
    ]
}

É isso, agora você pode renomear as extensões para .ts e .tsx para habilitar a digitação para esses arquivos.

krazyjakee em 24 abr. 2019

👍3

Todos 3 comentários

Ei, também estou passando por um momento difícil tentando fazer o exemplo with-typescript funcionar com jsx arquivos para permitir a migração progressiva de projetos existentes.
Alguém tem ideia de como arquivar esse gol?

frosato-dev em 19 abr. 2019