(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{75:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),s=(t(0),t(131)),i={title:"TypeScript"},o={unversionedId:"cheatsheets/typescript",id:"cheatsheets/typescript",isDocsHomePage:!1,title:"TypeScript",description:"- official page//www.typescriptlang.org/",source:"@site/docs\\cheatsheets\\typescript.md",slug:"/cheatsheets/typescript",permalink:"/docs/cheatsheets/typescript",version:"current",sidebar:"docs",previous:{title:"JavaScript",permalink:"/docs/cheatsheets/javascript"},next:{title:"PixiJS Introduction",permalink:"/docs/tutorials/pixi_intro"}},c=[{value:"Basic Types",id:"basic-types",children:[]},{value:"Declarations",id:"declarations",children:[]},{value:"Functions",id:"functions",children:[]},{value:"Enumerators",id:"enumerators",children:[]},{value:"For loop",id:"for-loop",children:[]},{value:"Equality",id:"equality",children:[]},{value:"Maps",id:"maps",children:[]},{value:"Array operations",id:"array-operations",children:[]},{value:"Classes",id:"classes",children:[]},{value:"Inheritance and interfaces",id:"inheritance-and-interfaces",children:[]},{value:"Getters, setters",id:"getters-setters",children:[]},{value:"Generics",id:"generics",children:[]},{value:"Other constructs",id:"other-constructs",children:[]},{value:"Asynchronous operations",id:"asynchronous-operations",children:[]},{value:"Context binding",id:"context-binding",children:[]},{value:"Exports and Imports",id:"exports-and-imports",children:[]},{value:"Modules",id:"modules",children:[]}],l={rightToc:c};function u(e){var n=e.components,t=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(r.a)({},l,t,{components:n,mdxType:"MDXLayout"}),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"official page: ",Object(s.b)("a",Object(r.a)({parentName:"li"},{href:"https://www.typescriptlang.org/"}),"https://www.typescriptlang.org/"))),Object(s.b)("h3",{id:"basic-types"},"Basic Types"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),'any\nvoid\nunknown \n \nboolean\nnumber\nstring\nSymbol\n  \nnull\nundefined\n\nstring[]          /* or Array<string> */\n[string, number]  /* tuple */\n  \nfalse, 0, "", null, undefined, NaN  // always false\n')),Object(s.b)("h3",{id:"declarations"},"Declarations"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"let isDone: boolean;\nconst myName: string = 'Robert'; // assignment\nconst myName = 'Robert'; // type determined from the right side\n \nconst hobbies: string[] = ['Programming', 'Cooking']; // array\nconst address: [string, number] = [\"Street\", 99]; // tuple\n\nlet repeatType: 'repeat-x' | 'repeat-y' | 'no-repeat';  // union enum\n\nlet sprites: Sprite | Sprite[]; // union type\nlet spriteMesh: Sprite & Mesh; // intersection type\nlet myCar: any = 'BMW'; // any\nconst greeting = `Hello I'm ${userName}`; // template literal\n")),Object(s.b)("h3",{id:"functions"},"Functions"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"// normal function\nfunction add (a: number, b: number): number {\n  return a + b\n}\n\n// arrow function\nconst add = (a: number, b: number): number => a + b;\n \n// this never returns anything\nfunction neverReturns(): never {\n  throw new Error('An error!');\n}\n")),Object(s.b)("h3",{id:"enumerators"},"Enumerators"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"enum Color {\n  Gray, // 0\n  Red, // 1\n  Green = 100, // 100\n  Blue, // 101\n  Yellow = 2 // 2\n}\n \nconst myColor: Color = Color.Green\nconsole.log(myColor); // Prints: 100\n\nconst colors = Object.keys(Color); // gets all enum keys\n")),Object(s.b)("h3",{id:"for-loop"},"For loop"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"// For..of, can be used only for iterable objects\nfor(let user of activeUsers) {\n  console.log(user);\n}\n \n// for..in\n// this can be applied to any object, just iterates over its attributes\n// order is undefined, don't use it for iterable objects\nfor(let key in activeUsers) {\n  console.log(activeUsers[key])\n}\n")),Object(s.b)("h3",{id:"equality"},"Equality"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"// equality operator \n'' == '0'              // false \n0 == ''                // true \n0 == '0'               // true\nfalse == 'false'       // false \nfalse == '0'           // true \nfalse == undefined     // false \nfalse == null          // false \nnull == undefined      // true \n{ } === {}             // false \nnew String('foo') === 'foo' // false \n10 == '10'             // true \n10 == '+10'            // true \n10 == '010'            // true \nisNan(null) == false   // true, null converts to 0\nnew Number(10) === 10  // false, object !== number \n\n// typeof operator \n'foo'                  // string \nnew String('foo')      // object \ntrue                   // boolean \n[1, 2, 3]              // object \nnew Function()         // function \n\n// casting \n'' + 10 === '10'       // true \n!!'foo'                // true \n!!true                 // true\n\n")),Object(s.b)("h3",{id:"maps"},"Maps"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"// regular object\nlet totalReplies = {};\ntotalReplies[user1] = 5; // keys are converted to strings\n \n// Map object -> can use strings and numbers as keys\nlet totalReplies = new Map();\ntotalReplies.set(user1, 5); \ntotalReplies.set(user2, 42);\n\nlet has = totalReplies.has(user1);\ntotalReplies.delete(user1);\n")),Object(s.b)("h3",{id:"array-operations"},"Array operations"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),'// concat, entries, fill, filter, find, flat, flatMap, forEach, \n// join, includes, keys, map, push, pop, reduce, reverse, shift, \n// slice, sort, splice, unshift, values\n \n[0, 0, 0].fill(7, 1) // [0,7,7]\n[1, 2, 3].find(x => x == 3) // 3\n[1, 2, 3].findIndex(x => x == 2) // 1\n[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]\n["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]\n["a", "b", "c"].keys() // iterator 0, 1, 2\n["a", "b", "c"].values() // iterator "a", "b", "c"\nconst merge = [...arr1, ...arr2]; // merged arrays\n')),Object(s.b)("h3",{id:"classes"},"Classes"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"class Point {\n \n  public x: number;\n  public y: number;\n  protected static instances = 0; // initial value\n \n  constructor(x: number, y: number) {\n    Point.instances++;\n    this.x = x;\n    this.y = y;\n  }\n}\n\n// abstract class\nabstract class Shape {\n  abstract calcSize(): number;\n}\n")),Object(s.b)("h3",{id:"inheritance-and-interfaces"},"Inheritance and interfaces"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"class Point {\n  protected x: number;\n  protected y: number;\n}\n \nclass Point3D extends Point {\n  protected z: number;\n}\n \ninterface Colored {\n  select(): void;\n}\n\nclass Pixel extends Point implements Colored {\n  select(): void { ... }\n}\n")),Object(s.b)("h3",{id:"getters-setters"},"Getters, setters"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"class Plant {\n  private _species: string = 'Default';\n \n  get species() {\n    return this._species;\n  }\n \n  set species(value: string) {\n    this._species = value;\n  }\n}\n\n// value access\nnew Plant().species = 'ferns';\n\n")),Object(s.b)("h3",{id:"generics"},"Generics"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"class Greeter<T> {\n  greeting: T;\n\n  constructor(message: T) {\n    this.greeting = message;\n  }\n}\n \nlet greeter = new Greeter<string>('Hello, world');\n\n// default parameters\nclass Greeter<T = any> {\n  greeting: T;\n}\n\n")),Object(s.b)("h3",{id:"other-constructs"},"Other constructs"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),'// type assertions\nlet len: number = (input as string).length;\nlet len: number = (<string> input).length;\n \n// optional parameters\ninterface User {\n  name: string, // can be null but not undefined\n  age?: number // can be null or undefined\n}\n\n// optional chaining (if foo is undefined, it will not throw an error)\nlet x = foo?.bar.baz();\n\n// nullish coalescing\nlet x = foo ?? bar; // if foo is undefined, assign bar \n\n// destructuring declaration (will take 3 attributes from an output)\nconst { x, y, z } = calcPosition();\n\n\n// dynamic keys\n{ [key: string]: Object[] }\n \n// type aliases\ntype Name = string | string[]\n// function alias\ntype MyFunction = (param1: number, param2: number) => string;\n\n// types for polymorphism\ntype Shape = Square | Rectangle | Circle;\n \n// function types\nfunction getUser(callback: (user: User) => any) { callback({...}) }\n \n// default parameters\nconst greet = (name: string = \'Robert\') => console.log(`Hello, ${name}`);\n \n// array destructuring\nconst testResults: number[] = [3.89, 2.99, 1.38];\nconst [result1, result2, result3] = testResults;\n\n// arrow functions\nconst myMultiply: (val1: number, val2: number) => number;\n \nlet myFunction = (val1: number, val2: number) => {\n  return val1 + val2;\n}\n \n// object types\nlet userData: { name: string, age: number } = {\n  name: \'Max\'\n};\n \n// rest operator\nfunction displayTags(targetElement: HTMLElement, ...tags: string[]) { \n  for(let i in tags) { // do something here }  \n}\n\ndisplayTags(myElement, "tag1", "tag2", "tag3");\n\n// variable swap\nlet x = 1;\nlet y = 2;\n[x, y] = [y, x];\n\n// && and || declaration operators\nlet ent: Entity | null;\nlet name = ent && ent.name;  // name is of type string | null\nlet ent2 = ent || { name: "test" };  // ent will always contain name\n\n// spread operator (good for shallow copy)\nlet copy = { ...original };\nlet merged = { ...foo, ...bar, ...baz };\n\n// type as interface\ntype Point = {\n  x: number;\n  y: number;\n}\n\n')),Object(s.b)("h3",{id:"asynchronous-operations"},"Asynchronous operations"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"const downloadData = async () => {\n  const customers = await fetchCustomers(url);\n  const result = await loadCustomers(customers);\n  return result;\n};\n\nasync function printDelayed(elements: string[]) {\n  for (const element of elements) {\n      await delay(400);\n      console.log(element);\n  }\n}\n")),Object(s.b)("h3",{id:"context-binding"},"Context binding"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"class ContextExample {\n  private x = 0;\n \n  constructor() {\n    setTimeout(this.arrowFunc, 1000);\n    setTimeout(this.regularFunc, 1000); // will not work\n    setTimeout(this.regularFunc.bind(this), 1000);\n  }\n \n  private arrowFunc = () => {\n    this.x = 5;\n  }\n\n  private regularFunc() {\n    this.x = 5;\n  }\n}\n")),Object(s.b)("h3",{id:"exports-and-imports"},"Exports and Imports"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"export const myConst = 12345; // simple export\n \n// default exports\nexport default calculateRectangle = (width: number, length: number) => {\n  return width * length;\n}\n \n// alternative\nconst calculateRectangle2 = (width: number, length: number) => { ... }\nexport default calculateRectangle2; // exported function\nexport default new MyClass(); // exported instance\nexport { read, write, standardOutput as stdout } from './inout'; // re-export\n \n// import\nimport { PI, calculateCircumference } from './src/circle' // imports selected types\nimport calculateRectangle from './src/rectangle' // imports everything with an alias\nimport * as flash from './flash-message'; // imports everything\n")),Object(s.b)("h3",{id:"modules"},"Modules"),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-typescript"}),"// services/tag-service/service.ts\n// use default export for classes and respective export for utilities\nexport default TagService {\n  ... \n}\n//=======================================================\n// services/index.ts\n// import all services\nimport TagService from './tag-service/service';\nimport LabelService from './label-service/service';\n...\n\n// export them for other folders\nexport { TagService, LabelService }\n\n// and import them from other folders\n//=======================================================\n// any ts file outside services folder\nimport { TagService, LabelService } from './services'; // no need to write /index \n")))}u.isMDXComponent=!0}}]);