TypeScript Type Challenges: Problem Set, Solutions, and Reference Links

Have you ever felt confused after reading various TypeScript documents, struggled with unfamiliar keywords, reverted to JavaScript, or encountered mysterious type errors? This article, based on our own TypeScript pitfalls, guides you through learning and practicing type gymnastics, turning challenges into enjoyable learning experiences for everyday development.

Target audience: Front‑end developers who know JavaScript, have seen TypeScript, and want to deepen their understanding.

What you will gain: Core TypeScript knowledge points and the joy of type gymnastics.

How to use:

Consume problems periodically (each problem covers related concepts).

Order: keyword → problem requirement → knowledge point → solution → answer link → reference answer → reference JS → knowledge point.

Solutions are for reference only and do not represent a complete TypeScript answer.

Problem Summary

#

Title

Difficulty

Keywords

Summary

1.

Extract

🌟 generics, union, extends Select the part of a union type that "intersects" with other types.

2.

Lookup

🌟🌟 generics, union, extends Select the part of a union type that satisfies a specific condition.

3.

Chainable Option

🌟🌟 generics, recursive Use recursion to enable chainable calls in types.

4.

SubType

🌟🌟 keyof Perform merge operations on objects.

5.

Change Argument

🌟🌟🌟 infer, ReturnType, Parameters Manipulate function parameter and return types.

6.

Underscore

🌟🌟🌟 Template Literal Types, recursive Convert underscore‑separated strings to camelCase.

7.

EventEmitter

🌟🌟🌟🌟 generics, function overload, Intersection Resolve mutual dependencies between function parameters using generics.

8.

Permutation

🌟🌟🌟🌟 union, extends, never Generate all permutations of a union type.

9.

Simple Vue

🌟🌟🌟🌟🌟 this Simulate Vue's this behavior.

10.

Union To Tuple

🌟🌟🌟🌟🌟 function overload, Intersection Convert an unordered union type into an ordered tuple.

Reference Links

Type Distribution – Documentation - TypeScript 2.8 [11]

Generics – Documentation - Generics [12]

Recursive Types – Documentation - TypeScript 3.7 [13]

Generics in Functions – Documentation - More on Functions [14] keyof – Documentation - TypeScript 2.1 [15] this Type – Documentation - Utility Types [16] infer – infer | 深入理解 TypeScript [17]

Rest/Spread Parameters – Documentation - TypeScript 3.0 [18]

Template Literal Types – Documentation - TypeScript 4.1 [19]

String Literal Types – Documentation - Template Literal Types [20]

Never Checks – Conditional Types - Checking extends never [21]

Dependent Types – TypeScript type tricks – 多参数类型约束 [22]

Dependent Types – Typescript Tips: 动态重载实现廉价版 dependent type [23]

Intersection Types & Function Overloads – TypeScript union function types [24]

TS & JS Turing‑Completeness Proof – 证明 JS 和 TS 类型编程是图灵完备的 [25]

Additional Announcement

First ByteDance Youth Training Camp – Front‑end enrollment is now open: https://mp.weixin.qq.com/s/Pw7Ffi1DNfpYsk00f0gx6w