类型错误：类型“字符串”不可分配给类型“颜色”答案

【问题标题】：Type error: Type 'string' is not assignable to type 'Colors'类型错误：类型“字符串”不可分配给类型“颜色”
【发布时间】：2021-09-29 20:29:54
【问题描述】：

我有一个状态组件按钮，它接收颜色和标题的道具，颜色在打字稿中定义了不同的颜色

组件实例在我在本地主机上运行时运行，但在我尝试构建应用程序时抛出错误

类型错误：类型“字符串”不可分配输入“颜色”。

主要组件

import React from 'react'

import styled from 'styled-components'
import capitalizeFirstLetter from '../../utils/capitalize-first-letter'

type Colors =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'
  | 'link'

const Styles = styled.button`
  outline: 0;
  border: 1px solid;
  background: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 50px;
  ${({ color }) => color === 'primary' && 'border-color: #0098db; color: #0098db;'}
  ${({ color }) => color === 'secondary' && 'border-color: #6c757d; color: #6c757d;'}
${({ color }) => color === 'success' && 'border-color: #6aea87; color: #6aea87;'}
${({ color }) => color === 'danger' && 'border-color: #dc3545; color: #dc3545;'}
${({ color }) => color === 'warning' && 'border-color: #ffc107; color: #ffc107;'}
${({ color }) => color === 'info' && 'border-color: #17a2b8; color: #17a2b8;'}
${({ color }) => color === 'light' && 'border-color: #f8f9fa; color: #212529;'}
${({ color }) => color === 'dark' && 'border-color: #343a40; color: #343a40;'}
`
export default function StatusButton({ title, color }: { title: string; color: Colors }) {
  return <Styles color={color}>{capitalizeFirstLetter(title)}</Styles>
}

组件实例

<StatusButton title={`${blog.status.isPublished ? 'Online' : 'Offline'}`} color={`${blog.status.isPublished ? 'success' : 'warning'}`}/>

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

您将 color 值包装在模板文字中，因此将其转换为常规字符串。改用这个：

<StatusButton title={`${blog.status.isPublished ? 'Online' : 'Offline'}`} color={blog.status.isPublished ? 'success' : 'warning'}/>

在这种情况下，TypeScript 应该足够聪明，可以将 'success' 和 'warning' 视为常量，这些常量可以算作 Colors。

【讨论】：