前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript 类型体操 01

TypeScript 类型体操 01

原创
作者头像
一介程序员
修改2022-05-05 11:56:42
4080
修改2022-05-05 11:56:42
举报
文章被收录于专栏:写两行代码放松下

发现一个好玩的开源项目:type-challenges,在上面可以做一些TypeScript类型相关的题目,这里记录一下自己的学习。

00004-easy-pick

代码语言:typescript
复制
/* _____________ Your Code Here _____________ */

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


/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Expected1, MyPick<Todo, 'title'>>>,
  Expect<Equal<Expected2, MyPick<Todo, 'title' | 'completed'>>>,
  // @ts-expect-error
  MyPick<Todo, 'title' | 'completed' | 'invalid'>,
]

interface Todo {
  title: string
  description: string
  completed: boolean
}

interface Expected1 {
  title: string
}

interface Expected2 {
  title: string
  completed: boolean
}

00007-easy-readonly

代码语言:typescript
复制
/* _____________ Your Code Here _____________ */

type MyReadonly<T> = { readonly [Key in keyof T]: T[Key] }


/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<MyReadonly<Todo1>, Readonly<Todo1>>>,
]

interface Todo1 {
  title: string
  description: string
  completed: boolean
  meta: {
    author: string
  }
}

00011-easy-tuple-to-object

代码语言:typescript
复制
/* _____________ Your Code Here _____________ */

type TupleToObject<T> = T extends readonly string[] ? { [Key in T[number]]: Key } : error


/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type cases = [
  Expect<Equal<TupleToObject<typeof tuple>, { tesla: 'tesla'; 'model 3': 'model 3'; 'model X': 'model X'; 'model Y': 'model Y' }>>,
]

// @ts-expect-error
type error = TupleToObject<[[1, 2], {}]>

这里很多人的答案是:

代码语言:typescript
复制
type TupleToObject<T extends readonly any[]> = { [k in T[number]]: k };

但是其实是不对的,因为这样没有满足最后一个判断条件:type error = TupleToObject<[[1, 2], {}]>

00014-easy-first

代码语言:typescript
复制
/* _____________ Your Code Here _____________ */

type First<T extends any[]> = T extends [infer First, ... any[]] ? First : never


/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<First<[3, 2, 1]>, 3>>,
  Expect<Equal<First<[() => 123, { a: string }]>, () => 123>>,
  Expect<Equal<First<[]>, never>>,
  Expect<Equal<First<[undefined]>, undefined>>,
]

type errors = [
  // @ts-expect-error
  First<'notArray'>,
  // @ts-expect-error
  First<{ 0: 'arrayLike' }>,
]

00018-easy-tuple-length

代码语言:typescript
复制
/* _____________ Your Code Here _____________ */

type Length<T extends readonly any[]> = T["length"]


/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const
const spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] as const

type cases = [
  Expect<Equal<Length<typeof tesla>, 4>>,
  Expect<Equal<Length<typeof spaceX>, 5>>,
  // @ts-expect-error
  Length<5>,
  // @ts-expect-error
  Length<'hello world'>,
]

今天先搞这五道题吧,总结一下收获:

代码语言:typescript
复制
const tuple = ['tesla', 'model 3', 'model X', 'model Y'] // tuple的类型是一个可变数组 string[]

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const // tuple的类型是:readonly ["tesla", "model 3", "model X", "model Y"]

// 00011 和 00018 两道题能够成立的前提是 数组后面加了 as const 。

type tuple_items = typeof tuple[number]; //"tesla" | "model 3" | "model X" | "model Y"
type todo_items = keyof Todo; 
type a = "title" extends keyof Todo ? true : false; // a == true
type b = "tesla" extends typeof tuple[number] ? true : false; // b == true

// 数组可以通过 T[number] 获取成员
// 类型通过 keyof T 获取成员, T[Key] 获取成员的类型

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 00004-easy-pick
  • 00007-easy-readonly
  • 00011-easy-tuple-to-object
  • 00014-easy-first
  • 00018-easy-tuple-length
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档