paidaxing-web/you-don-t-know-ts

🔥🔥🔥 这是一个专注研究Typescript的网站，🎖🎖🎖在这里你可以全面深入学习Typescript相关知识,通过动画方式讲解TS，还有很多常见问题解答。你还可以挑战相应的题目，快来学习吧。

Collection of TypeScript type challenges

目录

Typescript 常用项目技巧汇总

1.TypeScript 泛型中的 K、T 和 V 是什么？

以动画的形式，让你弄清楚 TypeScript 泛型中的 K、T、V 等变量！

2.轻松理解 TypeScript 通用实用程序类型

帮助您更好地理解内置实用程序类型的工作原理。

3.TypeScript 中的类型到底是什么？

掌握 TypeScript 中的类型并了解 TypeScript 系统。让您的 TypeScript 技能更进一步。

4.不再对 TypeScript 的类型和接口感到困惑

用动画来解释。掌握 Type 和 Interface 的异同，了解它们的使用场景。

5.掌握 TypeScript Keyof 类型运算符

以动画的形式，让你弄清楚 keyof 运算符在 TypeScript 内置实用类型中的作用。

6.TypeScript Typeof 运算符的 5 个非常有用的技巧

大多数人在学习 TypeScript 时都会遇到的一个问题，你能想到多少种解决方案？

7.如何在 TypeScript 中定义具有未知结构的对象类型

TypeScript 中函数重载的简单解释，帮助您理解重载签名和实现签名。

基础回顾：typescript 入门教程

• 一、typescript 是什么?

  • 1.1 TypeScript 与 JavaScript 的区别
  • 1.2 获取 TypeScript
  • 1.3 典型 TypeScript 工作流程
  • 1.4 Typescript 初次体验

• 二、typescript 基础类型

  • 2.1 Boolean 类型
  • 2.2 Number 类型
  • 2.3 String 类型
  • 2.4 Symbol 类型
  • 2.5 Array 类型
  • 2.6 Enum 类型
    • 2.6.1 数字枚举
    • 2.6.2 字符串枚举
    • 2.6.3 常量枚举
    • 2.6.4 异构枚举
  • 2.7 Any 类型
  • 2.8 Unknown 类型
  • 2.9 Tuple 类型
  • 2.10 Void 类型
  • 2.11 Null 和 undefined 类型
  • 2.12 object、Object 和{} 类型
    • 2.12.1 object 类型
    • 2.12.2 Object 类型
    • 2.12.3 {}类型
  • 2.13 Never 类型

• 三、typescript 断言

  • 3.1 类型断言
    • 3.1.1.“尖括号” 语法
    • 3.1.2.as 语法
  • 3.2 非空断言
    • 3.2.1.忽略 undefined 和 null 类型
    • 3.2.2.调用函数时忽略 undefined 类型
  • 3.3 确定赋值断言

• 四、类型守卫

  • 4.1 in 关键字
  • 4.2 typeof 关键字
  • 4.3 instanceof 关键字
  • 4.4 自定义类型保护的类型谓词

• 五、联合类型和类型别名

  • 5.1 联合类型
  • 5.2 可辨识联合
    • 5.2.1.可辨识
    • 5.2.2.联合类型
    • 5.2.3.类型守卫
  • 5.3 类型别名

• 六、交叉类型

  • 6.1 同名基础类型属性的合并
  • 6.2 同名非基础类型属性的合并

• 七、typescript 函数

  • 7.1 TypeScript 函数与 JavaScript 函数的区别
  • 7.2 箭头函数
    • 7.2.1.常见语法
    • 7.2.2.使用示例
  • 7.3 参数类型和返回类型
  • 7.4 函数类型
  • 7.5 可选参数及默认参数
  • 7.6 剩余参数
  • 7.7 函数重载

• 八、typescript 数组

  • 8.1 数组解构
  • 8.2 数组展开运算符
  • 8.3 数组遍历

• 九、typescript 对象

  • 9.1 对象解构
  • 9.2 对象展开运算符

• 十、typescript 接口

  • 10.1 对象的形状
  • 10.2 可选 | 只读属性
  • 10.3 任意属性
  • 10.4 接口与类型别名的区别
    • 10.4.1.Objects/Functions
    • 10.4.2.Other Types
    • 10.4.3.Extend
    • 10.4.4.Implements
    • 10.4.5.Declaration merging

• 十一、typescript 类

  • 11.1 类的属性与方法
  • 11.2 ECMAScript 私有字段
  • 11.3 访问器
  • 11.4 类的继承
  • 11.5 抽象类
  • 11.6 类方法重载

• 十二、typescript 泛型

  • 12.1 泛型语法
  • 12.2 泛型接口
  • 12.3 泛型类
  • 12.4 泛型工具类型
    • 12.4.1.typeof
    • 12.4.2.keyof
    • 12.4.3.in
    • 12.4.4.infer
    • 12.4.5.extends
    • 12.4.6.Partial

• 十三、装饰器

  • 13.1 装饰器是什么
  • 13.2 装饰器的分类
  • 13.3 类装饰器
  • 13.4 属性装饰器
  • 13.5 方法装饰器
  • 13.6 参数装饰器

• 十四、typescript4.0 特性

  • 14.1 构造函数的类属性推断
  • 14.2 标记的元组元素

• 十五、编译上下文

  • 15.1 tsconfig.json 的作用
  • 15.2 tsconfig.json 重要字段
  • 15.3 compilerOptions 选项

• 十六、typescript 开发辅助函数

  • 16.1 TypeScript Playground
  • 16.2 TypeScript UML Playground
  • 16.3 JSON TO TS
  • 16.4 Schemats
  • 16.5 TypeScript AST Viewer
  • 16.6 TypeDoc
  • 16.7 TypeScript ESLint

• 十七、参考工具

第一章:Type Manipulation 类型操作

• 1.1 范型
• 1.2keyof
• 1.3typeof
• 1.4 条件类型
• 1.5 映射类型 Mapped-Type
• 1.6 模版文字类型

第二章:Utility Type

• 2.1 Partial <Type>
• 2.2 Required<Type>
• 2.3 Readonly<Type>
• 2.4 Record<Type>
• 2.5 Exclude<UnionType, ExcludedMembers>
• 2.6 Extrac<Type,Union>
• 2.7 Pick<Type,Keys>
• 2.8 Omit<Type,Keys>
• 2.9 NonNullable<Type>
• 2.10 Parameters<Type>
• 2.11 ReturnType<Type>
• 2.12 Uppercase<StringType>
• 2.13 Lowercase<StringType>
• 2.14 Capitalize<StringType>
• 2.15 Uncapitalize<StringType>

第三章:装饰器 Decorators

• 3.1 装饰者模式介绍
• 3.2 Typescript 装饰器
• 3.3 装饰器的使用
• 3.4 装饰器工厂
• 3.5 类装饰器
• 3.6 方法装饰器
• 3.7 属性装饰器
• 3.8 其他装饰器的写法
• 3.9 装饰器运行时代码分析

第四章:TS 中奇怪的符号

• 4.1 !非空断言操作符
• 4.2 ?. 运算符
• 4.3 ?? 空值合并运算符
• 4.4 ?：可选属性
• 4.5 & 可选属性
• 4.6 ｜ 分隔符
• 4.7 _ 数字分隔符
• 4.8 <Type> 语法
• 4.9 @XXX 装饰器
• 4.10 #XXX 私有字段
• 第五章:泛型 Generics
  • 5.1 泛型是什么？
  • 5.2 泛型接口？
  • 5.3 泛型类？
  • 5.4 泛型约束
    • 5.4.1 确保属性存在
    • 5.4.2 检查对象上的键是否存在
  • 5.5 泛型参数默认类型
  • 5.6 泛型条件类型
  • 5.7 泛型工具类型
    • 5.7.1 partial
    • 5.7.2 record
    • 5.7.3 pick
    • 5.7.4 exclude
    • 5.7.5 returntype
  • 5.8 使用泛型创建对象
    • 5.8.1 构造签名
    • 5.8.2 构造函数类型
    • 5.8.3 构造函数类型的应用
    • 5.8.4 使用泛型创建对象
  • 5.9 参考资源

欢迎大家 PR 贡献 TS 代码，点个 Star 持续更新中...🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

you-don-t-know-ts's Issues

2-2实现-omit.md

//你的答案
type MyOmit<T, K> = { [P in keyof T as P extends K ? never : P]: T[P] };

1.3.实现Awaited

type MyAwaited<T,K>={
[P in K]:T[P]

1-13实现-push.md

//你的答案
type Unshift<T extends unknown[], U> = [U, ...T]

1.1.hello-world

type HelloWorld =string;

1.1.hello-world

type HelloWorld = string;

1.2.实现Pick

type MyPick<T, K extends keyof T> = {

  [P in K]:T[P]
};

2-3-实现Readonly2.md

type MyReadonly2<T, K extends keyof T = keyof T> = Omit<T, K> & Readonly<T>;
//你的答案

1.1.hello-world

1-hello World

// 你的答案

1.2.实现Pick

type MyPick<T, K extends keyof T> ={
[P in K]:T[P]
};

1-14实现-unshift.md

//你的答案
type Unshift<T extends unknown[], U> = [U, ...T]

1.2.实现Pick

type MyPick<T, K extends keyof T> = {[F in K]:T[F]};

1.1.hello-world

type HelloWorld = string;

1.1.hello-world

// 你的答案

1.3.实现Awaited

/* _____________ 你的代码 _____________ */

type MyAwaited<T> = T extends Promise<infer U>
  ? MyAwaited<U>
  : T extends { then: (p: (arg: infer K) => any) => any }
  ? K
  : T;

/* _____________ 测试用例 _____________ */
import type { Equal, Expect } from '@type-challenges/utils';

type X = Promise<string>;
type Y = Promise<{ field: number }>;
type Z = Promise<Promise<string | number>>;
type Z1 = Promise<Promise<Promise<string | boolean>>>;
type T = { then: (onfulfilled: (arg: number) => any) => any };

type cases = [
  Expect<Equal<MyAwaited<X>, string>>,
  Expect<Equal<MyAwaited<Y>, { field: number }>>,
  Expect<Equal<MyAwaited<Z>, string | number>>,
  Expect<Equal<MyAwaited<Z1>, string | boolean>>,
  Expect<Equal<MyAwaited<T>, number>>
];

// @ts-expect-error
type error = MyAwaited<number>;

1-13实现-push.md

//你的答案
type Unshift<T extends unknown[], U> = [U, ...T]

1.1.hello-world

// 你的答案
import './style.css';
import type { Equal, Expect, NotAny } from '@type-challenges/utils';
// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>第一题:Hello World</h1><p> 你需要使得14行不会抛出异常</p>`;

// 期望是一个 string 类型
type HelloWorld = string;
//你需要使得如下这行不会抛出异常
type cases = [Expect<NotAny<HelloWorld>>, Expect<Equal<HelloWorld, string>>];

2-1-实现Get-Return-Type.md

//你的答案
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : T;

2-2实现-omit.md

//你的答案
type MyOmit<T, K> = { [P in keyof T as P extends K ? never : P]: T[P] };