1

npm install -D typescript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  ​
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const p = new Person("Ron");
p.greet();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log("LOG: Entering method.");
    console.log(`Hello, my name is ${this.name}.`);
    console.log("LOG: Exiting method.")
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function loggedMethod(originalMethod: any, _context: any) {

  function replacementMethod(this: any, ...args: any[]) {
    console.log("LOG: Entering method.")
    const result = originalMethod.call(this, ...args);
    console.log("LOG: Exiting method.")
    return result;
  }

  return replacementMethod;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

1
2
3
4
5

// Output:
//
// LOG: Entering method.
// Hello, my name is Ron.
// LOG: Exiting method.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function loggedMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);

  function replacementMethod(this: any, ...args: any[]) {
    console.log(`LOG: Entering method '${methodName}'.`)
    const result = originalMethod.call(this, ...args);
    console.log(`LOG: Exiting method '${methodName}'.`)
    return result;
  }

  return replacementMethod;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
    this.greet = this.greet.bind(this);
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
    this.greet = this.greet.bind(this);
  }

  greet = () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

1
2
3
4

const greet = new Person("Ron").greet;

// We don't want this to fail!
greet();

1
2
3
4
5
6
7
8
9

function bound(originalMethod: any, context: ClassMethodDecoratorContext) {
  const methodName = context.name;
  if (context.private) {
    throw new Error(`'bound' cannot decorate private properties like ${methodName as string}.`);
  }
  context.addInitializer(function () {
    this[methodName] = this[methodName].bind(this);
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
 
  @bound
  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const p = new Person("Ron");
const greet = p.greet;

// Works!
greet();

1
2
3

@bound @loggedMethod greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function loggedMethod(headMessage = "LOG:") {
  return function actualDecorator(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = String(context.name);

    function replacementMethod(this: any, ...args: any[]) {
      console.log(`${headMessage} Entering method '${methodName}'.`)
      const result = originalMethod.call(this, ...args);
      console.log(`${headMessage} Exiting method '${methodName}'.`)
      return result;
    }

    return replacementMethod;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  @loggedMethod("")
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const p = new Person("Ron");
p.greet();

// Output:
//
// Entering method 'greet'.
// Hello, my name is Ron.
// Exiting method 'greet'.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// allowed
@register export default class Foo {
  // ...
}

// also allowed
export default @register class Bar {
  // ...
}

// error - before *and* after is not allowed
@before export @after class Bar {
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function loggedMethod<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
  const methodName = String(context.name);

  function replacementMethod(this: This, ...args: Args): Return {
    console.log(`LOG: Entering method '${methodName}'.`)
    const result = target.call(this, ...args);
    console.log(`LOG: Exiting method '${methodName}'.`)
    return result;
  }

  return replacementMethod;
}

1
2
3
4
5
6
7

type HasNames = { readonly names: string[] };
function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
  return arg.names;
}

// Inferred type: string[]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"]});

1
2
3
4
5
6
7
8
9

// The type we wanted:
//   readonly ["Alice", "Bob", "Eve"]
// The type we got:
//   string[]
const names1 = getNamesExactly({ names: ["Alice", "Bob", "Eve"]});

// Correctly gets what we wanted:
//   readonly ["Alice", "Bob", "Eve"]
const names2 = getNamesExactly({ names: ["Alice", "Bob", "Eve"]} as const);

1
2
3
4
5
6
7
8
9

type HasNames = { names: readonly string[] };
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
//                       ^^^^^
  return arg.names;
}

// Inferred type: readonly ["Alice", "Bob", "Eve"]
// Note: Didn't need to write 'as const' here
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });

1
2
3
4

declare function fnBad<const T extends string[]>(args: T): void;

// 'T' is still 'string[]' since 'readonly ["a", "b", "c"]' is not assignable to 'string[]'
fnBad(["a", "b" ,"c"]);

1
2
3
4

declare function fnGood<const T extends readonly string[]>(args: T): void;

// T is readonly ["a", "b", "c"]
fnGood(["a", "b" ,"c"]);

1
2
3
4
5

declare function fnGood<const T extends readonly string[]>(args: T): void;
const arr = ["a", "b" ,"c"];

// 'T' is still 'string[]'-- the 'const' modifier has no effect here
fnGood(arr);

1
2
3
4
5
6
7
8

// packages/front-end/src/tsconfig.json
{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../lib",
    // ...
  }
}

1
2
3
4
5
6
7

// tsconfig.base.json
{
  "extends": "@tsconfig/strictest/tsconfig.json",
  "compilerOptions": {
    // ...
  }
}

1
2
3
4
5
6

{
  "extends": ["a", "b", "c"],
  "compilerOptions": {
    // ...
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// tsconfig1.json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

// tsconfig2.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

// tsconfig.json
{
  "extends": ["./tsconfig1.json", "./tsconfig2.json"],
  "files": ["./index.ts"]
}

1
2
3
4
5
6
7
8

// packages/front-end/src/tsconfig.json
{
  "extends": ["@tsconfig/strictest/tsconfig.json", "../../../tsconfig.base.json"],
  "compilerOptions": {
    "outDir": "../lib",
    // ...
  }
}

1
2
3
4

enum E {
  Foo = 10,
  Bar = 20,
}

1
2
3
4

function takeValue(e: E) {}

takeValue(E.Foo); // works
takeValue(123); // error!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// Color is like a union of Red | Orange | Yellow | Green | Blue | Violet
enum Color {
  Red, Orange, Yellow, Green, Blue, /* Indigo */, Violet
}

// Each enum member has its own type that we can refer to!
type PrimaryColor = Color.Red | Color.Green | Color.Blue;

function isPrimaryColor(c: Color): c is PrimaryColor {
  // Narrowing literal types can catch bugs.
  // TypeScript will error here because
  // we'll end up comparing 'Color.Red' to 'Color.Green'.
  // We meant to use ||, but accidentally wrote &&.
  return c === Color.Red && c === Color.Green && c === Color.Blue;
}

1
2
3

enum E {
  Blah = Math.random()
}

1
2
3
4

// entry.mjs
import * as utils from "./utils"; //  wrong - we need to include the file extension.

import * as utils from "./utils.mjs"; //  works

1
2
3
4
5
6

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler"
  }
}

1
2
3

.cookie-banner {
  display: none;
}

1
2
3
4

declare const css: {
  cookieBanner: string;
};
export default css;

1
2
3

import styles from "./app.css";

styles.cookieBanner; // string

1
2
3
4
5
6
7

{
  "compilerOptions": {
    "target": "es2022",
    "moduleResolution": "bundler",
    "customConditions": ["my-condition"]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  // ...
  "exports": {
    ".": {
      "my-condition": "./foo.mjs",
      "node": "./bar.mjs",
      "import": "./baz.mjs",
      "require": "./biz.mjs"
    }
  }
}

1
2
3
4
5

import { Car } from "./car";

export function drive(car: Car) {
  // ...
}

1
2
3

export function drive(car) {
  // ...
}

1

export { Car } from "./car";

1
2
3
4
5
6

// This statement can be dropped entirely in JS output
import type * as car from "./car";

// The named import/export 'Car' can be dropped in JS output
import { type Car } from "./car";
export { type Car } from "./car";

1
2
3
4
5
6
7
8

// Erased away entirely.
import type { A } from "a";

// Rewritten to 'import { b } from "bcd";'
import { b, type c, type d } from "bcd";

// Rewritten to 'import {} from "xyz";'
import { type xyz } from "xyz";

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// models/vehicles.ts
export class Spaceship {
 // ...
}

// models/index.ts
export type * as vehicles from "./vehicles";

// main.ts
import { vehicles } from "./models";

function takeASpaceship(s: vehicles.Spaceship) {
 // ok - `vehicles` only used in a type position
}

function makeASpaceship() {
 return new vehicles.Spaceship();
 //         ^^^^^^^^
 // 'vehicles' cannot be used as a value because it was exported using 'export type'.
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

interface CompilerOptions {
  strict?: boolean;
  outDir?: string;
  // ...
}

interface ConfigSettings {
  compilerOptions?: CompilerOptions;
  extends?: string | string[];
  // ...
}

let myConfigSettings = {
  compilerOptions: {
    strict: true,
    outDir: "../lib",
    // ...
  },

  extends: [
    "@tsconfig/strictest/tsconfig.json",
    "../../../tsconfig.base.json"
  ],

} satisfies ConfigSettings;

1
2
3

declare function resolveConfig(configPath: string): CompilerOptions;

let inheritedConfigs = myConfigSettings.extends.map(resolveConfig);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// @ts-check

/**
 * @typedef CompilerOptions
 * @prop {boolean} [strict]
 * @prop {string} [outDir]
 */

/**
 * @satisfies {CompilerOptions}
 */
let myCompilerOptions = {
  outdir: "../lib",
  // ~~~~~~ oops! we meant outDir
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// @ts-check

/**
 * @typedef CompilerOptions
 * @prop {boolean} [strict]
 * @prop {string} [outDir]
 */

/**
 * @typedef ConfigSettings
 * @prop {CompilerOptions} [compilerOptions]
 * @prop {string | string[]} [extends]
 */


/**
 * @satisfies {ConfigSettings}
 */
let myConfigSettings = {
  compilerOptions: {
    strict: true,
    outDir: "../lib",
  },
  extends: [
    "@tsconfig/strictest/tsconfig.json",
    "../../../tsconfig.base.json"
  ],
};

let inheritedConfigs = myConfigSettings.extends.map(resolveConfig);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let myConfigSettings = /** @satisfies {ConfigSettings} */ ({
  compilerOptions: {
    strict: true,
    outDir: "../lib",
  },
  extends: [
    "@tsconfig/strictest/tsconfig.json",
    "../../../tsconfig.base.json"
  ],
});

1
2
3

compileCode(/** @satisfies {ConfigSettings} */ ({
  // ...
}));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// Our overloads:
function printValue(str: string): void;
function printValue(num: number, maxFractionDigits?: number): void;

// Our implementation:
function printValue(value: string | number, maximumFractionDigits?: number) {
  if (typeof value === "number") {
    const formatter = Intl.NumberFormat("en-US", {
      maximumFractionDigits,
    });
    value = formatter.format(value);
  }

  console.log(value);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// @ts-check

/**
 * @overload
 * @param {string} value
 * @return {void}
 */

/**
 * @overload
 * @param {number} value
 * @param {number} [maximumFractionDigits]
 * @return {void}
 */

/**
 * @param {string | number} value
 * @param {number} [maximumFractionDigits]
 */
function printValue(value, maximumFractionDigits) {
  if (typeof value === "number") {
    const formatter = Intl.NumberFormat("en-US", {
      maximumFractionDigits,
    });
    value = formatter.format(value);
  }

  console.log(value);
}

1
2
3
4
5
6

// all allowed
printValue("hello!");
printValue(123.45);
printValue(123.45, 2);

printValue("hello!", 123); // error!

1

tsc --build -p ./my-project-dir

1

tsc --build -p ./my-project-dir --declaration

1
2
3
4
5

import {
  Toggle,
  freeze,
  toBoolean,
} from "./utils";

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

{
  "typescript.unstable": {
  // Should sorting be case-sensitive? Can be:
  // - true
  // - false
  // - "auto" (auto-detect)
  "organizeImportsIgnoreCase": "auto",

  // Should sorting be "ordinal" and use code points or consider Unicode rules? Can be:
  // - "ordinal"
  // - "unicode"
  "organizeImportsCollation": "ordinal",

  // Under `"organizeImportsCollation": "unicode"`,
  // what is the current locale? Can be:
  // - [any other locale code]
  // - "auto" (use the editor's locale)
  "organizeImportsLocale": "en",

  // Under `"organizeImportsCollation": "unicode"`,
  // should upper-case letters or lower-case letters come first? Can be:
  // - false (locale-specific)
  // - "upper"
  // - "lower"
  "organizeImportsCaseFirst": false,

  // Under `"organizeImportsCollation": "unicode"`,
  // do runs of numbers get compared numerically (i.e. "a1" < "a2" < "a100")? Can be:
  // - true
  // - false
  "organizeImportsNumericCollation": true,

  // Under `"organizeImportsCollation": "unicode"`,
  // do letters with accent marks/diacritics get sorted distinctly
  // from their "base" letter (i.e. is é different from e)? Can be
  // - true
  // - false
  "organizeImportsAccentCollation": true
  },
  "javascript.unstable": {
    // same options valid here...
  },
}

1
2
3

function func(ns: number | string) {
  return ns * 4; // Error, possible implicit coercion
}

1
2
3

function func(ns: number | string) {
  return ns > 4; // Now also an error
}

1
2
3

function func(ns: number | string) {
  return +ns > 4; // OK
}

1
2
3
4
5
6
7
8

enum SomeEvenDigit {
  Zero = 0,
  Two = 2,
  Four = 4
}

// Now correctly an error
let m: SomeEvenDigit = 1;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

enum Letters {
  A = "a"
}
enum Numbers {
  one = 1,
  two = Letters.A
}

// Now correctly an error
const t: number = Numbers.two;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

export declare const inject:
  (entity: any) =>
    (target: object, key: string | symbol, index?: number) => void;

export class Foo {}

export class C {
  constructor(@inject(Foo) private x: any) {
  }
}