江苏龙网

  1. 主页 > 生活百科 > >

拿6个案例讲解TypeScript 知识点

TypeScript


拿6个案例讲解TypeScript 知识点

文章插图
 
作者：ssh前端
转发链接：
https://mp.weixin.qq.com/s/ny_yya50PTJZX-IUERSueA
前言相信这段时间来 ， 对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧 。如果计划开始学习但是还没有开始 ， 或者没有找到资料的同学 ， 可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程 ， 自行学习 。
本文从最近在 Github 上比较火的仓库 typescript-exercises[2] 入手 ， 它的中文介绍是 「富有挑战性的 TypeScript 练习集」 。里面包含了 15 个 TypeScript 的练习题 ， 我会从其中挑选出几个比较有价值的题目 ， 一起来解答一下 。
目标来看下这个仓库的发起者所定下的目标 ， 让每个人都学会以下知识点的实战运用：
  1. Basic typing.
  2. Refining types.
  3. Union types.
  4. Merged types.
  5. Generics.
  6. Type declarations.
  7. Module augmentation.
  8. Advanced type mApping.
真的都是一些非常有难度且实用的知识点 ， 掌握了它们一定会让我们在编写 TypeScript 类型的时候如虎添翼 。
挑战exercise-00题目import chalk from "chalk"// 这里需要补全const users: unknown[] = [  {    name: "Max Mustermann",    age: 25,    occupation: "Chimney sweep",  },  {    name: "Kate Müller",    age: 23,    occupation: "Astronaut",  },]// 这里需要补全function logPerson(user: unknown) {  console.log(` - ${chalk.green(user.name)}, ${user.age}`)}console.log(chalk.yellow("Users:"))users.forEach(logPerson)解答第一题只是个热身题 ， 考察对接口类型定义的掌握 ， 直接定义 User 接口即可实现 。
interface User {  name: string  age: number  occupation: string}const users: User[] = [  {    name: "Max Mustermann",    age: 25,    occupation: "Chimney sweep",  },  {    name: "Kate Müller",    age: 23,    occupation: "Astronaut",  },]function logPerson(user: User) {  console.log(` - ${chalk.green(user.name)}, ${user.age}`)}console.log(chalk.yellow("Users:"))users.forEach(logPerson)或者利用类型推导 ， users 数组会自动推断出类型：
const users = [  {    name: "Max Mustermann",    age: 25,    occupation: "Chimney sweep",  },  {    name: "Kate Müller",    age: 23,    occupation: "Astronaut",  },]在 VSCode 中 ， 鼠标放到 users 变量上即可看到类型被自动推断出来了：
{  name: string  age: number  occupation: string};[]那么利用 typeof 关键字 ， 配合索引查询 ， 我们也可以轻松取得这个类型 。这里 number 的意思就是查找出 users 的所有数字下标对应的值的类型集合 。
type User = typeof users[number]这个仓库提供了每道题的答题机制 ， 执行 npm run 0 对应题号 ， 看到结果即可证明编译通过 ， 答案正确 。
拿6个案例讲解TypeScript 知识点

文章插图
 
execsise-01题目最初 ， 我们在数据库中只有 User 类型 ， 后来引入了 Admin 类型 。把这两个类型组合成 Person 类型以修复错误 。
interface User {  name: string  age: number  occupation: string}interface Admin {  name: string  age: number  role: string}const persons: User[] /* <- Person[] */ = [  {    name: "Max Mustermann",    age: 25,    occupation: "Chimney sweep",  },  {    name: "Jane Doe",    age: 32,    role: "Administrator",  },  {    name: "Kate Müller",    age: 23,    occupation: "Astronaut",  },  {    name: "Bruce Willis",    age: 64,    role: "World saver",  },]function logPerson(user: User) {  console.log(` - ${chalk.green(user.name)}, ${user.age}`)}persons.forEach(logPerson)


推荐阅读


上一篇：斗记之巅峰之斗的由来,场关于斗记茶之旅的分享会分享茶会

下一篇：茶树菇老鸭的做法科普,茶树菇炒腰花的做法是什么