TypeScript 4.1 Quick Start Tutorials
TypeScript 4.1 Quick Start Tutorials
TypeScript 4.1 快速上手教程
https://typescript-41-quick-start-tutorials.xgqfrms.xyz
- 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,
};
- Key Remapping in Mapped Types
- Recursive Conditional Types
- Checked Indexed Accesses (--noUncheckedIndexedAccess)
- paths without baseUrl
- checkJs Implies allowJs
- React 17 JSX Factories
- Editor Support for the JSDoc @see Tag
Breaking Changes
refs
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html
##
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有️xgqfrms, 禁止转载 ️,侵权必究️!
TypeScript 4.1 Quick Start Tutorials的更多相关文章
- webpack——Modules && Hot Module Replacement
blog:JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 官网链接: Modules 官网链接:Hot Module Rep ...
- 没有JavaScript的基础,我可以学习Angular2吗?
Can I learn and understand Angular2 without understanding JavaScript? 没有JavaScript基础我能学习和理解Angular2吗 ...
- 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 ...
- TurtleBot教程
TurtleBot TurtleBot combines popular off-the-shelf robot components like the iRobot Create, Yujin Ro ...
- [转]TypeScript Quick start
本文转自:http://www.typescriptlang.org/docs/tutorial.html Quick start Get started with a simple TypeScri ...
- TypeScript 4.x Tutorials
TypeScript 4.x Tutorials TypeScript 4.x 最新教程 https://typescript-4x-tutorials.xgqfrms.xyz/ https://gi ...
- AngularJS2.0 quick start——其和typescript结合需要额外依赖
AngularJS2 发布于2016年9月份,它是基于ES6来开发的. 运行条件! 由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES ...
- SlickUpload Quick Start Guide
Quick Start Guide The SlickUpload quick start demonstrates how to install SlickUpload in a new or ex ...
- QUICK START GUIDE
QUICK START GUIDE This page is a guide aimed at helping anyone set up a cheap radio scanner based on ...
随机推荐
- 前端面试之JavaScript中数组的方法!【残缺版!!】
前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...
- Vue基础之生命周期函数[残缺版]!
Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...
- linux机器查看几个网卡以及型号
1.今天收到一台服务器,上去验收查看到机器有6个网卡,有点蒙,记录下查询网卡信息经过 2.一直不明白enp3s0f1这网口咋来的,去网上搜了下这个命名的基本是外插网卡板卡, 3.然后查看这个所有端口信 ...
- NAT模式、路由模式、桥接模式的区别
NAT模式 NAT模式概述 NAT是"Network Address Translation"的缩写,中文意思是"网络地址转换",它允许一个整体机构以一个公用I ...
- 在Centos7上安装Python+Selenium+Firefox+Geckodriver
1.事先准备好Centos7的系统 Centos系统是CentOS Linux release 7.4.1708 (Core) 查看Centos内核版本命令cat /etc/centos-releas ...
- tarjan 复习笔记 割点与桥
定义分析 给定一个无向连通图\(G=(V,E)\) 对于\(x\in Y\),如果删去\(x\)及与\(x\)相连的边后,\(G\)分裂为两个或者两个以上的不连通子图,那么称\(x\)为\(G\)的割 ...
- Excel 一张表最多能装下多少行多少列数据?
一个工作簿可以装下255张,那么每张工作表可以装下多少行多少列数据呢? 1.任意打开或新建一个Excel文档. 2.在文档中,找到其左上角的"文件"按钮,点击选择"选项& ...
- 不会开发的你也能管理好企业漏洞,开源免费工具:洞察(insight II)
前言 公司刚开始建设安全管理时,都是从一片混沌开始的,资源总是不够的,我们每个做安全的人员,又要会渗透,又要抓制度,还得管理各种漏洞.在管理楼栋是,我相信大家都遇到过以下几个问题: 漏洞提交太多,自己 ...
- 二:SpringBoot-配置Log4j2,实现不同环境日志打印
SpringBoot-配置Log4j2,实现不同环境日志打印 日志打印之外观模式 1.日志配置 2.Log4j2的配置文件 3.简单的测试程序 日志打印之外观模式 每一种日志框架都有自己单独的API, ...
- Spring Cloud Config、Apollo、Nacos配置中心选型及对比
Spring Cloud Config.Apollo.Nacos配置中心选型及对比 1.Nacos 1.1 Nacos主要提供以下四大功能 2.Spring Cloud Config 3.Apollo ...