Getting Started

36:I[204091,["/_next/static/immutable/chunks/02pb8rek9_r8q.js"],"IconMark"] 2a:null 2b:["$","title",null,{"children":"An Introduction to TypeScript | Steve Oney | Observable"}] 30:T802,md`## Advantages of TypeScript One of the goals of TypeScript's type system is to detect code that will throw an exception at runtime, without having to run your code. Consider the following JavaScript code, \`\`\`\`javascript let city = 'new york city' console.log(city.toUppercase()) \`\`\`\` The browser will throw this error when you run the code: \`\`\`\` TypeError: city.toUppercase is not a function\` when you run the code. \`\`\`\` TypeScript's type checker can spot the problem by inferring the type of \`city\` was \`string\`, and returns the following message during the compilation process (this feature is called **Type Inference**): \`\`\`\` Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'? \`\`\`\` Hint: You can try the code on [TypeScript playground](https://www.typescriptlang.org/play). TypeScript also helps with cases where there is no exception, but the code might not do what you intend. Let's take a look at the following example JavaScript code. \`\`\`\`javascript const states = [ {name: 'Alabama', capital: 'Montgomery'}, {name: 'Alaska', capital: 'Juneau'}, {name: 'Arizona', capital: 'Phoenix'}, // .. ]; for (const state of states) { console.log(state.capitol) } \`\`\`\` This program will not throw any errors at runtime, but it will not do what the programmer intended because of the misspelling of \`capital\`. It will return the following: \`\`\`\` undefined undefined undefined \`\`\`\` TypeScript's type checker can detect the error even without adding type annotations: \`\`\`\` Property 'capitol' does not exist on type '{ name: string; capital: string }'. Did you mean 'capital'? \`\`\`\` In TypeScript, you can explicitly declare the type of states: \`\`\`\`typescript interface State { name: string; capital: string; } const states: State[] = [ {name: 'Alabama', capital: 'Montgomery'}, {name: 'Alaska', capital: 'Juneau'}, {name: 'Arizona', capital: 'Phoenix'}, ]; for (const state of states){ console.log(state.capital); } \`\`\`\` `31:Tc50,md` ### Defining Types TypeScript supports an extension of the JavaScript language for explicitly declaring types. For example, to create an object with an inferred type which includes \`name: string\` and \`id: number\`, you can write: \`\`\`\`typescript const user = { name: "Hayes", id: 0, }; \`\`\`\` You can explicitly describe this object’s shape using an \`interface\` declaration: \`\`\`\`typescript interface User { name: string; id: number; } \`\`\`\` You can then declare that a JavaScript object conforms to the shape of your new interface by using syntax like : TypeName after a variable declaration: \`\`\`\`typescript const user: User = { name: "Hayes", id: 0, }; \`\`\`\` TypeScript supports [basic types](https://www.typescriptlang.org/docs/handbook/basic-types.html): boolean, number, string, array, tuple, enum, unknown, any, void, etc. You can read the handbook for more details. Below, we highlight several features. #### TypeScript suports binary, hexadecimal, decimal, and octal literals. \`\`\`\`typescript const decimal: number = 6; const hex: number = 0xf00d; const binary: number = 0b1010; const octal: number = 0o744; \`\`\`\` #### Template Strings You can use template strings in TypeScript, which can span multiple lines and have embedded expressions. These strings are surrounded by the backtick/backquote (\`) character, and embedded expressions are of the form $\{ expr \}. \`\`\`\`typescript const fullName: string = \`Bob Bobbington\`; const age: number = 37; const sentence: string = \`Hello, my name is $\{fullName\}. I'll be $\{age + 1\} years old next month.\`; \`\`\`\` #### Enum An enum is a way of giving more friendly names to sets of numeric values. \`\`\`\`typescript enum Color { Red, Green, Blue, } const c: Color = Color.Green; \`\`\`\` #### Unknown vs. Any An \`unknown\` type refers to the type of variables that we do not know when we are writing the application. An \`any\` type is used when not all type information is available or its declaration would take an inappropriate amount of effort. \`any\` type will opt-out of type checking. Unlike \`unknown\`, variables of type \`any\` allow you to access arbitrary properties, even ones that don’t exist: \`\`\`\`typescript const looselyTyped: any = 4; // OK, ifItExists might exist at runtime looselyTyped.ifItExists(); // OK, toFixed exists (but the compiler doesn't check) looselyTyped.toFixed(); const strictlyTyped: unknown = 4; strictlyTyped.toFixed(); // error: Object is of type 'unknown'. \`\`\`\` #### Type assertions Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” A type assertion is like a type cast in other languages, but it performs no special checking or restructuring of data. Type assertions have two forms. One is the \`as\`-syntax: \`\`\`\`typescript const someValue: unknown = "this is a string"; const strLength: number = (someValue as string).length; \`\`\`\` The other version is the “angle-bracket” syntax: \`\`\`\`typescript const someValue: unknown = "this is a string"; const strLength: number = (someValue).length; \`\`\`\` `32:T421,md`### Composing Types With TypeScript, you can create complex types by combining simple ones. There are two popular ways to do so: with Unions, and with Generics. #### Unions With a [union](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html), you can declare that a type could be one of many types. For example, you can describe a window status type as the following: \`\`\`\`typescript type WindowStates = "open" | "closed" | "minimized"; \`\`\`\` Unions provide a way to handle different types too. For example, you may have a function that takes an array or a string: \`\`\`\`typescript function getLength(obj: string | string[]) { return obj.length; } \`\`\`\` #### Generics [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) provide variables to types. A common example is an array. An array without generics could contain anything. An array with generics can describe the values that the array contains. \`\`\`\`typescript type StringArray = Array; type NumberArray = Array; \`\`\`\` `33:T423,md`### Structural Type System One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural typing”. In a structural type system, if two objects have the same shape, they are considered to be of the same type. \`\`\`\`typescript interface Point { x: number; y: number; } function logPoint(p: Point) { console.log(\`$\{p.x\}, $\{p.y\}\`); } const point = { x: 12, y: 26 }; logPoint(point); // logs "12, 26" \`\`\`\` The \`point\` variable is never declared to be a \`Point\` type. However, TypeScript compares the shape of point to the shape of \`Point\` in the type-check. They have the same shape, so the code passes. The shape-matching only requires a subset of the object’s fields to match. \`\`\`\`typescript const point3 = { x: 12, y: 26, z: 89 }; logPoint(point3); // logs "12, 26" const rect = { x: 33, y: 3, width: 30, height: 80 }; logPoint(rect); // logs "33, 3" const color = { hex: "#187ABF" }; logPoint(color); // error \`\`\`\` `34:Td4b,md`## Set up a TypeScript project In this section, we will work you through the process of setting up a TypeScript project. ### Install TypeScript via npm TypeScript can be installed as an [npm module](https://www.npmjs.com/package/typescript). Assume you have npm installed already. Go to the terminal in VSCode and type: \`\`\`\` $ npm install --save-dev typescript \`\`\`\` You can then run the TypeScript compiler using the following command: \`\`\`\` $ npx tsc \`\`\`\` ### Hello World TypeScript Project Create a new directory \`typescript-demo\`. Then type \`npm init\` to create the project. Launch VS Code and add the following code piece. \`\`\`\` typescript-demo |- package.json |- /dist |- index.html |- /src |- index.ts \`\`\`\` Notice that under \`./src\`, we create a new file called \`index.ts\`. Now add the following TypeScript code. You'll notice the TypeScript keyword let and the string type declaration. \`\`\`\`typescript const title = document.createElement("h1"); const message: string = 'Hello World'; title.textContent = message; document.body.appendChild(title); \`\`\`\` And the \`index.html\`: \`\`\`\`HTML Getting Started \`\`\`\` Next, we run the following command to compile the \`index.ts\` and output it into the \`dist\` folder. \`\`\`\` $ npx tsc src/index.ts --outDir dist \`\`\`\` We will see the file \`dist/index.js\` generated. Open \`index.html\` in browser, we should see the title \`Hello World\`. ### Config TypeScript Project We can write a configuration file so that we don't have to run the command with specifications everytime. Type the following command to create a config file: \`\`\`\` $ npx tsc --init \`\`\`\` This will create a \`tsconfig.json\`. We can edit the file to include a few options: \`\`\`\`json { "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "module": "es6", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "outDir": "./dist", /* Redirect output structure to the directory. */ "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ } } \`\`\`\` This configuration tells the TypeScript compiler to look for \`.ts\` files under \`./src\`, and compile it to the es5 version of JavaScript under \`./dist\`. Let's make some edits to the the \`./src/index.ts\` file: \`\`\`\`javascript // const message: string = 'Hello World'; const message: string = 'Hello TypeScript'; \`\`\`\` Then run the TypeScript compiler: \`\`\`\` $ npx tsc \`\`\`\` Check the output file and the HTML page. ### Adding TypeScript to React The \`create-react-app\` module also has a feature that allows us to integrate TypeScript. To use it, just add \`--template typescript\`: \`\`\` npx create-react-app my-app --template typescript \`\`\` ### References: - [What is a tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) - [TypeScript tutorial in Visual Studio Code](https://code.visualstudio.com/docs/typescript/typescript-tutorial) `35:[] 2e:{"id":"b4aa52313e5c4de4","slug":"an-introduction-to-typescript","title":"An Introduction to TypeScript","thumbnail":"84856a5b312e5b28ef2515966539247d9deddeac50faad9bbff413a4e22e9ab5","access_level":"public","create_time":"$D2020-12-30T20:20:11.854Z","update_time":"$D2023-10-02T17:43:47.661Z","view_time":null,"first_public_time":"$D2020-12-30T20:20:13.227Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":44,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"An Introduction to TypeScript","cells":[{"id":0,"value":"md`# An Introduction to TypeScript\n\nTypeScript is an open-source language which builds on JavaScript by adding static type definitions.\nTypeScript is an unusual language as it neither runs in an interpreter (as Python and Ruby), nor compiles down to a lower-level language (as Java and C). Instead, it compiles to another high-level language, JavaScript.\n\nMany people argue that [JavaScript is a bad programming language](https://hackernoon.com/the-javascript-phenomenon-is-a-mass-psychosis-57adebb09359) despite its wide adoption in developing interactive websites.\nIt doesn't have useful programming features such as strong type checking, and compile-time error checks. \n\nBeing a superset of JavaScript, TypeScript has some syntax of its own. It adds a type system that models JavaScrirpt's runtime behavior and tries to detect code that may throw exceptions at runtime. However, it is possible for code to pass the type checker but still throw at runtime.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`\n## Static vs. Dynamic Typing\n\nRecall that different values have different **types**; a value might be a string, a list, an integer, etc. What discussing types, there are two major categories of type systems: **static** and **dynamic**.\n\nIn languages that are **dynamically typed** (like JavaScript and Python), programmers do not need to declare what type a given variable is; if you want variable \\`foo\\` to be an integer, wee can simply assign its value to be an integer:\n\n\\`\\`\\`javascript\nfoo = 100;\n\\`\\`\\`\n\nThis is \"dynamic\" in the sense that variables' types can cyange dynamically (in the runtime state of the program).\n\nIn languages that are **statically typed** (like C, C++, or Java), programmers need to specify what type a given variable is in code. Take this C++ code for example:\n\n\\`\\`\\`c++\nint foo = 200;\n\\`\\`\\`\n\nHere, we declare that \\`foo\\` is an integer by using the \\`int\\` keyword.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`\n## Strong vs. Weak Typing\n\nAnother way to divide type systems is **strong** vs. **weak** typing.\n\n**Weak type systems** (like JavaScript) don't check the validity of the types that it works with. In other words, we can do pretty much any operation with any sets of types and JavaScript won't throw an error; it instead tries to figure out what we might have meant. **Strong type systems** are more strict about what we can do with different types; they throw an error rather than trying to infer what the programmer meant.\n\nAlthough strong type systems have the downside of being more \"strict\", they can be advantageous. Sometimes, it is easier to debug an error thrown by a strong typed system than it is to debug what might have gone wrong when a weakly type system made a wrong inference (which might cause an error much further downstream instead).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"md`\n## TypeScript: Adding Optional Static Typing to JavaScript\n\nTypeScript is a \"syntactical superset\" of JavaScript. That means that any valid JavaScript code you write is also valid TypeScript code. TypeScript also adds a bunch of features to JavaScript---most notably, **optional static typing**, meaning that you **can** declare variables' types (but don't have to).\n\nWhy do the extra work of declaring the type of a given variable? Because TypeScript can help detect errors before they happen if it knows the type. For example, if we declare a variable to be a string but then later on forget that it's a string and try to perform list operations on it, TypeScript can give us a clear error without us ever having to run the program.\n\nAlthough all vlid JavaScript code is valid TypeScript code, the reverse is not true; valid TypeScript code is not necessarily valid JavaScript code. Thus, we will need to **transpile** our TypeScript code into JavaScript.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`## Why JavaScript is soooo wrong?\n\nTry running the following code in your browser:\n\\`\\`\\`\\`javascript\nconsole.log(0.1 + 0.2 === 0.3) // false\n\nx = 1.0000000000000001\nconsole.log(x === 1) // true\n\nconsole.log(typeof NaN) // number\nconsole.log(NaN !== NaN) // true\nconsole.log(NaN !=== NaN) // true\n\nconsole.log([] + []) // \"\"\nconsole.log([] + {}) // [object object]\nconsole.log({} + []) // 0 \nconsole.log({} + {}) // [object Object][object Object]\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`## The Basics of TypeScript Syntax\nNow, let's seriously talk about TypeScript Syntax.\nAs mentioned before, TypeScript is a superset of JavaScript. In other words, all JavaScript programs are already TypeScript programs. TypeScript has some syntax of its own, so TypeScript programs are not, in general, valid JavaScript programs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`### Type Inference\nTypeScript knows the JavaScript language and will generate types for you in many cases. For example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type.\n\\`\\`\\`\\`typescript\nconst helloWorld = \"Hello World\";\n// ^ = const helloWorld: string\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n### References:\n- [TypeScript for JavaScript Programmers](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)\n- [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`\n## Disadvantages of TypeScript\n\nTypeScript has some clear advantages but what are the disadvantages? In my mind, there is one primary disadvantage to TypeScript, which is the setup cost. There are two main setup costs:\n\n1. Configuring your build environment\n2. Setting up libraries that do not have built-in TypeScript support (these work but it can be frustrating dealing with libraries that do not have types).\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 23:null 27:[["$","title","0",{"children":"An Introduction to TypeScript | Steve Oney | Observable"}],["$","meta","1",{"property":"og:title","content":"An Introduction to TypeScript"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Steve Oney"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@soney/an-introduction-to-typescript"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/84856a5b312e5b28ef2515966539247d9deddeac50faad9bbff413a4e22e9ab5.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"An Introduction to TypeScript"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Steve Oney"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/84856a5b312e5b28ef2515966539247d9deddeac50faad9bbff413a4e22e9ab5.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L36","17",{}]]