{
    "componentChunkName": "component---src-templates-spotlight-tsx",
    "path": "/spotlights/what-is-typescript.md",
    "result": {"data":{"file":{"relativePath":"what-is-typescript.md","post":{"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"authors\": [\"Daniell#4062\", \"ddivad#0001\", \"Xetera#0001\"],\n  \"created_at\": \"2021/09/08\",\n  \"title\": \"What is TypeScript?\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"what-is-typescript\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#what-is-typescript\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"What is TypeScript?\"), mdx(\"p\", null, \"TypeScript is a programming language which adds optional static typing to JavaScript, therefore it is a strict superset. Being developed and maintained by Microsoft, the language gained a lot of interest, it's primary goal is to deal with the shortcomings of JavaScript in a non-breaking way.\"), mdx(\"p\", null, \"Because TypeScript adds optional features to JavaScript, being a JavaScript developer you could use it today, the language can be gradually adopted, meaning you could add it to any existing JavaScript project and configure more strict rules as you are in the process of implementing it and getting close to fully flip the switch. Even if you have a history in typed languages you may find something of interest.\"), mdx(\"h2\", {\n    \"id\": \"why-should-i-use-typescript\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#why-should-i-use-typescript\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Why should I use TypeScript?\"), mdx(\"p\", null, \"JavaScript is a general purpose programming language, therefore, TypeScript is too. Do you want to make games, apps, api's, or websites, are you a JavaScript developer tired of seeing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeError: Cannot read property 'x' of undefined\"), \" every time you run your code? Continue to read about how TypeScript can greatly enhance your developer experience.\"), mdx(\"h2\", {\n    \"id\": \"static-typing\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#static-typing\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Static typing\"), mdx(\"p\", null, \"Because TypeScript is statically typed, errors can be catched before you run your code. Editors that utilise IntelliSense will give you warnings about possible errors that may occur as you write code, this includes, but is not limited to the error mentioned above, TypeScript can warn you about values being possibly undefined or values that don't exist, which makes refactoring a lot easier. IntelliSense will also give you autocompletion and refactoring shortcuts.\"), mdx(\"p\", null, \"Let's see static typing in action. Assume a third party library provides us with the types and function below. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftovers\"), \" are not available the moment we run this function:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type Stock = {\\n  fruits: Fruit[];\\n  leftovers?: Leftover[];\\n};\\n\\ndeclare function getStock(): Stock;\\n\")), mdx(\"p\", null, \"When we run this code in JavaScript:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const stock = getStock();\\nstock.leftovers.forEach((leftover) => console.log(leftover));\\n// Cannot read property 'leftovers' of undefined\\n\")), mdx(\"p\", null, \"We lost millions because of this bug :(. You might be wondering how TypeScript could have saved us here:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const stock = getStock();\\n// leftovers?: Leftover[] | undefined\\n// Object is possibly 'undefined'.(2532)\\nstock.leftovers.forEach((leftover) => console.log(leftover));\\n\")), mdx(\"p\", null, \"Our editor warns us as we code! We would also not be able to transpile this code to JavaScript before we fix it by either using optional chaining \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stock.leftovers?.forEach(...\"), \" , or by writing an if statement which checks for the existence of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftovers\"), \" before using it.\"), mdx(\"h2\", {\n    \"id\": \"backwards-compatibility\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#backwards-compatibility\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Backwards compatibility\"), mdx(\"p\", null, \"TypeScript transpiles to JavaScript so it can be used in any environment that supports JavaScript. Deno (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://deno.land/\"\n  }, \"https://deno.land/\"), \") can run TypeScript in runtime. The native TypeScript Checker (tsc) can be used to transpile your code using modern ECMAScript features to work with older versions if needed, alternatively Babel (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://babeljs.io/\"\n  }, \"https://babeljs.io/\"), \") can be used for transpiling. We no longer need to worry about our code not being compatible with older browsers or servers with a legacy Node.js versions!\"), mdx(\"h2\", {\n    \"id\": \"how-do-i-use-typescript\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#how-do-i-use-typescript\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"How do I use TypeScript?\"), mdx(\"p\", null, \"Please check your editor's requirements to configure TypeScript language features, Microsoft's \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://code.visualstudio.com/\"\n  }, \"Visual Studio Code\"), \" ships with TypeScript natively.\"), mdx(\"p\", null, \"The commands below assume you have Node.js installed, if you have not installed it yet, see:\"), mdx(\"p\", null, \"Node.js for Windows \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://nodejs.org/en/\"\n  }, \"https://nodejs.org/en/\"), \"\\nNVM For Windows \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/coreybutler/nvm-windows\"\n  }, \"https://github.com/coreybutler/nvm-windows\")), mdx(\"p\", null, \"Node Version Manager for macOS / Linux \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/nvm-sh/nvm\"\n  }, \"https://github.com/nvm-sh/nvm\"), \": This prevents you from having to use sudo / deal with other permission errors and allows you to change Node.js version easily compared to installing Node.js through your package manager.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"# Initialise an empty project in the current folder\\nnpm init -y\\n# Install TypeScript as dev dependency\\nnpm install --save-dev typescript\\n# Generate a tsconfig.json file, this file contains our TypeScript project info\\nnpx --no-install tsc --init\\n\")), mdx(\"p\", null, \"You can now create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.ts\"), \" file and start writing TypeScript inside!\"), mdx(\"h2\", {\n    \"id\": \"some-helpful-scripts\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#some-helpful-scripts\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Some helpful scripts\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"scripts\\\": {\\n    \\\"build\\\": \\\"tsc\\\",\\n    \\\"start\\\": \\\"nodemon --transpile-only src/index.ts\\\"\\n  }\\n}\\n\")), mdx(\"p\", null, \"These scripts go inside your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" file generated by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm init\"), \" and can be invoked by running the following commands:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"npm run build\"), \": This runs TypeScript's type checker and transpiles your TypeScript files to JavaScript using the options provided in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tsconfig.json\"), \".\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"npm start\"), \": This runs your TypeScript entry file in watch mode (restarts your project when you save), the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transpile-only\"), \" flag tells ts-node to skip type checking, this makes reloading much faster and it is also safe because our editor warns us about type errors already and so does the TypeScript type checker when running our build script.\"), mdx(\"p\", null, \"The start script mentioned, requires you to install 2 additional dependencies:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install --save-dev nodemon ts-node\\n\")), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"enough-talking-let-me-see-the-code\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#enough-talking-let-me-see-the-code\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Enough talking, let me see the code!\"), mdx(\"p\", null, \"TypeScript provides an additional layer of documentation. Type annotations make it clear to developers how code is supposed to be used.\"), mdx(\"h2\", {\n    \"id\": \"type-annotations\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#type-annotations\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Type annotations\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"function add(a: number, b: number) {\\n  return a + b;\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"class-access-modifiers\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#class-access-modifiers\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Class access modifiers\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"class Person {\\n  protected name: string;\\n  private age: number;\\n  readonly numberOfLives = 1;\\n  public favouriteLanguage: string;\\n\\n  constructor(name: string, age: number, favouriteLanguage = \\\"TypeScript\\\") {\\n    this.name = name;\\n    this.age = age;\\n    this.favouriteLanguage = favouriteLanguage;\\n  }\\n\\n  @CatchErrorAndLog // Did you know that TypeScript also supports decorators?\\n  public someMethod() {\\n    throw new Error(\\\"method not implemented\\\");\\n  }\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"generic-types\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#generic-types\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Generic types\"), mdx(\"p\", null, \"Generics are a powerful tool, they give you the ability to create reusable components that work with a wide variety of types rather than a single one, you might have heard of them if you are familiar with C# or Java.\"), mdx(\"p\", null, \"Let's say we want to create a function which accepts an object and a key of that object in order to to return the value that maps to it's key, how do we dynamically determine which keys are valid without creating a function for every possible object shape in the world? We introduce generics:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const member = {\\n  username: \\\"moe\\\",\\n  isShid: true,\\n};\\n\\nfunction getValueByKey<T, K extends keyof T>(obj: T, key: K): T[K] {\\n  return obj[key];\\n}\\n\\ngetValueByKey(member, \\\"username\\\"); // string\\ngetValueByKey(member, \\\"isShid\\\"); // boolean\\n\")), mdx(\"p\", null, \"This function accepts 2 generic parameters (you could think of them as placeholders): \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"K\"), \", we assign the first parameter of this function to generic type T, you might be wondering about the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extends\"), \" keyword, basically this adds a constraint to generic parameter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"K\"), \", you could read it as \\\"Type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"K\"), \" must be a key of type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T\"), \"\\\".\"), mdx(\"p\", null, \"Finally we declare the return type by indexing type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T\"), \" using our second parameter which is the key, this is referred to as a \\\"indexed access type\\\". TypeScript will now warn us whenever we provide a key that does not exist in the object. We achieved type safety without knowing what object the user would pass in to our function.\"), mdx(\"p\", null, \"To make sure we only accept objects for our first parameter, we could give type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T\"), \" a constraint as well using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Record\"), \" utility type (which happens to accept generic parameters as well): \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T extends Record<string, unknown>\"), \", this way we are saying \\\"Type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"T\"), \" must be a value which type is assignable to an object (record) with any strings for it's keys, and it has unknown values\\\", which is essentially any object to us, the creators of this function.\"), mdx(\"h2\", {\n    \"id\": \"conditional-types\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conditional-types\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Conditional types\"), mdx(\"p\", null, \"What if we want to create a function or compose other types based on certain criteria? This is where we can make use of conditional types:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// Conditional types uses the same syntax you know of ternaries\\ntype IsNumber<T> = T extends number ? true : false;\\ntype Result = IsNumber<7>; // true\\n\\n// Inferring typed within conditional types using the \\\"infer\\\" keyword.\\n// This example uses variadic tuple types\\ntype LastElementType<T> = T extends [...infer _Head, infer Tail] ? Tail : never;\\ntype Last = LastElementType<[string, boolean, number]>; // number\\n\")), mdx(\"h2\", {\n    \"id\": \"other-examples\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#other-examples\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Other examples\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// Template literal types\\ntype Border = `border-${\\\"top\\\" | \\\"bottom\\\" | \\\"left\\\" | \\\"right\\\"}`;\\n\\n// Narrowing down union types\\ntype APIResponseSuccess = {\\n  status: 200;\\n  body: string;\\n};\\n\\ntype APIResponseAuthFailed = {\\n  status: 401;\\n  body: string;\\n  errorMessage: string;\\n};\\n\\ntype APIResponseAuthNotFound = {\\n  status: 404;\\n};\\n\\ntype APIResponse =\\n  | APIResponseSuccess\\n  | APIResponseAuthFailed\\n  | APIResponseAuthNotFound;\\n\\nfunction handleResponse(response: APIResponse) {\\n  if (response.status === 200) {\\n    return console.log(response.body);\\n  }\\n\\n  if (response.status === 401) {\\n    return console.log(response.errorMessage);\\n  }\\n\\n  console.log(\\\"Not found\\\");\\n}\\n\\n// Utility types, this example uses the `Partial` utility type\\ninterface Todo {\\n  title: string;\\n  description: string;\\n}\\n\\nfunction updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {\\n  return { ...todo, ...fieldsToUpdate };\\n}\\n\\nconst todo1 = {\\n  title: \\\"organize desk\\\",\\n  description: \\\"clear clutter\\\",\\n};\\n\\nconst todo2 = updateTodo(todo1, {\\n  description: \\\"throw out trash\\\",\\n});\\n\")), mdx(\"h2\", {\n    \"id\": \"resources\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#resources\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Resources\"), mdx(\"p\", null, \"TypeScript Documentation: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.typescriptlang.org/docs/\"\n  }, \"https://www.typescriptlang.org/docs/\"), \"\\nTypeScript Handbook: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.typescriptlang.org/docs/handbook/intro.html\"\n  }, \"https://www.typescriptlang.org/docs/handbook/intro.html\"), \": Starting point for anyone who wants to learn TypeScript.\\nPlayground: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.typescriptlang.org/play\"\n  }, \"https://www.typescriptlang.org/play\"), \": Try TypeScript in your browser!\"), mdx(\"h2\", {\n    \"id\": \"books\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#books\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Books\"), mdx(\"p\", null, \"typescript-book: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/basarat/typescript-book\"\n  }, \"https://github.com/basarat/typescript-book\"), \": Free online guide to TypeScript.\\nProgramming TypeScript: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.oreilly.com/library/view/programming-typescript/9781492037644/\"\n  }, \"https://www.oreilly.com/library/view/programming-typescript/9781492037644/\"), \": Solid book for beginners.\\nEffective TypeScript: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://effectivetypescript.com/\"\n  }, \"https://effectivetypescript.com/\"), \": Improve your use of TypeScript (best for experienced programmers).\\nTackling TypeScript: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://exploringjs.com/tackling-ts/index.html\"\n  }, \"https://exploringjs.com/tackling-ts/index.html\"), \": Adopt TypeScript as a JavaScript programmer.\"), mdx(\"h2\", {\n    \"id\": \"videos\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#videos\",\n    \"aria-hidden\": true,\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  }))), \"Videos\"), mdx(\"p\", null, \"Courses on egghead.io: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://egghead.io/q/typescript\"\n  }, \"https://egghead.io/q/typescript\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"What is TypeScript? TypeScript is a programming language which adds optional static typing to JavaScript, therefore it is a strict superset…","fields":{"authors":[{"name":"Daniell","hash":"4062","avatar":"https://cdn.discordapp.com/embed/avatars/2.png"},{"name":"ddivad","hash":"0001","avatar":"https://cdn.discordapp.com/embed/avatars/1.png"},{"name":"Xetera","hash":"0001","avatar":"https://cdn.discordapp.com/embed/avatars/1.png"}]},"frontmatter":{"created_at":"2021/09/08"},"timeToRead":4}}},"pageContext":{"file":"what-is-typescript.md","layout":"spotlights"}},
    "staticQueryHashes": ["1967409267","3753197437","63159454"]}