在 TS 中使用可为空的类型

Question

似乎一旦你定义了一个可以为空的类型，你就必须在使用该道具的整个树上撒上它。是不是这样，我只需要在我的代码中添加一些感觉很脏的代码，或者有没有更好的方法来使用 TS 来处理这个问题？

reducers/company.ts 注意到company? 和companies? 和特色公司了吗？下面：

import ActionTypes from '../actions/ActionTypes';
import { Company } from '../../Interfaces';
import { CompaniesActionType, CompanyActionType } from '../actions/company/CompanyActions';

export interface CompanyState {
    company?: Company;
    companyReceived: boolean;
    companiesReceived: boolean;
    featuredCompaniesReceived?: boolean;
    companies?: Array<Company>;
    featuredCompanies?: Array<Company>;
}

const companyState: CompanyState = {
    company: undefined,
    companyReceived: false,
    companiesReceived: false,
    featuredCompaniesReceived: false,
    companies: undefined,
    featuredCompanies: undefined,
};

export function companies(state: CompanyState = companyState, action: CompaniesActionType): CompanyState {
    switch (action.type) {
        case ActionTypes.COMPANIES_RECEIVED:
            return { ...state, companiesReceived: true, companies: action.companies };
        case ActionTypes.FEATURED_COMPANIES_RECEIVED:
            return { ...state, featuredCompaniesReceived: true, featuredCompanies: action.companies };
        default:
            return state;
    }
}

export function company(state: CompanyState = companyState, action: CompanyActionType): CompanyState {
    switch (action.type) {
        case ActionTypes.COMPANY_RECEIVED:
            return { ...state, companyReceived: true, company: action.company };
        default:
            return state;
    }
}

现在我有一个使用该状态的组件，因为我在减速器中将这些道具定义为可选，所以我也必须使用 HomePage，因为它们将作为道具传递给 HomePage：

HomePage.tsx

export default class HomePage extends Component<{
    featuredCompanies?: Array<Company>,
    companies?: Array<Company>,
    countries?: Array<Country>,
    className: string
}, any> {
    render() {
        return (
            <Main>

在 HomePage 中，树继续呈现 CompanyList：

<CompanyList
className="ft-company-list"
companies={this.props.companies}
countries={this.props.countries} />

因此 CompanyList 还必须将公司和国家/地区定义为它的 React 组件定义的可选参数等等，以用于这两个道具滴入的任何其他子组件......

Answer 1

不，如果您确保它是非空类型，那么您可以在标识符后面使用! 后缀。在您的代码中，它将是：

<CompanyList
className="ft-company-list"
companies={this.props.companies!}
countries={this.props.countries!} />

见：https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions