{"componentChunkName":"component---src-templates-documentation-tsx","path":"/docs/handbook/intro-to-js-ts.html","result":{"data":{"allSitePage":{"nodes":[{"path":"/dev-404-page/"},{"path":"/docs/handbook/nightly-builds.html"},{"path":"/docs/handbook/declaration-files/by-example.html"},{"path":"/docs/handbook/declaration-files/consumption.html"},{"path":"/docs/handbook/declaration-files/deep-dive.html"},{"path":"/docs/handbook/declaration-files/do-s-and-don-ts.html"},{"path":"/docs/handbook/declaration-files/introduction.html"},{"path":"/docs/handbook/declaration-files/library-structures.html"},{"path":"/docs/handbook/declaration-files/publishing.html"},{"path":"/docs/handbook/declaration-files/templates.html"},{"path":"/docs/handbook/typescript-in-5-minutes-func.html"},{"path":"/docs/handbook/typescript-in-5-minutes.html"},{"path":"/docs/handbook/typescript-in-5-minutes-oop.html"},{"path":"/docs/handbook/typescript-from-scratch.html"},{"path":"/docs/handbook/basic-types.html"},{"path":"/docs/handbook/classes.html"},{"path":"/docs/handbook/enums.html"},{"path":"/docs/handbook/functions.html"},{"path":"/docs/handbook/generics.html"},{"path":"/docs/handbook/interfaces.html"},{"path":"/docs/handbook/literal-types.html"},{"path":"/docs/handbook/intro.html"},{"path":"/docs/handbook/unions-and-intersections.html"},{"path":"/docs/handbook/declaration-files/dts-from-js.html"},{"path":"/docs/handbook/intro-to-js-ts.html"},{"path":"/docs/handbook/jsdoc-supported-types.html"},{"path":"/docs/handbook/type-checking-javascript-files.html"},{"path":"/docs/handbook/compiler-options-in-msbuild.html"},{"path":"/docs/handbook/compiler-options.html"},{"path":"/docs/handbook/configuring-watch.html"},{"path":"/docs/handbook/integrating-with-build-tools.html"},{"path":"/docs/handbook/project-references.html"},{"path":"/docs/handbook/tsconfig-json.html"},{"path":"/docs/handbook/advanced-types.html"},{"path":"/docs/handbook/declaration-merging.html"},{"path":"/docs/handbook/decorators.html"},{"path":"/docs/handbook/iterators-and-generators.html"},{"path":"/docs/handbook/jsx.html"},{"path":"/docs/handbook/mixins.html"},{"path":"/docs/handbook/module-resolution.html"},{"path":"/docs/handbook/modules.html"},{"path":"/docs/handbook/namespaces-and-modules.html"},{"path":"/docs/handbook/namespaces.html"},{"path":"/docs/handbook/symbols.html"},{"path":"/docs/handbook/triple-slash-directives.html"},{"path":"/docs/handbook/type-compatibility.html"},{"path":"/docs/handbook/type-inference.html"},{"path":"/docs/handbook/utility-types.html"},{"path":"/docs/handbook/variable-declarations.html"},{"path":"/docs/handbook/release-notes/typescript-1-1.html"},{"path":"/docs/handbook/release-notes/typescript-1-3.html"},{"path":"/docs/handbook/release-notes/typescript-1-4.html"},{"path":"/docs/handbook/release-notes/typescript-1-5.html"},{"path":"/docs/handbook/release-notes/typescript-1-6.html"},{"path":"/docs/handbook/release-notes/typescript-1-7.html"},{"path":"/docs/handbook/release-notes/typescript-1-8.html"},{"path":"/docs/handbook/release-notes/typescript-2-0.html"},{"path":"/docs/handbook/release-notes/typescript-2-1.html"},{"path":"/docs/handbook/release-notes/typescript-2-2.html"},{"path":"/docs/handbook/release-notes/typescript-2-3.html"},{"path":"/docs/handbook/release-notes/typescript-2-4.html"},{"path":"/docs/handbook/release-notes/typescript-2-5.html"},{"path":"/docs/handbook/release-notes/typescript-2-6.html"},{"path":"/docs/handbook/release-notes/typescript-2-7.html"},{"path":"/docs/handbook/release-notes/typescript-2-8.html"},{"path":"/docs/handbook/release-notes/typescript-2-9.html"},{"path":"/docs/handbook/release-notes/typescript-3-0.html"},{"path":"/docs/handbook/release-notes/typescript-3-1.html"},{"path":"/docs/handbook/release-notes/typescript-3-2.html"},{"path":"/docs/handbook/release-notes/typescript-3-3.html"},{"path":"/docs/handbook/release-notes/typescript-3-4.html"},{"path":"/docs/handbook/release-notes/typescript-3-5.html"},{"path":"/docs/handbook/release-notes/typescript-3-6.html"},{"path":"/docs/handbook/release-notes/typescript-3-7.html"},{"path":"/docs/handbook/release-notes/typescript-3-8.html"},{"path":"/docs/handbook/release-notes/typescript-3-9.html"},{"path":"/docs/handbook/asp-net-core.html"},{"path":"/docs/handbook/angular.html"},{"path":"/docs/handbook/babel-with-typescript.html"},{"path":"/docs/handbook/dom-manipulation.html"},{"path":"/docs/handbook/gulp.html"},{"path":"/docs/handbook/migrating-from-javascript.html"},{"path":"/docs/handbook/react.html"},{"path":"/docs/handbook/typescript-tooling-in-5-minutes.html"},{"path":"/vo/docs/handbook/basic-types.html"},{"path":"/docs/handbook/declaration-files/templates/global-modifying-module-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/global-plugin-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/global-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-class-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-function-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-plugin-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-d-ts.html"},{"path":"/docs/handbook/release-notes/overview.html"},{"path":"/tsconfig"},{"path":"/en/tsconfig"},{"path":"/vo/tsconfig"},{"path":"/ja/tsconfig"},{"path":"/pt/tsconfig"},{"path":"/play"},{"path":"/en/play"},{"path":"/es/play"},{"path":"/ja/play"},{"path":"/pt/play"},{"path":"/vo/play"},{"path":"/zh/play"},{"path":"/fa/play"},{"path":"/play/3-7/fixits/big-number-literals.ts"},{"path":"/play/3-7/fixits/const-to-let.ts"},{"path":"/play/3-7/fixits/infer-from-usage-changes.ts"},{"path":"/play/3-7/syntax-and-messaging/flattened-error-reporting.ts"},{"path":"/play/3-7/syntax-and-messaging/nullish-coalescing.ts"},{"path":"/play/3-7/syntax-and-messaging/optional-chaining.ts"},{"path":"/play/3-7/types-and-code-flow/assertion-functions.ts"},{"path":"/play/3-7/types-and-code-flow/recursive-type-references.ts"},{"path":"/play/3-7/types-and-code-flow/uncalled-function-checks.ts"},{"path":"/play/3-8/breaking-changes/checking-unions-with-index-signatures.ts"},{"path":"/play/3-8/jsdoc-improvements/accessibility-modifiers.js"},{"path":"/play/3-8/syntax-and-messaging/export-modules-from.ts"},{"path":"/play/3-8/syntax-and-messaging/private-class-fields.ts"},{"path":"/play/4-0/new-checks/class-constructor-code-flow.ts"},{"path":"/play/4-0/new-js-features/jsdoc-deprecated.ts"},{"path":"/play/4-0/new-js-features/logical-operators-and-assignment.ts"},{"path":"/play/4-0/new-js-features/nullish-coalescing.ts"},{"path":"/play/4-0/new-ts-features/named-tuples.ts"},{"path":"/play/4-0/new-ts-features/unknown-in-catch.ts"},{"path":"/play/4-0/new-ts-features/variadic-tuples.ts"},{"path":"/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/play/javascript/external-apis/typescript-with-node.js"},{"path":"/play/javascript/external-apis/typescript-with-web.js"},{"path":"/play/javascript/external-apis/typescript-with-webgl.js"},{"path":"/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/play/javascript/functions-with-javascript/typing-functions.ts"},{"path":"/play/javascript/helping-with-javascript/errors.ts"},{"path":"/play/javascript/helping-with-javascript/quick-fixes.ts"},{"path":"/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/play/javascript/javascript-essentials/functions.ts"},{"path":"/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/play/javascript/modern-javascript/async-await.ts"},{"path":"/play/javascript/modern-javascript/immutability.ts"},{"path":"/play/javascript/modern-javascript/import-export.ts"},{"path":"/play/javascript/modern-javascript/jsdoc-support.js"},{"path":"/play/javascript/working-with-classes/classes-101.ts"},{"path":"/play/javascript/working-with-classes/generic-classes.ts"},{"path":"/play/javascript/working-with-classes/mixins.ts"},{"path":"/play/javascript/working-with-classes/this.ts"},{"path":"/play/playground/config/javascript-playgrounds.js"},{"path":"/play/playground/config/new-compiler-defaults.ts"},{"path":"/play/playground/language/automatic-type-acquisition.ts"},{"path":"/play/playground/language/fixits.ts"},{"path":"/play/playground/tooling/mobile-support.ts"},{"path":"/play/playground/tooling/sharable-urls.ts"},{"path":"/play/playground/tooling/typescript-versions.ts"},{"path":"/play/typescript/language/soundness.ts"},{"path":"/play/typescript/language/structural-typing.ts"},{"path":"/play/typescript/language/type-guards.ts"},{"path":"/play/typescript/language/type-widening-and-narrowing.ts"},{"path":"/play/typescript/language-extensions/enums.ts"},{"path":"/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/play/typescript/meta-types/conditional-types.ts"},{"path":"/play/typescript/meta-types/discriminate-types.ts"},{"path":"/play/typescript/meta-types/indexed-types.ts"},{"path":"/play/typescript/meta-types/mapped-types.ts"},{"path":"/play/typescript/primitives/any.ts"},{"path":"/play/typescript/primitives/literals.ts"},{"path":"/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/play/typescript/primitives/unknown-and-never.ts"},{"path":"/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/play/typescript/type-primitives/nullable-types.ts"},{"path":"/play/typescript/type-primitives/tuples.ts"},{"path":"/es/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/es/play/javascript/external-apis/typescript-with-node.js"},{"path":"/es/play/javascript/external-apis/typescript-with-web.js"},{"path":"/es/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/es/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/es/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/es/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/es/play/typescript/language/soundness.ts"},{"path":"/es/play/typescript/language/structural-typing.ts"},{"path":"/es/play/typescript/language/type-guards.ts"},{"path":"/es/play/typescript/language/type-widening-and-narrowing.ts"},{"path":"/es/play/typescript/meta-types/conditional-types.ts"},{"path":"/es/play/typescript/meta-types/discriminate-types.ts"},{"path":"/es/play/typescript/meta-types/indexed-types.ts"},{"path":"/es/play/typescript/meta-types/mapped-types.ts"},{"path":"/es/play/typescript/primitives/any.ts"},{"path":"/es/play/typescript/primitives/literals.ts"},{"path":"/es/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/es/play/typescript/primitives/unknown-and-never.ts"},{"path":"/es/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/es/play/typescript/type-primitives/nullable-types.ts"},{"path":"/es/play/typescript/type-primitives/tuples.ts"},{"path":"/fa/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/ja/play/3-7/fixits/big-number-literals.ts"},{"path":"/ja/play/3-7/syntax-and-messaging/nullish-coalescing.ts"},{"path":"/ja/play/3-7/syntax-and-messaging/optional-chaining.ts"},{"path":"/ja/play/3-8/breaking-changes/checking-unions-with-index-signatures.ts"},{"path":"/ja/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/ja/play/typescript/language-extensions/enums.ts"},{"path":"/ja/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/ja/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/ja/play/typescript/primitives/any.ts"},{"path":"/ja/play/typescript/primitives/literals.ts"},{"path":"/ja/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/ja/play/typescript/primitives/unknown-and-never.ts"},{"path":"/ja/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/ja/play/typescript/type-primitives/nullable-types.ts"},{"path":"/ja/play/typescript/type-primitives/tuples.ts"},{"path":"/pt/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/pt/play/javascript/javascript-essentials/functions.ts"},{"path":"/pt/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/pt/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/vo/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/vo/play/javascript/javascript-essentials/functions.ts"},{"path":"/vo/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/vo/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/zh/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/zh/play/javascript/external-apis/typescript-with-node.js"},{"path":"/zh/play/javascript/external-apis/typescript-with-web.js"},{"path":"/zh/play/javascript/external-apis/typescript-with-webgl.js"},{"path":"/zh/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/zh/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/zh/play/javascript/functions-with-javascript/typing-functions.ts"},{"path":"/zh/play/javascript/helping-with-javascript/errors.ts"},{"path":"/zh/play/javascript/helping-with-javascript/quick-fixes.ts"},{"path":"/zh/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/zh/play/javascript/javascript-essentials/functions.ts"},{"path":"/zh/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/zh/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/zh/play/javascript/modern-javascript/async-await.ts"},{"path":"/zh/play/javascript/modern-javascript/immutability.ts"},{"path":"/zh/play/javascript/modern-javascript/import-export.ts"},{"path":"/zh/play/javascript/modern-javascript/jsdoc-support.js"},{"path":"/zh/play/javascript/working-with-classes/classes-101.ts"},{"path":"/zh/play/javascript/working-with-classes/generic-classes.ts"},{"path":"/zh/play/javascript/working-with-classes/mixins.ts"},{"path":"/zh/play/javascript/working-with-classes/this.ts"},{"path":"/zh/play/playground/config/javascript-playgrounds.js"},{"path":"/zh/play/playground/config/new-compiler-defaults.ts"},{"path":"/zh/play/playground/language/automatic-type-acquisition.ts"},{"path":"/zh/play/playground/language/fixits.ts"},{"path":"/zh/play/playground/tooling/mobile-support.ts"},{"path":"/zh/play/playground/tooling/sharable-urls.ts"},{"path":"/zh/play/playground/tooling/typescript-versions.ts"},{"path":"/zh/play/typescript/language/soundness.ts"},{"path":"/zh/play/typescript/language/structural-typing.ts"},{"path":"/zh/play/typescript/language/type-guards.ts"},{"path":"/zh/play/typescript/language/type-widening-and-narrowing.ts"},{"path":"/zh/play/typescript/language-extensions/enums.ts"},{"path":"/zh/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/zh/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/zh/play/typescript/meta-types/conditional-types.ts"},{"path":"/zh/play/typescript/meta-types/discriminate-types.ts"},{"path":"/zh/play/typescript/meta-types/indexed-types.ts"},{"path":"/zh/play/typescript/meta-types/mapped-types.ts"},{"path":"/zh/play/typescript/primitives/any.ts"},{"path":"/zh/play/typescript/primitives/literals.ts"},{"path":"/zh/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/zh/play/typescript/primitives/unknown-and-never.ts"},{"path":"/zh/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/zh/play/typescript/type-primitives/nullable-types.ts"},{"path":"/zh/play/typescript/type-primitives/tuples.ts"},{"path":"/ja/play/3-7/syntax-and-messaging/flattened-error-reporting.ts"},{"path":"/ja/play/3-7/fixits/infer-from-usage-changes.ts"},{"path":"/ja/play/3-7/fixits/const-to-let.ts"},{"path":"/community"},{"path":"/es/community"},{"path":"/ja/community"},{"path":"/vo/community"},{"path":"/zh/community"},{"path":"/download"},{"path":"/es/download"},{"path":"/ja/download"},{"path":"/vo/download"},{"path":"/zh/download"},{"path":"/empty"},{"path":"/es/empty"},{"path":"/ja/empty"},{"path":"/vo/empty"},{"path":"/zh/empty"},{"path":"/"},{"path":"/es/"},{"path":"/ja/"},{"path":"/vo/"},{"path":"/zh/"},{"path":"/tools"},{"path":"/es/tools"},{"path":"/ja/tools"},{"path":"/vo/tools"},{"path":"/zh/tools"},{"path":"/why-create-typescript"},{"path":"/es/why-create-typescript"},{"path":"/ja/why-create-typescript"},{"path":"/vo/why-create-typescript"},{"path":"/zh/why-create-typescript"},{"path":"/docs/bootstrap"},{"path":"/es/docs/bootstrap"},{"path":"/ja/docs/bootstrap"},{"path":"/vo/docs/bootstrap"},{"path":"/zh/docs/bootstrap"},{"path":"/docs/"},{"path":"/es/docs/"},{"path":"/ja/docs/"},{"path":"/vo/docs/"},{"path":"/zh/docs/"},{"path":"/docs/handbook/"},{"path":"/es/docs/handbook/"},{"path":"/ja/docs/handbook/"},{"path":"/vo/docs/handbook/"},{"path":"/zh/docs/handbook/"},{"path":"/branding/"},{"path":"/dev/bug-workbench/"},{"path":"/dev/playground-plugins/"},{"path":"/dev/sandbox/"},{"path":"/dev/twoslash/"},{"path":"/dev/typescript-vfs/"},{"path":"/upcoming/"}]},"markdownRemark":{"id":"4cadce89-26cd-514b-b54e-9f20e5af71c2","excerpt":"The type system in TypeScript has different levels of strictness when working with a codebase: A type-system based only on inference with JavaScript code…","html":"<p>The type system in TypeScript has different levels of strictness when working with a codebase:</p>\n<ul>\n<li>A type-system based only on inference with JavaScript code</li>\n<li>Incremental typing in JavaScript <a href=\"/docs/handbook/jsdoc-supported-types.html\">via JSDoc</a></li>\n<li>Using <code>// @ts-check</code> in a JavaScript file</li>\n<li>TypeScript code</li>\n<li>TypeScript with <a href=\"/tsconfig#strict\"><code>strict</code></a> enabled</li>\n</ul>\n<p>Each step represents a move towards a safer type-system, but not every project needs that level of verification.</p>\n<h2 id=\"typescript-with-javascript\" style=\"position:relative;\"><a href=\"#typescript-with-javascript\" aria-label=\"typescript with javascript permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>TypeScript with JavaScript</h2>\n<p>This is when you use an editor which uses TypeScript to provide tooling like auto-complete, jump to symbol and refactoring tools like rename.\nThe <a href=\"/\">homepage</a> has a list of editors which have TypeScript plugins.</p>\n<h2 id=\"providing-type-hints-in-js-via-jsdoc\" style=\"position:relative;\"><a href=\"#providing-type-hints-in-js-via-jsdoc\" aria-label=\"providing type hints in js via jsdoc permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Providing Type Hints in JS via JSDoc</h2>\n<p>In a <code>.js</code> file, types can often be inferred. When types can’t be inferred, they can be specified using JSDoc syntax.</p>\n<p>JSDoc annotations come before a declaration will be used to set the type of that declaration. For example:</p>\n<pre class=\"shiki twoslash\"><div class=\"language-id\">js</div><div class='code-container'><code><span style=\"color: #008000\">/** </span><span style=\"color: #0000FF\">@type</span><span style=\"color: #008000\"> {number} */</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> </span><span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\"> = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// OK</span>\n<span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\"> = </span><span style=\"color: #0000FF\">false</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// OK?!</span></code><a href='https://www.typescriptlang.org/play/#code/PQKhAIAEBcE8AcCm4DeA7ArgWwEaIE4C+4IwAUAG4CG+4AHgNxll3gC84ADA+MMOAHkA0i3bgAZlQA2AZ0Q8+goQH4AhEA'>Try</a></div></pre>\n<p>You can find the full list of supported JSDoc patterns <a href=\"/docs/handbook/jsdoc-supported-types.html\">in JSDoc Supported Types</a>.</p>\n<h2 id=\"ts-check\" style=\"position:relative;\"><a href=\"#ts-check\" aria-label=\"ts check permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>@ts-check</code></h2>\n<p>The last line of the previous code sample would raise an error in TypeScript, but it doesn’t by default in a JS project.\nTo enable errors in your JavaScript files add: <code>// @ts-check</code> to the first line in your <code>.js</code> files to have TypeScript raise it as an error.</p>\n<pre class=\"shiki twoslash\"><div class=\"language-id\">js</div><div class='code-container'><code><span style=\"color: #008000\">// @ts-check</span>\n<span style=\"color: #008000\">/** </span><span style=\"color: #0000FF\">@type</span><span style=\"color: #008000\"> {number} */</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> </span><span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\"> = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// OK</span>\n<span style=\"color: #1A1A1A\"><data-err><data-lsp lsp='var x: number'>x</data-lsp></data-err></span><span style=\"color: #000000\"> = </span><span style=\"color: #0000FF\">false</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// Not OK</span>\n<span class=\"error\"><span>Type 'boolean' is not assignable to type 'number'.</span><span class=\"code\">2322</span></span><span class=\"error-behind\">Type 'boolean' is not assignable to type 'number'.</span></code><a href='https://www.typescriptlang.org/play/#code/PTAEAEBcGcFoGMAWBTeBrAUCCyBOuB7XaALlACYBmc8rAKjokgE8AHZUAbwDsBXAWwBGeAL6g6wDADcAhrlAAPANwYMC0AF5QABiWhsAeQDSazaABmMgDbRke7ADkCkUMaA'>Try</a></div></pre>\n<p>If you have a lot of JavaScript files you want to add errors to then you can switch to using a <a href=\"/docs/handbook/tsconfig-json.html\"><code>jsconfig.json</code></a>.\nYou can skip checking some files by adding a <code>// @ts-nocheck</code> comment to files.</p>\n<p>TypeScript may offer you errors which you disagree with, in those cases you can ignore errors on specific lines by adding <code>// @ts-ignore</code> or <code>// @ts-expect-error</code> on the preceding line.</p>\n<pre class=\"shiki twoslash\"><div class=\"language-id\">js</div><div class='code-container'><code><span style=\"color: #008000\">// @ts-check</span>\n<span style=\"color: #008000\">/** </span><span style=\"color: #0000FF\">@type</span><span style=\"color: #008000\"> {number} */</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> </span><span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\"> = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// OK</span>\n<span style=\"color: #008000\">// @ts-expect-error</span>\n<span style=\"color: #1A1A1A\"><data-lsp lsp='var x: number'>x</data-lsp></span><span style=\"color: #000000\"> = </span><span style=\"color: #0000FF\">false</span><span style=\"color: #000000\">; </span><span style=\"color: #008000\">// Not OK</span></code><a href='https://www.typescriptlang.org/play/#code/PTAEAEBcGcFoGMAWBTeBrAUMAVNikBPAB2VAG8A7AVwFsAjZAJwF9RtgMA3AQ0dAA8A3Bgz9QAXlAAGQaBCgA8gGksYKHGT8S8SLCaMA9o1ETQAM24AbaMlnyAcgciKlQA'>Try</a></div></pre>\n<p>To learn more about how JavaScript is interpreted by TypeScript read <a href=\"/docs/handbook/type-checking-javascript-files.html\">How TS Type Checks JS</a></p>","headings":[{"value":"TypeScript with JavaScript","depth":2},{"value":"Providing Type Hints in JS via JSDoc","depth":2},{"value":"@ts-check","depth":2}],"frontmatter":{"permalink":"/docs/handbook/intro-to-js-ts.html","title":"JS Projects Utilizing TypeScript","disable_toc":null,"oneline":"How to add type checking to JavaScript files using TypeScript"}},"prev":null,"next":{"childMarkdownRemark":{"frontmatter":{"title":"Type Checking JavaScript Files","oneline":"How to add type checking to JavaScript files using TypeScript","permalink":"/docs/handbook/type-checking-javascript-files.html"}}}},"pageContext":{"id":"js-projects-utilizing-typescript","slug":"/docs/handbook/intro-to-js-ts.html","repoPath":"/packages/documentation/copy/en/javascript/Intro to JS with TS.md","nextID":"cedd21fa-eeaa-55f3-9c1b-b658afa2602a","lang":"en","modifiedTime":"2020-08-07T17:00:36.335Z"}}}