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,
};
  1. Key Remapping in Mapped Types

  1. Recursive Conditional Types

  1. Checked Indexed Accesses (--noUncheckedIndexedAccess)

  1. paths without baseUrl

  1. checkJs Implies allowJs

  1. React 17 JSX Factories

  1. 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, 禁止转载 ️,侵权必究️!


TypeScript 4.1 Quick Start Tutorials的更多相关文章

  1. webpack——Modules && Hot Module Replacement

    blog:JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 官网链接: Modules 官网链接:Hot Module Rep ...

  2. 没有JavaScript的基础,我可以学习Angular2吗?

    Can I learn and understand Angular2 without understanding JavaScript? 没有JavaScript基础我能学习和理解Angular2吗 ...

  3. ROS_Kinetic_x 目前已更新的常用機器人資料 rosbridge agvs pioneer_teleop nao TurtleBot

    Running Rosbridge Description: This tutorial shows you how to launch a rosbridge server and talk to ...

  4. TurtleBot教程

    TurtleBot TurtleBot combines popular off-the-shelf robot components like the iRobot Create, Yujin Ro ...

  5. [转]TypeScript Quick start

    本文转自:http://www.typescriptlang.org/docs/tutorial.html Quick start Get started with a simple TypeScri ...

  6. TypeScript 4.x Tutorials

    TypeScript 4.x Tutorials TypeScript 4.x 最新教程 https://typescript-4x-tutorials.xgqfrms.xyz/ https://gi ...

  7. AngularJS2.0 quick start——其和typescript结合需要额外依赖

    AngularJS2 发布于2016年9月份,它是基于ES6来开发的. 运行条件! 由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES ...

  8. SlickUpload Quick Start Guide

    Quick Start Guide The SlickUpload quick start demonstrates how to install SlickUpload in a new or ex ...

  9. QUICK START GUIDE

    QUICK START GUIDE This page is a guide aimed at helping anyone set up a cheap radio scanner based on ...

随机推荐

  1. Ubuntu安装记录

    好吧,这成功地让我想起了那些边肯红薯边黑苹果的早晨······ 本人纯属Windows用腻,后期请大佬多多指教 前面因为没U盘而碰壁的内容在此不说,接下来因为太兴奋,关于安装U盘制作没记录什么.最终, ...

  2. GIT常用命令:

    1.安装好Git之后,点击鼠标右键即可看到有Git bush选项,点击即可进入Git命令行操作. 2.使用命令: git  config  --global user.name "lyh&q ...

  3. yoctoproject 地址

    第一次接触到yoctop. 在这里分享yoctoproject地址 https://www.yoctoproject.org/docs/2.3.3/ref-manual/ref-manual.html ...

  4. Maven 依赖机制

    概述 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级.让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要做什么? 传统方式 访问 ...

  5. 【LinuxShell】ps 命令浅析

    前言 Linux上查看进程状态最常用的命令,本文对 ps 命令参数以及状态做一下简单介绍. 参数 ps a 显示现行终端机下的所有程序,包括其他用户的程序. ps -A 显示所有程序. ps c 列出 ...

  6. HTTPS是怎么保证数据安全传输的?

    前言 关于HTTPS的连接过程,也是老生常谈的话题了. 其中涉及到的数字证书.电子签名.SSL/TLS.对称加密.非对称加密的问题总是让人摸不清头脑,不知道怎么回答. 今天就和大家再熟悉熟悉这其中千丝 ...

  7. mysqld_exporter的源码分析和定制化(单个mysqld_exporter监控多个数据库实例)

    mysqld_exporter是prometheus官方提供的用于监控mysql运行状态的exporter.其相关信息可以参考:https://github.com/prometheus/mysqld ...

  8. JTS Geometry

    JTS Geometry关系判断和分析 JTS Geometry关系判断和分析 1.关系判断 1.1实例 2.关系分析 2.1实例 JTS(Geometry) JTS Geometry关系判断和分析 ...

  9. msf+cobaltstrike联动(二):把cs中的机器spwan给msf

    前提:CS已经获取到session,可以进入图形化管理机器,现在需要使用msf进行进一步渗透,需要msf的metepreter. 开启msf msf设置监听 msf > use exploit/ ...

  10. jvm学习第二天

    0.垃圾回收概述 1.什么是垃圾,怎么判断? 1.1引用计数法 含义 顾名思义,此种算法会在每一个对象上记录这个对象被引用的次数,只要有任何一个对象引用了此对象,这个对象的计数器就+1,取消对这个对象 ...