Make your JavaScript Typed Safe
source link: https://dev.to/enetojara/make-your-javascript-typed-safe-4l3e
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
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"
]
}
Next you need to create a folder call .vscode
and add a file inside it call settings.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,
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK