加餐02｜深入TypeScript

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。
在讲组件化的进阶开发篇之前，我想在全家桶实战篇的最后，用一讲的篇幅，来专门聊一下 TypeScript。希望你在学完这一讲之后，能对 TypeScript 有一个全面的认识。
另外，今天我会设置很多实战练习，一边阅读一边敲代码的话，学习效果更好。而且，这次加餐中的全部代码都是可以在线完成的，建议你打开这个链接，把下面的每行代码都跟着敲一遍。
TypeScript 入门对于 TypeScript，你首先要了解的是，TypeScript 可以在 JavaScript 的基础上，对变量的数据类型加以限制。TypeScript 中最基本的数据类型包括布尔、数字、字符串、null、undefined，这些都很好理解。
在下面的代码中，我们分别定义了这几个数据类型的变量，你能看到，当我们把 number 类型的变量 price 赋值字符串时，就会报错，当我们把数组 me 的第一个元素 me[0] 的值修改为数字时，也会报错。
let courseName:string = '玩转Vue 3全家桶'
let price:number = 129
price = '89' //类型报错
let isOnline:boolean = true
let courseSales:undefined
let timer:null = null
let me:[string,number] = ["大圣",18]
me[0] = 1 //类型报错

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

TypeScript的泛型和类型编程是本文的重点。文章首先介绍了TypeScript的基本类型和如何定义复杂对象的类型和函数的类型。接着深入讲解了泛型的概念，通过示例代码展示了如何使用泛型在函数内部将类型变成变量使用，以及如何通过关键字keyof、in、extends、infer等组合出复杂的类型函数。此外，文章还演示了在实际项目开发中如何通过类型系统提高联调和开发的体验。最后，留下了一个思考题，引发读者思考如何实现Partial1的递归版本，以便将所有嵌套的属性都变成可选的。总的来说，本文通过清晰的示例和解释，帮助读者全面了解了TypeScript的基本知识和实际应用，对于想要深入学习TypeScript的读者来说，是一篇很有价值的文章。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(25)

最新
精选

cwang
不建议用中文变量名，其中一个原因是手敲的时候，需要来回转换中英文输入法。😅
作者回复: 帮助理解哈哈自己敲得时候可以不用
2021-12-03

11
require
学得时候是typescript, 用的时候就变成了anyscript😂
作者回复: 哈哈主要是typescript起步和开发的时候需要更多时间去开发
2021-12-07

4
山雨
大圣老师，实战篇代码啥时候更新
作者回复: sorry sorry 最近在赶稿子，稿子赶完回会整理下代码提交
2021-12-03

2
风一样
请问老师，let todos:Ref = ref([{title:'学习Vue',done:false}])这条语句中，用 Ref 和不用 Ref，有什么区别呢？
作者回复: 用了Ref之后，todos后面的操作就会收到Ref类型的限制，你可以尝试读取一些todos其他的属性，typescript会给你对应的报错信息
2021-12-21

1
Lanb Wang
跟着敲了一遍，然后现在看自己敲得是啥子都不晓得
作者回复: 哈哈 ts确实需要多练
2022-02-11


起風了
想问一下type和interface有什么区别?什么时候用type,什么时候用interface?
作者回复: type和interface都可以描述一个对象或者函数，并且都可以扩展，有几个小区别，首先type可以设置类型的别名，比如type Vue = string ,还可以用typeof获取实例的类型，interface可以直接合并生命，默认直接用interface即可
2022-01-11


韩棒
大圣老师 Ref在使用的时候有一个 “Ref”仅表示类型，但在此处却作为值使用-ts。是需要配置tsconfig.json吗？
作者回复: 这个不需要特殊配置
2021-12-03


2345
个人不觉得中文变量能帮助理解。
2022-02-13
1
26
南山
type RecursivePartial<T> = { [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P]; };
2021-12-03
1
9
cwang
有个地方挺神奇的哈，不打印你是不会理解这段代码的。 enum 课程评分 { 好, 非常好, 嘎嘎好 } console.log(课程评分['好'] === 0) // true console.log(课程评分[0] === '好') // true 为啥课程评分['好'] === 0 ，又课程评分[0] === '好' 呢？ console.log(课程评分) ``` [LOG]: { "0": "好", "1": "非常好", "2": "嘎嘎好", "好": 0, "非常好": 1, "嘎嘎好": 2 } ``` 原来如此~
2021-12-03
2
7

收起评论