Razzle: Disable type checking when using typescript

[rolandleth]

Hello!

Is there any way to use typescript with razzle, but without all the type checking?

transpileOnly = true by default and I tried setting forkTsChecker.typeCheck = false, but type checking still fires.

I found I can silence the logger, but is there any way to disable checking altogether? I'm using VSCode, which does that already.

Thank you!

[nimaa77]

maybe babel-typescript can help you?

[rolandleth]

Sadly, I just started learning web development, which is one of the reasons I started using razzle: the ease of use and low barrier entry. I don't really know how to use babel and it still feels scary 🙈

Thanks for the suggestion, though! When I'll take it in my own hands, I'll know how to add typescript now 😀

[nimaa77]

it takes only 2 minutes to setup typescript with babel.
if you using razzle just create _.babelrc_ file next to the package.json (in your project root) and put this inside it:

{
    "presets": ["razzle/babel", "@babel/typescript"],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

next, you have to setup webpack with "ts" and "tsx" file extensions. so create a _razzle.config.js_ next to the package.json (in your project root) and put this inside it:

module.exports = {
    modify(defaultConfig, { target, dev }, webpack) {
        const config = defaultConfig // stay immutable here
        config.resolve.extensions.push(".ts", ".tsx")
        config.module.rules.push({
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            loader: "babel-loader",
        })
        return config
    },
}

and finally install dependecies:

yarn add -D @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

or

npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

more info at: TypeScript Babel

[revskill10]

What's the advantage of typescript/babel comparing to tsc ?
What about tsconfig.json if we're using typescript/babel ?

[nimaa77]

What's the advantage of typescript/babel comparing to tsc?

1. One of the biggest advantages is the configuration. there is no need to change the configuration of jest, storybooks, and others.
2. You can use Babel plugins.
3. It's super fast.

What about tsconfig.json if we're using typescript/babel?

you must create _tsconfig.json_ file in the root of your project.

for type cheking, you can install typescript like this:

yarn add -D typescript

then add a new command to package.json file:

"type-check": "tsc --watch"

and finally

yarn type-check

also, you can install @typescript-eslint/parser for linting typescript using eslint.

[mAAdhaTTah]

@nimaa77 Add the --noEmit flag to the command or the tsconfig.json or tsc will compile the files for you.

[nimaa77]

@mAAdhaTTah I did that in tsconfig.json file. this my configuration

{
    "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "react",
    "noResolve": false,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
        "*": ["types/*"],
        "@components/*": ["components/*"],
        "@media/*": ["media/*"],
        "@images/*": ["media/images/*"],
        "@views/*": ["views/*"],
        "@reducers/*": ["reducers/*"],
        "@reducers": ["reducers"],
        "@utils": ["utils"],
        "@utils/*": ["utils/*"],
        "@client/*": ["client/*"]
    },
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowJs": true,
    "allowUnreachableCode": false,
    "downlevelIteration": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "pretty": true,
    "suppressImplicitAnyIndexErrors": true
    },
    "include": ["src", "stories"],
    "rootDirs": ["src"]
}

[mAAdhaTTah]

@nimaa77 No worries just wanted to make sure no innocent bystanders were harmed :D

[rolandleth]

Webpack is also still scary 😅

This is a lot of great info, I will try to implement it and see how it goes. Thanks a bunch @nimaa77!

I still think being able to disable it directly from razzle would be a nice addition, which would go hand in hand with its motto of Create server-rendered universal JavaScript applications with no configuration 😁

Edit: got it working, thanks again! Small dilemma: My project still works even if I leave out these 2, although I do make use of them 🤔

"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"

Edit 2: With these settings, the compilation takes an extra second (1.5 vs 2.5) 🤔

[nimaa77]

good point.
maybe we disable some babel plugins when we use typescript so we get faster builds

[AtlasRW]

Depends of your code.
e.g. if you use TypeScript decorators you'll need @babel/plugin-proposal-decorators, along with other little tweaks like this, but you'll probably rarely need those.

[nimaa77]

I think this issue is fixed, closing now

fill free to re-open if I'm wrong