DEV Community

Ernesto Jara Olveda
Ernesto Jara Olveda

Posted on

Make your JavaScript Typed Safe

We are going to make our JavaScript files typed safe, that your JS files will feel like if they were typescript. this can be done for any JavaScript project, but we will focus on react.

I have a create-react-app project. let's add a jsconfig.json file in the root of the project

Image description

a jsconfig.json file is a tsconfig.json with the allowJs and the checkJs as true.

{
  "compilerOptions": {
    "incremental": true,
    "target": "es2020",
    "composite": true,
    "module": "ESNext",
    "lib": [
      "DOM",
      "esnext",
      "ES2015",
      "ES2016",
      "ES2017",
      "ES2018",
      "ES2019"
    ],
    "allowJs": true,
    "checkJs": true,
    "jsx": "preserve",
    "declaration": true,
    "reactNamespace": "React",
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "typings",
    "rootDir": ".",
    "tsBuildInfoFile": "./tsBuildInfoFile.json",
    "isolatedModules": true,
    "moduleResolution": "node",
    "baseUrl": "./node_modules",
    "importHelpers": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "assumeChangesOnlyAffectDirectDependencies": true,
    "allowUnusedLabels": false,
    "paths": {
      "*": [
        "./*",
        "./@types/*"
      ]
    },
    "types": [
      "node",
      "react"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "traceResolution": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true,
    "pretty": true
  },
  "typeAcquisition": {
    "enable": true
  },
  "exclude": [
    "node_modules",
  ],
  "include": [
    "src",
    "type"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Next you need to create a folder call .vscode and add a file inside it call settings.json

Image description

{
    "javascript.suggestionActions.enabled": true,
  "javascript.inlayHints.parameterNames": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.autoClosingTags": true,
  "javascript.format.enable": true,
  "javascript.format.insertSpaceAfterCommaDelimiter": true,
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "javascript.format.semicolons": "insert",
  "javascript.format.quoteStyle": "double",
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
  "javascript.preferences.importModuleSpecifier": "shortest",
  "javascript.preferences.importModuleSpecifierEnding": "auto",
  "javascript.preferences.jsxAttributeCompletionStyle": "auto",
  "javascript.preferences.quoteStyle": "double",
  "javascript.preferences.useAliasesForRenames": true,
  "javascript.referencesCodeLens.enabled": true,
  "javascript.suggest.completeJSDocs": true,
}

Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Discussion (0)