Làm cách nào để ngăn lỗi chữ ký Chỉ mục lỗi của loại đối tượng mặc nhiên có loại 'bất kỳ' nào khi biên dịch bản thảo với cờ noImplicitAny được bật?

Tôi luôn biên dịch typecript với cờ --noImplicitAny. Điều này có ý nghĩa khi tôi muốn kiểm tra kiểu của mình càng chặt chẽ càng tốt.

Vấn đề của tôi là với đoạn mã sau tôi gặp lỗi Index signature of object type implicitly has an 'any' type:

interface ISomeObject {
    firstKey:   string;
    secondKey:  string;
    thirdKey:   string;
}

let someObject: ISomeObject = {
    firstKey:   'firstValue',
    secondKey:  'secondValue',
    thirdKey:   'thirdValue'
};

let key: string = 'secondKey';

let secondValue: string = someObject[key];

Điều quan trọng cần lưu ý là ý tưởng là biến khóa xuất phát từ một nơi khác trong ứng dụng và có thể là bất kỳ khóa nào trong đối tượng.

Tôi đã cố gắng phân loại rõ ràng bằng cách:

let secondValue: string = <string>someObject[key];

Hoặc là kịch bản của tôi chỉ là không thể với --noImplicitAny?

Thêm chữ ký chỉ mục sẽ cho TypeScript biết loại nên là gì.

Trong trường hợp của bạn đó sẽ là [key: string]: string;

interface ISomeObject {
    firstKey:      string;
    secondKey:     string;
    thirdKey:      string;
    [key: string]: string;
}

Tuy nhiên, điều này cũng bắt buộc tất cả các loại thuộc tính để khớp với chữ ký chỉ mục. Vì tất cả các thuộc tính là một stringnó hoạt động.

Mặc dù chữ ký chỉ mục là một cách mạnh mẽ để mô tả mảng và mẫu 'từ điển', nhưng chúng cũng thực thi rằng tất cả các thuộc tính khớp với kiểu trả về của chúng.

Biên tập:

Nếu các loại không khớp, loại liên kết có thể được sử dụng [key: string]: string|IOtherObject;

Với các loại kết hợp, sẽ tốt hơn nếu bạn để TypeScript suy ra loại thay vì xác định nó.

// Type of `secondValue` is `string|IOtherObject`
let secondValue = someObject[key];
// Type of `foo` is `string`
let foo = secondValue + '';

Mặc dù điều đó có thể hơi lộn xộn nếu bạn có nhiều loại khác nhau trong chữ ký chỉ mục. Thay thế cho điều đó là sử dụng anytrong chữ ký. [key: string]: any;Sau đó, bạn sẽ cần phải đúc các loại như bạn đã làm ở trên.

Một cách khác để tránh lỗi là sử dụng dàn diễn viên như thế này:

let secondValue: string = (<any>someObject)[key]; (Lưu ý dấu ngoặc đơn)

Vấn đề duy nhất là điều này không còn an toàn nữa, như bạn đang sử dụng any. Nhưng bạn luôn có thể quay trở lại đúng loại.

ps: Tôi đang sử dụng bản thảo 1.7, không chắc chắn về các phiên bản trước.

TypeScript 2.1 giới thiệu cách thức thanh lịch để xử lý vấn đề này.

const key: (keyof ISomeObject) = 'secondKey';
const secondValue: string = someObject[key];

Chúng ta có thể truy cập tất cả các tên thuộc tính đối tượng trong giai đoạn biên dịch theo keyoftừ khóa (xem changelog ).

Bạn chỉ cần thay thế stringloại biến bằng keyof ISomeObject. Bây giờ trình biên dịch biết keybiến được phép chỉ chứa tên thuộc tính ISomeObject.

Ví dụ đầy đủ:

interface ISomeObject {
    firstKey:   string;
    secondKey:  string;
    thirdKey:   number;
}

const someObject: ISomeObject = {
    firstKey:   'firstValue',
    secondKey:  'secondValue',
    thirdKey:   3
};

const key: (keyof ISomeObject) = 'secondKey';
const secondValue: string = someObject[key];

// You can mix types in interface, keyof will know which types you refer to.
const keyNumber: (keyof ISomeObject) = 'thirdKey';
const numberValue: number = someObject[keyNumber];

Mã trực tiếp trên typecriptang.org ( noImplicitAnytùy chọn thiết lập )

Đọc thêm với nhiều công keyofdụng hơn .

Cài đặt tsconfig sau đây sẽ cho phép bạn bỏ qua các lỗi này - đặt thành đúng.

đàn ápImplicitAnyIndexErrors

Loại bỏ các lỗi noImplicitAny để lập chỉ mục các đối tượng thiếu chữ ký chỉ mục.

Giải pháp 'keyof' được đề cập ở trên hoạt động. Nhưng nếu biến chỉ được sử dụng một lần, ví dụ như lặp qua một đối tượng, v.v., bạn cũng có thể đánh máy nó.

for (const key in someObject) {
    sampleObject[key] = someObject[key as keyof ISomeObject];
}

sử dụng keyof typeof

const cat = {
    name: 'tuntun'
}

const key: string = 'name' 

cat[key as keyof typeof cat]

Tương tự như câu trả lời của @Piotr Lewandowski, nhưng trong một forEach:

const config: MyConfig = { ... };

Object.keys(config)
  .forEach((key: keyof MyConfig) => {
    if (config[key]) {
      // ...
    }
  });

Khai báo đối tượng như thế này.

export interface Thread {
    id:number;
    messageIds: number[];
    participants: {
        [key:number]: number
    };
}

Không có chỉ mục? Sau đó làm cho riêng bạn!

Tôi đã định nghĩa toàn cầu đây là một cách dễ dàng để xác định chữ ký đối tượng. Tcó thể anynếu cần:

type Indexer<T> = { [ key: string ]: T };

Tôi chỉ thêm indexerlà một thành viên trong lớp.

indexer = this as unknown as Indexer<Fruit>;

Vì vậy, tôi kết thúc với điều này:

constructor(private breakpointResponsiveService: FeatureBoxBreakpointResponsiveService) {

}

apple: Fruit<string>;
pear: Fruit<string>;

// just a reference to 'this' at runtime
indexer = this as unknown as Indexer<Fruit>;

something() {

    this.indexer['apple'] = ...    // typed as Fruit

Lợi ích của việc này là bạn lấy lại được loại phù hợp - nhiều giải pháp sử dụng <any>sẽ làm mất việc gõ cho bạn. Hãy nhớ điều này không thực hiện bất kỳ xác minh thời gian chạy. Bạn vẫn sẽ cần kiểm tra nếu có thứ gì đó tồn tại nếu bạn không biết chắc chắn nó tồn tại.

Nếu bạn muốn thận trọng quá mức và bạn đang sử dụng, strictbạn có thể làm điều này để tiết lộ tất cả các địa điểm bạn có thể cần thực hiện kiểm tra không xác định rõ ràng:

type OptionalIndexed<T> = { [ key: string ]: T | undefined };

Tôi thường không thấy điều này là cần thiết vì nếu tôi có một thuộc tính chuỗi từ một nơi nào đó tôi thường biết rằng nó hợp lệ.

Tôi đã tìm thấy phương pháp này đặc biệt hữu ích nếu tôi có nhiều mã cần truy cập vào bộ chỉ mục và việc gõ có thể được thay đổi chỉ ở một nơi.

Lưu ý: Tôi đang sử dụng strictchế độ, và điều unknownnày chắc chắn là cần thiết.

Mã được biên dịch sẽ giống indexer = thisnhư vậy, vì vậy nó rất giống với khi bản thảo tạo _this = thischo bạn.

Tạo giao diện để xác định giao diện 'bộ chỉ mục'

Sau đó tạo đối tượng của bạn với chỉ mục đó.

Lưu ý: điều này vẫn sẽ có các vấn đề tương tự mà các câu trả lời khác đã mô tả liên quan đến việc thực thi loại của từng mặt hàng - nhưng đó thường chính xác là những gì bạn muốn.

Bạn có thể tạo tham số loại chung bất cứ điều gì bạn cần: ObjectIndexer< Dog | Cat>

// this should be global somewhere, or you may already be 
// using a library that provides such a type
export interface ObjectIndexer<T> {
  [id: string]: T;
}

interface ISomeObject extends ObjectIndexer<string>
{
    firstKey:   string;
    secondKey:  string;
    thirdKey:   string;
}

let someObject: ISomeObject = {
    firstKey:   'firstValue',
    secondKey:  'secondValue',
    thirdKey:   'thirdValue'
};

let key: string = 'secondKey';

let secondValue: string = someObject[key];

Sân chơi đánh máy

Bạn thậm chí có thể sử dụng điều này trong một ràng buộc chung khi xác định một loại chung:

export class SmartFormGroup<T extends IndexableObject<any>> extends FormGroup

Sau đó, Tbên trong lớp có thể được lập chỉ mục :-)

Khai báo loại mà khóa của nó là chuỗi và giá trị có thể là bất kỳ sau đó khai báo đối tượng với loại này và lint sẽ không hiển thị

type MyType = {[key: string]: any};

Vì vậy, mã của bạn sẽ là

type ISomeType = {[key: string]: any};

    let someObject: ISomeType = {
        firstKey:   'firstValue',
        secondKey:  'secondValue',
        thirdKey:   'thirdValue'
    };

    let key: string = 'secondKey';

    let secondValue: string = someObject[key];

Ngày nay giải pháp tốt hơn là khai báo các loại. Giống

enum SomeObjectKeys {
    firstKey = 'firstKey',
    secondKey = 'secondKey',
    thirdKey = 'thirdKey',
}

let someObject: Record<SomeObjectKeys, string> = {
    firstKey:   'firstValue',
    secondKey:  'secondValue',
    thirdKey:   'thirdValue',
};

let key: SomeObjectKeys = 'secondKey';

let secondValue: string = someObject[key];

Giải pháp đơn giản nhất mà tôi có thể tìm thấy bằng cách sử dụng Bản mô tả 3.1 trong 3 bước là:

1) Tạo giao diện

interface IOriginal {
    original: { [key: string]: any }
}

2) Tạo một bản sao đánh máy

let copy: IOriginal = (original as any)[key];

3) Sử dụng ở bất cứ đâu (bao gồm cả JSX)

<input customProp={copy} />