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. 前端面试之JavaScript中数组的方法!【残缺版!!】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  2. Vue基础之生命周期函数[残缺版]!

    Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...

  3. linux机器查看几个网卡以及型号

    1.今天收到一台服务器,上去验收查看到机器有6个网卡,有点蒙,记录下查询网卡信息经过 2.一直不明白enp3s0f1这网口咋来的,去网上搜了下这个命名的基本是外插网卡板卡, 3.然后查看这个所有端口信 ...

  4. NAT模式、路由模式、桥接模式的区别

    NAT模式 NAT模式概述 NAT是"Network Address Translation"的缩写,中文意思是"网络地址转换",它允许一个整体机构以一个公用I ...

  5. 在Centos7上安装Python+Selenium+Firefox+Geckodriver

    1.事先准备好Centos7的系统 Centos系统是CentOS Linux release 7.4.1708 (Core) 查看Centos内核版本命令cat /etc/centos-releas ...

  6. tarjan 复习笔记 割点与桥

    定义分析 给定一个无向连通图\(G=(V,E)\) 对于\(x\in Y\),如果删去\(x\)及与\(x\)相连的边后,\(G\)分裂为两个或者两个以上的不连通子图,那么称\(x\)为\(G\)的割 ...

  7. Excel 一张表最多能装下多少行多少列数据?

    一个工作簿可以装下255张,那么每张工作表可以装下多少行多少列数据呢? 1.任意打开或新建一个Excel文档. 2.在文档中,找到其左上角的"文件"按钮,点击选择"选项& ...

  8. 不会开发的你也能管理好企业漏洞,开源免费工具:洞察(insight II)

    前言 公司刚开始建设安全管理时,都是从一片混沌开始的,资源总是不够的,我们每个做安全的人员,又要会渗透,又要抓制度,还得管理各种漏洞.在管理楼栋是,我相信大家都遇到过以下几个问题: 漏洞提交太多,自己 ...

  9. 二:SpringBoot-配置Log4j2,实现不同环境日志打印

    SpringBoot-配置Log4j2,实现不同环境日志打印 日志打印之外观模式 1.日志配置 2.Log4j2的配置文件 3.简单的测试程序 日志打印之外观模式 每一种日志框架都有自己单独的API, ...

  10. Spring Cloud Config、Apollo、Nacos配置中心选型及对比

    Spring Cloud Config.Apollo.Nacos配置中心选型及对比 1.Nacos 1.1 Nacos主要提供以下四大功能 2.Spring Cloud Config 3.Apollo ...