你不知道的 TypeScript 高级类型(小结)

// js
const double = (num) => 2 * num

// ts
const double = (num: number): number => 2 * num

function copy(arg: T): T {
 if (typeof arg === 'object') {
 return JSON.parse(
  JSON.stringify(arg)
 )
 } else {
 return arg
 }
}

const str = copy('my name is typescript')

interface Button {
 type: string
 text: string
}

interface Link {
 alt: string
 href: string
}

const linkBtn: Button & Link = {
 type: 'danger',
 text: '跳转到百度',
 alt: '跳转到百度',
 href: 'http://www.baidu.com'
}

interface Button {
 type: 'default' | 'primary' | 'danger'
 text: string
}

const btn: Button = {
 type: 'primary',
 text: '按钮'
}

type InnerType = 'default' | 'primary' | 'danger'

interface Button {
 type: InnerType
 text: string
}

interface Alert {
 type: ButtonType
 text: string
}

interface Button {
 type: string
 text: string
}

type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"

interface ButtonStyle {
 color: string
 background: string
}
interface ButtonTypes {
 default: ButtonStyle
 primary: ButtonStyle
 danger: ButtonStyle
}
interface Button {
 type: 'default' | 'primary' | 'danger'
 text: string
}

// 使用 keyof 后，ButtonTypes修改后，type 类型会自动修改 
interface Button {
 type: keyof ButtonTypes
 text: string
}

type BaseType = string | number | boolean

// 这里表示 copy 的参数
// 只能是字符串、数字、布尔这几种基础类型
function copy(arg: T): T {
 return arg
}

function getValue(obj: T, key: K) {
 return obj[key]
}

const obj = { a: 1 }
const a = getValue(obj, 'a')

type Readonly = {
 readonly [P in keyof T]: T[P];
};

interface Obj {
 a: string
 b: string
}

type ReadOnlyObj = Readonly

interface Obj {
 a: string
 b: string
}

type ObjKeys = 'a' | 'b'

type ReadOnlyObj = {
 readonly [P in ObjKeys]: Obj[P];
}

type ReadOnlyObj = {
 readonly a: Obj['a'];
 readonly b: Obj['b'];
}

interface ReadOnlyObj {
 readonly a: string;
 readonly b: string;
}

type Extract = T extends U ? T : never;

interface Worker {
 name: string
 age: number
 email: string
 salary: number
}

interface Student {
 name: string
 age: number
 email: string
 grade: number
}


type CommonKeys = Extract
// 'name' | 'age' | 'email'

type Partial = {
 [P in keyof T]?: T[P]
}

import React from 'react'

interface ButtonProps {
 type: 'button' | 'submit' | 'reset'
 text: string
 disabled: boolean
 onClick: () => void
}

// 将按钮组件的 props 的属性都改为可选
const render = (props: Partial = {}) => {
 const baseProps = {
 disabled: false,
 type: 'button',
 text: 'Hello World',
 onClick: () => {},
 }
 const options = { ...baseProps, ...props }
 return (
 
  {options.text}
 
 )
}

type Required = {
 [P in keyof T]-?: T[P]
}

type Record = {
 [P in K]: T
}

interface Goods {
 id: string
 name: string
 price: string
 image: string
}

const goodsMap: Record = {}
const goodsList: Goods[] = await fetch('server.com/goods/list')

goodsList.forEach(goods => {
 goodsMap[goods.name] = goods
})

type Pick = {
 [P in K]: T[P]
}

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

type TodoPreview = Pick

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false
}

type Exclude = T extends U ? never : T

interface Worker {
 name: string
 age: number
 email: string
 salary: number
}

interface Student {
 name: string
 age: number
 email: string
 grade: number
}


type ExcludeKeys = Exclude
// 'name' | 'age' | 'email'

type Omit = Pick<
 T, Exclude
>

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

type TodoPreview = Omit

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false
}