Loại chỉ định: Loại 'chuỗi | undefined 'không thể gán cho kiểu' string '

Khi tôi đặt bất kỳ thuộc tính nào của giao diện là tùy chọn, tôi gặp lỗi như sau khi gán thành viên của nó cho một số biến khác

TS2322: Nhập 'string | undefined 'không thể gán cho kiểu' string '. Loại 'không xác định' không được gán cho loại 'chuỗi'.

interface Person {
  name?:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

function getPerson(){
  let person = <Person>{name:"John"};
  return person;
}
let person: Person = getPerson();
let name1:string = person.name;//<<<Error here 

Làm cách nào để khắc phục lỗi này?

Bây giờ bạn có thể sử dụng toán tử xác nhận không null ở đây chính xác cho trường hợp sử dụng của bạn.

Nó nói với TypeScript rằng mặc dù một cái gì đó trông giống như nó có thể là null, nó có thể tin tưởng bạn rằng nó không phải:

let name1:string = person.name!; 
//                            ^ note the exclamation mark here  

Để tránh lỗi biên dịch tôi đã sử dụng

let name1:string = person.name || '';

Và sau đó xác thực chuỗi trống.

Tôi biết đây là câu trả lời hơi muộn nhưng có một cách khác ngoài câu trả lời của yannick https://stackoverflow.com/a/57062363/6603342 để sử dụng! là truyền nó dưới dạng chuỗi do đó nói với TypeScript tôi chắc chắn rằng đây là một chuỗi do đó chuyển đổi

let name1:string = person.name;//<<<Error here 

đến

let name1:string = person.name as string;

Điều này sẽ làm cho lỗi biến mất nhưng nếu tình cờ đây không phải là một chuỗi, bạn sẽ gặp phải lỗi thời gian chạy, đây là một trong những lỗi mà chúng tôi đang sử dụng TypeScript để đảm bảo rằng kiểu khớp và tránh những lỗi như vậy tại thời điểm biên dịch .

Kể từ TypeScript 3.7, bạn có thể sử dụng toán tử liên kết nullish ?? . Bạn có thể coi tính năng này như một cách để "quay trở lại" giá trị mặc định khi xử lý null hoặc undefined

let name1:string = person.name ?? '';

Các ??nhà điều hành có thể thay thế công dụng của ||khi cố gắng sử dụng một giá trị mặc định và có thể được sử dụng khi giao dịch với các phép toán luận, số, vv nơi ||không thể được sử dụng.

Kể từ TypeScript 4, bạn có thể sử dụng ??=toán tử gán a ??= bđể thay thế choa = a ?? b;

cố gắng tìm hiểu trước giá trị thực tế là bao nhiêu. Nếu personcó giá trị name, hãy gán nó cho name1, nếu không thì gán undefined.

let name1: string = (person.name) ? person.name : undefined;

Một cách sẵn sàng hơn cho sản xuất để xử lý điều này là thực sự đảm bảo rằng namenó hiện diện. Giả sử đây là một ví dụ tối thiểu về một dự án lớn hơn mà một nhóm người tham gia, bạn không biết getPersonsẽ thay đổi như thế nào trong tương lai.

if (!person.name) {
    throw new Error("Unexpected error: Missing name");
}

let name1: string = person.name;

Ngoài ra, bạn có thể nhập name1là string | undefinedvà xử lý các trường hợp undefinedgiảm thêm. Tuy nhiên, thông thường tốt hơn là xử lý các lỗi không mong muốn sớm hơn.

Bạn cũng có thể cho phép TypeScript suy ra kiểu bằng cách bỏ qua kiểu rõ ràng: Ví dụ : điều let name1 = person.namenày sẽ vẫn ngăn name1việc được gán lại thành một số.

Đây là một cách nhanh chóng để biết những gì đang xảy ra:

Khi bạn làm như sau:

Tên? : chuỗi

Bạn đã nói với TypeScript nó là tùy chọn. Tuy nhiên, khi bạn làm:

let name1 : string = person.name; //<<<Error here 

Bạn đã không để nó một sự lựa chọn. Bạn cần có một Liên minh trên đó phản ánh loại không xác định:

let name1 : string | undefined = person.name; //<<<No error here 

Sử dụng câu trả lời của bạn, tôi đã có thể phác thảo những điều sau đây về cơ bản là Giao diện, Lớp và Đối tượng. Tôi thấy cách tiếp cận này đơn giản hơn, đừng bận tâm nếu bạn không làm.

// Interface
interface iPerson {
    fname? : string,
    age? : number,
    gender? : string,
    occupation? : string,
    get_person?: any
}

// Class Object
class Person implements iPerson {
    fname? : string;
    age? : number;
    gender? : string;
    occupation? : string;
    get_person?: any = function () {
        return this.fname;
    }
}

// Object literal
const person1 : Person = {
    fname : 'Steve',
    age : 8,
    gender : 'Male',
    occupation : 'IT'  
}

const p_name: string | undefined = person1.fname;

// Object instance 
const person2: Person = new Person();
person2.fname = 'Steve';
person2.age = 8;
person2.gender = 'Male';
person2.occupation = 'IT';

// Accessing the object literal (person1) and instance (person2)
console.log('person1 : ', p_name);
console.log('person2 : ', person2.get_person());

Bạn đang cố gắng đặt biến name1, kiểu phù hợp được đặt là chuỗi nghiêm ngặt (nó PHẢI là chuỗi) với giá trị từ trường đối tượng name, kiểu giá trị phù hợp được đặt là chuỗi tùy chọn (có thể là chuỗi hoặc không xác định, vì dấu hỏi). Nếu bạn thực sự cần hành vi này, bạn phải thay đổi kiểu name1như thế này:

let name1: string | undefined = person.name;

Và nó sẽ ổn thôi;

Lưu ý rằng nếu biến đến từ một mảng hoặc cấu trúc hủy, bạn có thể cung cấp các giá trị mặc định:

const { DB_HOST = "localhost", DB_PORT: "5432" } = process.env

db.connect(DB_HOST, DB_PORT);

const connectToDb = (host = "localhost", port: "5432") => db.connect(host, port);

Bạn có thể sử dụng chuỗi tùy chọn của Typecript. Thí dụ:

const name = person?.name;

Nếu thuộc tính nametồn tại trên personđối tượng, bạn sẽ nhận được giá trị của nó nhưng nếu không, nó sẽ tự động trả về không xác định.

Bạn có thể sử dụng tài nguyên này để hiểu rõ hơn.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

Bạn có thể sử dụng NonNullableLoại Tiện ích:

Thí dụ

type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]

Tài liệu .

Giải pháp 1: Loại bỏ định nghĩa kiểu rõ ràng

Vì getPersonđã trả về a Personkèm theo tên, chúng ta có thể sử dụng kiểu suy luận.

function getPerson(){
  let person = {name:"John"};
  return person;
}

let person = getPerson();

Nếu chúng ta xác định, person: Personchúng ta sẽ mất một phần thông tin. Chúng ta biết getPersontrả về một đối tượng có thuộc tính không tùy chọn được gọi name, nhưng việc mô tả nó như Personthế sẽ đưa tính tùy chọn trở lại.

Giải pháp 2: Sử dụng một định nghĩa chính xác hơn

type Require<T, K extends keyof T> = T & {
  [P in K]-?: T[P]
};

function getPerson() {
  let person = {name:"John"};
  return person;
}

let person: Require<Person, 'name'> = getPerson();
let name1:string = person.name;

Giải pháp 3: Thiết kế lại giao diện của bạn

Một hình dạng trong đó tất cả các thuộc tính là tùy chọn được gọi là kiểu yếu và thường là một chỉ báo của thiết kế xấu. Nếu chúng tôi tạo ra namemột thuộc tính bắt buộc, vấn đề của bạn sẽ biến mất.

interface Person {
  name:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

Có cùng một vấn đề.

Tôi phát hiện ra rằng các kịch bản phản ứng thêm "strict": truevào tsconfig.json.

Sau khi tôi loại bỏ nó, mọi thứ hoạt động tốt.

Biên tập

Cần cảnh báo rằng việc thay đổi thuộc tính này có nghĩa là bạn:

không được cảnh báo về các lỗi thời gian chạy tiềm ẩn nữa.

như đã được PaulG chỉ ra trong các bình luận! Cảm ơn bạn :)

"strict": falseChỉ sử dụng nếu bạn hiểu đầy đủ về những gì nó ảnh hưởng!