Make your JavaScript Typed Safe
Tags: javascript, typescript, react, vscode
Published: 2022-01-10 09:10:28

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aisfym76bb941dlz02mp.png)

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

```json
{
  "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"
  ]
}
```
Next you need to create a folder call `.vscode` and add a file inside it call `settings.json`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm0wq2ya0qd8bbnopppc.png)

```json
{
    "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,
}

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fiojoxt0wta1yj29vwy.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p30v5dwhbnifvmeo6l5.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2unpi378sm3mva1f5ce.png)