內聯使用 Typescript 聲明類型

Question

在為諸如“@types/openlayers”之類的庫安裝類型后，我如何將它們用於諸如 React props 之類的內聯類型定義：

import Map from "ol/Map";    
import { Map as MapTypes } from "@types/openlayers"; // Error: Cannot import type declaration files.

export type Props = {
    mapInstance: MapTypes;
}

export const OlMap: FunctionComponent<Props> = (props): JSX.Element => {
   const currentMap = props.mapInstance;
   ...
}

Answer 1

從正在輸入的實際包中使用它，而不是@types/*模塊。 例如，使用react-router ，您添加@types/react-router但要拉出RouteProps接口，您使用import {RouteProps} from "react-router"; .

---

此外，從您的編輯，似乎你可能使用了錯誤的@types/*包。 您提到使用@types/openlayers但隨后提到您正在使用包ol ，它可能應該使用@types/ol包作為類型。

注意申報文件消耗：

在大多數情況下，類型聲明包應始終與npm上的包名稱具有相同的名稱，但以@types/為前綴

運行yarn add ol @types/ol （或npm i ol @types/ol ）

這似乎使用了正確的類型：

import MapTypes from "ol/Map"; // Note that I don't need "{}" or "as" here
// import {Map as MapTypes} from "ol"; or pull it out of the root export

export type Props = {
    mapInstance: MapTypes;
}

export const OlMap: FunctionComponent<Props> = (props): JSX.Element => {
   const currentMap = props.mapInstance;
   ...
}