TypeScript
TypeScript 就是在 JavaScript 之上加了一层类型系统。本课程从零讲起,覆盖类型、interface、generic、class、模块、工具类型、mapped/conditional 类型、声明文件以及编译器配置。
共 18 节,按顺序
- 120 分钟
你好,TypeScript
下面这个小小的 JavaScript 程序彻头彻尾是坏的,而 JavaScript 会乐呵呵地把它跑完:
What TypeScript isTsc compile stepRunning a .ts fileThe play button - 225 分钟
类型(Type)基础
你已经能运行一个 .ts 文件了。现在来认识最基本的构件:TypeScript 自带的原始类型 (primitive type),外加两个"逃生口"(any 和 unknown),你在真实代码库里一定会读到它们。学完这一课,你会知道每一个各是什么意思,以及该优先伸手去拿哪一个。
Primitive typesStringNumberBooleanNullUndefined+3 - 325 分钟
数组与 Tuple
单独一个值很少够用。你有一份气温的列表,一份姓名的列表,一份价格的列表。而一旦你有了一份列表,一种新的错误就有了可乘之机:一份本该只装数字的列表里,不知从哪里混进了一个字符串,是三个文件之外的某个函数塞进去的,等你发现的时候,是因为一次算术运算悄悄产出了一堆胡话。
Array typesReadonly arraysTuple typesFixed-length tuplesNamed tuple elements - 425 分钟
对象类型(Type)与 Interface
原始类型和数组能带你走很远,但真实的数据大多有结构:一个用户有名字和年龄,一个请求有方法和路径,一个结果有状态和主体。TypeScript 让你把这些结构描述出来,并拿每一个值去对照检查。
Object literal typesInterface keywordRequired vs optional propertiesStructural typingExcess property checks - 525 分钟
函数
大部分缺陷都藏在函数里,而类型也正是在函数上最能回本。一个函数的签名(它的参数和返回类型)就是调用方和函数体之间的一份契约。TypeScript 让你把这份契约白纸黑字写下来,并且两边都替你检查。
Parameter typesReturn typesVoid returnDefault parametersRest parametersFunction type expressions+1 - 625 分钟
Union 与 Literal 类型(Type)
有些值并不是单一的一种东西。一个查找用户的函数,要么找到一个用户,要么找不到。一个表单字段里装的,要么是用户输入的数字,要么还什么都没有。一个请求要么处于等待中,要么成功,要么失败,绝不会是别的状态。
Union typesString literal typesNumeric literal typesLiteral narrowing with as constUnion of object shapes - 730 分钟
类型(Type) Narrowing
联合类型说的是「这个值属于其中某一种类型」。收窄则是编译器根据你写下的运行时检查,推断出到底是哪一种的过程。这一课几乎没有新语法要写,功夫全在于像编译器那样去读代码。
Typeof narrowingTruthiness narrowingEquality narrowingIn operator narrowingInstanceof narrowingDiscriminated unions+1 - 820 分钟
Type Alias vs Interface
之前你一直把对象结构直接写在用到的地方,这没什么问题,因为那些结构都很小。现在看一个来自真实代码库的函数签名:
Type aliasesInterface declarationsExtending interfacesIntersection typesDeclaration mergingWhen to pick which - 925 分钟
Optional、Readonly 与 Nullable
JavaScript 里最常见的运行时错误长这样:
Optional propertiesReadonly propertiesNon-null assertion operatorOptional chainingNullish coalescingStrictNullChecks - 1020 分钟
Enum
有些值来自一个短小固定的列表。一个订单处于待发货、已发货或已送达。一条日志是 debug、info、warn 或 error。一个方向是上、下、左或右。用普通字符串写这些没问题,直到有人打出 "shiped",然后一次比较悄无声息地失败,订单就卡在一个没人处理的状态里。
Numeric enumsString enumsConst enumsEnums vs string literal unionsReverse mapping caveats - 1130 分钟
Generic
你需要一个函数,接收一个数组并返回它的第一个元素。很简单:
Generic functionsGeneric interfacesType parametersType inference for genericsBounded generics with extendsDefault type parameters - 1225 分钟
Class
先看一个用普通对象写出来的银行账户:
Class declarationsConstructorsInstance propertiesAccess modifiers (public, private, protected)Readonly fieldsParameter properties+1 - 1325 分钟
继承与 Abstract Class
你为一个支付系统写了三个类:CardPayment、BankTransfer 和 Voucher。三个都有一个 amount、一个 currency 和一个 createdAt。三个都有一个 describe() 方法,打印出的是完全相同的那三个字段。它们之间唯一真正的区别,是调用...
Extends keywordSuper callsMethod overrideAbstract classesAbstract methodsImplements with interface - 1425 分钟
模块(Module)
每个 TypeScript 文件都自成一个模块。一个文件里只要出现了 import 或 export,它顶层的那些名称就不再是全局的,而是变成模块作用域内的。这一课讲 import/export 语法、TypeScript 额外加进来的只针对类型的写法,以及命名上那些不起眼却很有分量的规则。
ES module syntaxNamed exportsDefault exportType-only importsRe-exportsModule resolution basics - 1530 分钟
工具类型(Utility Types)
TypeScript 自带一小套泛型类型,它们把一个类型当作输入,返回一个变换过的类型作为输出。这些名字都不起眼(Partial、Pick、Omit、Record……),却在真实代码里随处可见。本课讲你最常用到的八个。
Partial<T>Required<T>Readonly<T>Pick<T, K>Omit<T, K>Record<K, V>+2 - 1630 分钟
Mapped 与 Conditional 类型(Type)
你刚用过的那些工具类型(Partial、Pick、Record、ReturnType)全都建立在两个语言特性之上:映射类型负责改造一个对象的键和值,条件类型负责根据某个类型在几个结果之间做选择。这两样都读得懂之后,标准库里那些类型就不再是魔法了。
Keyof operatorMapped types syntaxKey remapping with asConditional typesInfer keywordDistributive conditional types - 1725 分钟
声明文件(Declaration Files)与第三方库
你装了一个库,导入它,编辑器立刻亮了起来:自动补全、参数提示,还有每个返回值的确切结构。换一个库,用同样的方式导入,拿到的却是:
.d.ts filesDefinitelyTyped (@types packages)Ambient declarationsDeclare moduleTypeRoots and types option - 1830 分钟
tsconfig 与编译器(Compiler)
tsconfig.json 就是 TypeScript 编译器读取的那个文件,编译什么、怎么编译,都从它这里得知。选项有一百多个,但一个真实项目用到的大概只有十来个。这一课讲的就是这十来个,外加一些经验法则,帮你挑出那些放上几年也不会过时的取值。
Tsconfig.jsonStrict modeTarget and libModule and moduleResolutionOutDir and rootDirIncremental and watch+1
用你的语言学习 TypeScript
每一节课、测验和导师回复都以你的语言显示。AI 导师会用你提问的语言来回答。
Roles that use TypeScript
See how hiring teams interview engineers on TypeScript, in production-like environments.
Frontend Engineer (React, Angular, Vue)
Hire frontend engineers in real workspaces with Vite, real component libraries and real performance budgets. Live or take-home, fully recorded.
See the interviewFull Stack Developer
Hire full stack developers in real apps with real APIs, real UIs and real tests. Live or take-home, fully recorded.
See the interviewWeb Application Engineer
Hire web application engineers in real apps with real routes, real auth and real test suites. Live or take-home, fully recorded.
See the interview