angular - d3.value() iterable ve d3.rollup'i JavaScript'ten TypeScript'e nasıl dönüştürürsünüz

Bu yatay yığılmış çubuk grafik kodunu saf JavaScript'ten TypeScript Angular uygulamama dönüştürmeye çalışıyorum.

Koddaki bu bölüme geldiğimde:

const series = d3
      .stack()
      .keys(zDomain)
      .value(([, I], z: any) => {
        return X[I.get(z)];
      })
      .order(order)
      .offset(offset)(
        d3.rollup(
          I,
          ([i]) => i,
          (i) => Y[i],
          (i) => Z[i]
        )
      )
      .map((s) => s.map((d) => Object.assign(d, { i: d.data[1].get(s.key) })));

Aşağıdaki derleme hatalarını alıyorum:

app/d3.service.ts:171:15 HATASI - hata TS2488: Tür ‘{ [key: string]: number; }’ bir yineleyici döndüren bir ‘Symbol.iterator’ metoduna sahip olmalıdır.

171 .value(([, I], z: any) => { ~~~~~ app/d3.service.ts:176:9 - hata TS2345: 'InternMap>' türündeki argüman, '{ [key: string]: number; }' türündeki bir Iterable parametresine atanamaz. '[Symbol.iterator]' özelliğinin türleri uyumsuz. '() => IterableIterator<[any, InternMap<{}, number>]>' türü, '() => Iterator<{ [key: string]: number; }>' türüne atanamaz. 'IterableIterator<[any, InternMap<{}, number>]>' türü, 'Iterator<{ [key: string]: number; }>' türüne atanamaz. 'next' özelliğinin türleri uyumsuz. '(value?: any) => IteratorResult<[any, InternMap<{}, number>]>' türü, '(value?: any) => IteratorResult<{ [key: string]: number; }>' türüne atanamaz.

        Type 'IteratorResult<[any, InternMap<{}, number>]>' is not assignable to type 'IteratorResult<{ [key: string]: number; }>'.
          Type '[any, InternMap<{}, number>]' is not assignable to type '{ [key: string]: number; }'.
            Index signature is missing in type '[any, InternMap<{}, number>]'.

176 d3.rollup( ~~~~~~~~~~ 177 I, ~~~~~~~~~~~~ ... 180 (i) => Z[i] ~~~~~~~~~~~~~~~~~~~~~ 181 ) ~~~~~~~~~

TypeScript'i ya da bu hataları yeterince iyi anlamıyorum, bu yüzden bu kod bölümünü TypeScript'e nasıl çevireceğimi anlayamıyorum. Biri yardım edebilir mi veya en azından bana tavsiye verebilir mi?

Kodumun minimal bir örneğini StackBlitz'te burada oluşturdum, ancak orada derleme hataları tekrar edilmiyor.

11 Mart 2022 Güncellemesi: İşte benim yüklediğim d3 ve d3 türlerinin sürümleri:

"@types/d3": "^7.1.0",
"d3": "^7.1.0",

Ve işte d3'ü TypeScript dosyasına nasıl ithal ettiğim:

import * as d3 from "d3";

İşte derleme sırasında oluşan tüm tür hatalarının bir fotoğrafı:

Cevap #1

Yani burada bence sorun, @types/d3 ile d3 sürümleri arasında bir uyumsuzluk olması. Ayrıca @types/d3 referansını olması gereken yere, yani devDependencies'e taşıdım.

Bu, benim için yeni bir Angular "ng new" uygulamasında işe yarıyor:

{
  "name": "d3-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "d3": "7.1.0", // <!-------------- explicit 7.1.0 version
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.5",
    "@angular/cli": "~13.2.5",
    "@angular/compiler-cli": "~13.2.0",
    "@types/d3": "7.1.0", // <!-------------- explicit 7.1.0 version
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

...ve sonra daha önce olduğu gibi, import * as d3 from 'd3'; kullanmaya devam edin

Yeni bir Stackblitz oluşturduğumda bunun çalışmadığını fark edin - nedenini bilmiyorum. Ama işte doğru d3 intellisense ile bir ekran görüntüsü: