TypeScript 4.1 Quick Start Tutorials

TypeScript 4.1 Quick Start Tutorials 🚀

TypeScript 4.1 快速上手教程 🚀

https://typescript-41-quick-start-tutorials.xgqfrms.xyz

1. Template Literal Types

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-12-10
 * @modified
 *
 * @description Template Literal Types / 模板文字类型
 * @augments
 * @example
 * @link https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html
 * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
 *
 */

const log = console.log;

function setVerticalAlignment(color: "top" | "middle" | "bottom") {
  log(`color =`, color);
  // ...
}

setVerticalAlignment(`top`);
// setVerticalAlignment(`left`);
// Argument of type '"left"' is not assignable to parameter of type '"top" | "middle" | "bottom"'.ts(2345)


type NewOptions = {
  [K in "noImplicitAny" | "strictNullChecks" | "strictFunctionTypes"]?: boolean;
};

// same as
type Options = {
  noImplicitAny?: boolean,
  strictNullChecks?: boolean,
  strictFunctionTypes?: boolean
};

type World = "world";
type Greeting = `hello ${World}`;
// type Greeting = "hello world"

type Color = "red" | "blue";
type Quantity = "one" | "two";

type SeussFish = `${Quantity | Color} fish`;
// type SeussFish = "one fish" | "two fish" | "red fish" | "blue fish"

type VerticalAlignment = "top" | "middle" | "bottom";
type HorizontalAlignment = "left" | "center" | "right";

// Takes
//   | "top-left"    | "top-center"    | "top-right"
//   | "middle-left" | "middle-center" | "middle-right"
//   | "bottom-left" | "bottom-center" | "bottom-right"

declare function setAlignment(value: `${VerticalAlignment}-${HorizontalAlignment}`): void;

setAlignment("top-left");
// setAlignment("top-middle");
// Argument of type '"top-middle"' is not assignable to parameter of type '"top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right"'.

type PropEventSource<T> = {
  on(eventName: `${string & keyof T}Changed`, callback: () => void): void;
};

/// Create a "watched object" with an 'on' method, so that you can watch for changes to properties.
declare function makeWatchedObject<T>(obj: T): T & PropEventSource<T>;

let person = makeWatchedObject({
  firstName: "xgqfrms",
  age: 18,
  location: "shanghai",
});

person.on("firstNameChanged", () => {
  console.log(`firstName was changed!`);
});

// person.on("firstName", () => {});
// Argument of type '"firstName"' is not assignable to parameter of type '"firstNameChanged" | "ageChanged" | "locationChanged"'.

// person.on("frstNameChanged", () => {});
// Argument of type '"frstNameChanged"' is not assignable to parameter of type '"firstNameChanged" | "ageChanged" | "locationChanged"'.

type PropEventSource2<T> = {
  on<K extends string & keyof T> (eventName: `${K}Changed`, callback: (newValue: T[K]) => void ): void;
};

declare function makeWatchedObject2<T>(obj: T): T & PropEventSource2<T>;

let person2 = makeWatchedObject2({
  firstName: "xgqfrms",
  age: 18,
  location: "shanghai",
});

// works! 'newName' is typed as 'string'
person2.on("firstNameChanged", newName => {
  // 'newName' has the type of 'firstName'
  console.log(`new name is ${newName.toUpperCase()}`);
});

// works! 'newAge' is typed as 'number'
person2.on("ageChanged", newAge => {
  if (newAge < 0) {
      console.log("warning! negative age");
  }
})

type EnthusiasticGreetingUp<T extends string> = `${Uppercase<T>}`
type EnthusiasticGreetingLow<T extends string> = `${Lowercase<T>}`

type HELLO = EnthusiasticGreetingUp<"hello">;
type hello = EnthusiasticGreetingLow<"HELLO">;

let HOT: HELLO = `HELLO`;
let hot: hello = `hello`;

log(`HELLO =`, HOT)
log(`hello =`, hot)

export default setVerticalAlignment;

export {
  setVerticalAlignment,
  setAlignment,
  NewOptions,
  Options,
  Greeting,
  SeussFish,
  HELLO,
  hello,
};

2. Key Remapping in Mapped Types

3. Recursive Conditional Types

4. Checked Indexed Accesses (--noUncheckedIndexedAccess)

5. paths without baseUrl

6. checkJs Implies allowJs

7. React 17 JSX Factories

8. Editor Support for the JSDoc @see Tag

Breaking Changes

---

refs

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html

##

https://github.com/microsoft/TypeScript-Website/blob/v2/packages/documentation/copy/en/release-notes/TypeScript 4.1.md

https://raw.githubusercontent.com/microsoft/TypeScript-Website/v2/packages/documentation/copy/en/release-notes/TypeScript 4.1.md

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---