{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/learn-typescript-types/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li><a href=\"#type-inferences\">Type Inferences</a></li>\n<li><a href=\"#type-shapes\">Type shapes</a></li>\n<li><a href=\"#any\">Any</a></li>\n<li><a href=\"#variable-type-annotations\">Variable type annotations</a></li>\n</ul>\n</div>\n<p>TypeScript is a programming language that adds types to JavaScript.</p>\n<p>It allows us to write JavaScript with a set of tools called a type system that helps us understand more about our code, and particularly, discover bugs.</p>\n<p>The type system refers to TypeScript’s understanding of what data types should be stored under your variables.</p>\n<p>We write TypeScript code in files with extension <del>.ts</del>.</p>\n<p>Next, we run our code through the TypeScript transcompiler which will check that the code adheres to TypeScript’s standards, and will display errors when it doesn’t. If the TypeScript code can be converted into working JavaScript, the transcompiler will output a JavaScript version of the file (<del>.js</del>).</p>\n<p>Given this TypeScript code as input:</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"ts\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">firstName</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Hemanta&quot;</span></span></span></code></pre>\n<p>The TypeScript transcompiler would output this JavaScript code:</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">firstName</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Hemanta&quot;</span></span></span></code></pre>\n<p>TypeScript code looks roughly the same as the equivalent JavaScript.</p>\n<h3 id=\"type-inferences\" style=\"position:relative;\"><a href=\"#type-inferences\" aria-label=\"type inferences 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>Type Inferences</h3>\n<p>JavaScript allows us to assign any value to any variable.</p>\n<p>In TypeScript, when we declare a variable with an initial value, the variable can never be reassigned a value of a different data type. This is an example of type inference: everywhere in our program, TypeScript expects the data type of the variable to match the type of the value assigned to it at declaration.</p>\n<p>TypeScript recognizes JavaScript’s built-in “primitive” data types:</p>\n<ul>\n<li>boolean</li>\n<li>number</li>\n<li>null</li>\n<li>string</li>\n<li>undefined</li>\n</ul>\n<p>If we try to reassign a variable to a value of a different data type, TypeScript will surface an error.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"ts\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">number</span><span class=\"mtk10\">:</span><span class=\"mtk1\"> </span><span class=\"mtk9\">number</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk5\">10</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk3\">number</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;ten&quot;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">//Type &#39;string&#39; is not assignable to type &#39;number&#39;.</span></span></span></code></pre>\n<h3 id=\"type-shapes\" style=\"position:relative;\"><a href=\"#type-shapes\" aria-label=\"type shapes 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>Type shapes</h3>\n<p>Because TypeScript knows what types our objects are, it also knows what shapes our objects adhere to. An object’s shape describes, among other things, what properties and methods it does or doesn’t contain.</p>\n<p>Through this knowledge of type shapes, TypeScript helps us quickly locate bugs in our code.</p>\n<h3 id=\"any\" style=\"position:relative;\"><a href=\"#any\" aria-label=\"any 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>Any</h3>\n<p>There are some places where TypeScript will not try to infer what type something is - generally when a variable is declared without being assigned an initial value. In situations, where it is not able to infer a type, TypeScript will consider a variable to be of type <del>any</del>.</p>\n<p>Variables of type <del>any</del> can be assigned to <em>any</em> value and TypeScript won’t give <em>any</em> error if they are assigned to a different type later on.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"ts\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">framework</span><span class=\"mtk1\">;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">framework</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> “</span><span class=\"mtk3\">Express</span><span class=\"mtk1\">”;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">farmework</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk5\">true</span><span class=\"mtk1\">;</span></span></span></code></pre>\n<p>Above, we declared the <del>framework</del> variable without an initial value. TypeScript considers it to be of type <del>any</del>, and therefore, doesn’t produce an error when we change the variable’s assignment from a string value to a boolean value.</p>\n<h3 id=\"variable-type-annotations\" style=\"position:relative;\"><a href=\"#variable-type-annotations\" aria-label=\"variable type annotations 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>Variable type annotations</h3>\n<p>In some situations, we’d like to declare a variable without an initial value while still ensuring that it will only ever be assigned values of a certain type. If left as <del>any</del>, TypeScript won’t be able to protect us from accidentally assigning a variable to an incorrect type that could break our code.</p>\n<p>We can tell TypeScript what type something is or will be by using a <em>type annotation</em>.\nVariables can have <em>type annotations</em> (also known as type declarations) added just after their names. We provide a type annotation by appending a variable with a colon (<del>:</del>) and the type (e.g., <del>number</del>, <del>string</del>, or <del>any</del>).</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"ts\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">language</span><span class=\"mtk10\">:</span><span class=\"mtk1\"> </span><span class=\"mtk9\">string</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">language</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;English&quot;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">language</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk5\">1234</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// Type &#39;number&#39; is not assignable to type &#39;string&#39;.</span></span></span></code></pre>\n<p>In the code above, we explicitly declare <del>language</del> to be of type <del>string</del> without assigning it an initial value. This enables us to assign it the value <del>English</del> without complaint, but when we later attempt to assign it a numerical value, TypeScript will give us an error message telling us that a number is being improperly assigned to a variable of type <del>string</del>.</p>\n<p>Note that <em>type annotations</em> get automatically removed when compiled to JavaScript.</p>\n<hr>\n<p>Go to <a href=\"https://hemanta.io/learn-typescript-functions/\">Learn TypeScript - Functions</a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk5 { color: #F97E72; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"Learn TypeScript - Types","date":"2021-06-19"}}},"pageContext":{"slug":"/learn-typescript-types/","prev":{"fields":{"slug":"/create-a-light-and-dark-mode-toggle-in-react-using-gsap/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/responsive-typography-with-css-clamp-function/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}