The relationship between TypeScript and JavaScript is rather unique among modern programming languages.\nTypeScript sits as a layer on-top of JavaScript, offering the features of JavaScript and then adds it’s own layer on top of that. This layer is the TypeScript type system.
\nJavaScript already has a set of language primitives like string, number, object, undefined etc, however there are no ahead-of-time checks that these are consistently assigned across your whole codebase. TypeScript acts as that layer.
This means that your existing working JavaScript code is also TypeScript code, however TypeScript’s type-checker might highlight discrepancies between what you thought was happening and what the JavaScript language does.
\nThis tutorial tries to give you a 5 minute overview of the type-system, with a focus on understanding the type-system langauge extensions which TypeScript adds.
\nTypeScript knows the JavaScript language and will generate types for you in many cases.\nFor example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type.
\n\ntslet helloWorld let helloWorld: string= \"Hello World\";\n// ^ = let helloWorld: string
By understanding how JavaScript works, TypeScript can build a type-system which accepts JavaScript code but has types. This offers a type-system without needed to add extra characters to make types explicit in your code. Which is how TypeScript knows that helloWorld is a string in the above example.
It’s quite possible that you have used VS Code with JavaScript, and had editor auto-completion as you worked.\nThat is because the understanding of JavaScript baked into TypeScript has been used under-the-hood to improve working with JavaScript.
\nJavaScript is a dynamic language which allows for a lot of design patterns. Some design patterns can be hard to automatically provide types for automatically (because they might use dynamic programming) in those cases TypeScript supports an extension of the JavaScript language which offers places for you to tell TypeScript what the types should be.
\nHere is an example of creating an object which has an inferred type which includes name: string and id: number:
\ntsconst user const user: { name: string; id: number; }= {\n name:(property) name: string\"Hayes\",\n id:(property) id: number0\n};
An explicit way to describe this object’s shape is via an interface declaration:
\ntsinterface User interface User\n name:(property) User.name: string string;\n id:(property) User.id: number number;\n}
You can then declare that a JavaScript object conforms to that shape of your new interface by using syntax like : TypeName after a variable declaration:
\ntsconst user: User = {\n name: \"Hayes\",\n id: 0\n};
TypeScript will warn you if you provide an object which doesn’t match the interface you have provided:
\n\ntsinterface User interface User\n name:(property) User.name: string string;\n id:(property) User.id: number number;\n}\n\nconst user:const user: User User interface User= {\n username:(property) username: string\"Hayes\",\nType '{ username: string; id: number; }' is not assignable to type 'User'.\n Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.\n Object literal may only specify known properties, and 'username' does not exist in type 'User'. id:(property) User.id: number0\n};
Because JavaScript supports classes and object-orient programming, so does TypeScript - a interface declaration can also be used with classes:
\n\ntsinterface User interface User\n name:(property) User.name: string string;\n id:(property) User.id: number number;\n}\n\nclass UserAccount class UserAccount\n name:(property) UserAccount.name: string string;\n id:(property) UserAccount.id: number number;\n\n constructor(name:(parameter) name: string string, id:(parameter) id: number number) {\n this.name (property) UserAccount.name: string= name;(parameter) name: string\n this.id (property) UserAccount.id: number= id;(parameter) id: number\n }\n}\n\nconst user:const user: User User interface User= new UserAccount(constructor UserAccount(name: string, id: number): UserAccount\"Murphy\", 1);
Interfaces can be used to annotate parameters and return values to functions:
\n\ntsfunction getAdminUser(): User {\n //...\n}\n\nfunction deleteUser(user: User) {\n // ...\n}
There are already a small set of primitive types available in JavaScript: boolean, bigint, null, number, string, symbol, object and undefined, which you can use in an interface. TypeScript extends this list with a few more. for example: any (allow anything), unknown (ensure someone using this type declares what the type is), never (it’s not possible that this type could happen) void (a function which returns undefined or has no return value).
You’ll see quite quickly that there are two syntaxes for building types: Interfaces and Types - you should prefer interface, and use type when you need specific features.
Similar to how you would create larger complex objects by composing the, together TypeScript has tools for doing this with types.\nThe two most popular techniques you would use in everyday code every to create new types by working with many smaller types are Unions and Generics.
\nA union is a way to declare that a type could be one of many types. For example, you could describe a boolean type as being either true or false:
\ntstype MyBool type MyBool = boolean= true | false;
Note: If you hover over MyBool above, you’ll see that it is classed as boolean - that’s an property of the Structural Type System, which we’ll get to later.
One of the most popular use-cases for union types is to describe a set of strings or numbers literal which a value is allowed to be:
\ntstype WindowStates type WindowStates = "open" | "closed" | "minimized"= \"open\" | \"closed\" | \"minimized\";\ntype LockStates type LockStates = "locked" | "unlocked"= \"locked\" | \"unlocked\";\ntype OddNumbersUnderTen type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9= 1 | 3 | 5 | 7 | 9;
Unions provide a way to handle different types too, for example you may have a function which accepts an array or a string.
\ntsfunction getLength(function getLength(obj: string | string[]): string | string[]obj:(parameter) obj: string | string[] string | string[]) {\n return obj;(parameter) obj: string | string[]\n}
TypeScript understands how code changes what the variable could be with time, you can use these checks to narrow the type down.
\n| Type | \nPredicate | \n
|---|---|
| string | \ntypeof s === \"string\" | \n
| number | \ntypeof n === \"number\" | \n
| boolean | \ntypeof b === \"boolean\" | \n
| undefined | \ntypeof undefined === \"undefined\" | \n
| function | \ntypeof f === \"function\" | \n
| array | \nArray.isArray(a) | \n
For example, you could differentiate between a string and an array, using typeof obj === \"string\" and TypeScript will know what the object is down different code paths.
\ntsfunction wrapInArray(function wrapInArray(obj: string | string[]): string[]obj:(parameter) obj: string | string[] string | string[]) {\n if (typeof obj (parameter) obj: string | string[]=== \"string\") {\n return [obj](parameter) obj: string\n// ^ = (parameter) obj: string\n } else {\n return obj;(parameter) obj: string[]\n }\n}
You can get very deep into the TypeScript generic system, but at a 1 minute high-level explanation, generics are a way to provide variables to types.
\nA common example is an array, an array without generics could contain anything. An array with generics can describe what values are inside in the array.
\n\ntstype StringArray = Array<string>;\ntype NumberArray = Array<number>;\ntype ObjectWithNameArray = Array<{ name: string }>;
You can declare your own types which use generics:
\n\ntsinterface Backpack<interface Backpack<Type>Type>(type parameter) Type in Backpack<Type> {\n add:(property) Backpack<Type>.add: (obj: Type) => void (obj:(parameter) obj: Type Type)(type parameter) Type in Backpack<Type>=> void;\n get:(property) Backpack<Type>.get: () => Type () => Type;(type parameter) Type in Backpack<Type>\n}\n\n// This line is a shortcut to tell TypeScript there is a\n// constant called `backpack`, and to not worry about where it came from\ndeclare const backpack:const backpack: Backpack<string> Backpack<interface Backpack<Type>string>;\n\n// object is a string, because we declared it above as the variable part of Backpack\nconst object const object: string= backpack.const backpack: Backpack<string>get((property) Backpack<string>.get: () => string);\n\n// Due to backpack variable being a string, you cannot pass a number to the add function\nbackpack.const backpack: Backpack<string>add((property) Backpack<string>.add: (obj: string) => void23);\nArgument of type '23' is not assignable to parameter of type 'string'.2345Argument of type '23' is not assignable to parameter of type 'string'.
One of TypeScript’s core principles is that type checking focuses on the shape which values have.\nThis is sometimes called “duck typing” or “structural typing”.
\nIn a structural type system if two objects have the same shape, they are considered the same.
\n\ntsinterface Point interface Point\n x:(property) Point.x: number number;\n y:(property) Point.y: number number;\n}\n\nfunction printPoint(function printPoint(p: Point): voidp:(parameter) p: Point Point)interface Point {\n console.var console: Consolelog((method) Console.log(message?: any, ...optionalParams: any[]): void`${p.(parameter) p: Pointx(property) Point.x: number}, ${p.(parameter) p: Pointy(property) Point.y: number}`);\n}\n\n// prints \"12, 26\"\nconst point const point: { x: number; y: number; }= { x:(property) x: number12, y:(property) y: number26 };\nprintPoint(function printPoint(p: Point): voidpoint)const point: { x: number; y: number; }
The point variable is never declared to be a Point type, but because TypeScript compares the shape of point to the shape of Point in the type-check.\nBecause they both have the same shape, then it passes.
The shape matching only requires a subset of the object’s fields to match.
\n\ntsconst point3 = { x: 12, y: 26, z: 89 };\nprintPoint(point3); // prints \"12, 26\"\n\nconst rect = { x: 33, y: 3, width: 30, height: 80 };\nprintPoint(rect); // prints \"33, 3\"\n\nconst color = { hex: \"#187ABF\" };\n// Errors: Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'.\nprintPoint(color);
This is a high level 5 minute overview of the sort of syntax and tools you would use in everyday code.\nFrom here you should read through the handbook or explore the Playground examples.
","headings":[{"value":"Types by Inference","depth":2},{"value":"Defining Types","depth":2},{"value":"Composing Types","depth":2},{"value":"Unions","depth":3},{"value":"Generics","depth":3},{"value":"Structural Type System","depth":2}],"frontmatter":{"permalink":"/docs/handbook/typescript-in-5-minutes.html","title":"TypeScript for JavaScript Programmers"}}},"pageContext":{"slug":"/docs/handbook/typescript-in-5-minutes.html","isOldHandbook":true}}}