Razzle: टाइपस्क्रिप्ट में माइग्रेट करना

अरे, मुझे मौजूदा परियोजनाओं के प्रगतिशील प्रवास की अनुमति देने के लिए with-typescript उदाहरण को jsx फाइलों के साथ काम करने का प्रयास करने में कठिन समय का सामना करना पड़ रहा है।
क्या किसी के पास इस लक्ष्य को संग्रहीत करने का कोई विचार है?

ढ़ूँढ निकाला!

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

@babel/typescript को .babelrc . में जोड़ें

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

इसे razzle.config.js . में जोड़ें

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

एक 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",
    ]
}

बस, अब आप एक्सटेंशन का नाम बदलकर .ts और .tsx कर सकते हैं ताकि उन फाइलों के लिए टाइपस्क्रिप्ट को सक्षम किया जा सके।

यदि आप भविष्य से यहां आ रहे हैं, तो यहां शानदार रैज़ल-समर्थित टाइपस्क्रिप्ट प्लगइन चेकआउट करें ।