Mecanografiado: Escriba 'cadena | undefined 'no se puede asignar al tipo' cadena '

Cuando hago que cualquier propiedad de una interfaz sea opcional, aparece un error como seguir al asignar su miembro a alguna otra variable

TS2322: Escriba 'cadena | undefined 'no se puede asignar al tipo' cadena '. El tipo 'indefinido' no se puede asignar al tipo 'cadena'.

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 

¿Cómo puedo solucionar este error?

Ahora puede usar el operador de aserción no nula que está aquí exactamente para su caso de uso.

Le dice a TypeScript que aunque algo parece que podría ser nulo, puede confiar en que no lo es:

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

Para evitar el error de compilación que usé

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

Y luego valide la cadena vacía.

Sé que esta es una respuesta un poco tardía, pero otra forma además de la respuesta de yannick https://stackoverflow.com/a/57062363/6603342 para usar. es convertirlo como una cadena y decirle a TypeScript que estoy seguro de que esta es una cadena que convierte

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

a

let name1:string = person.name as string;

Esto hará que el error desaparezca, pero si por casualidad esto no es una cadena , obtendrá un error en tiempo de ejecución, que es una de las razones por las que estamos usando TypeScript para asegurarnos de que el tipo coincida y evitar tales errores en tiempo de compilación .

A partir de TypeScript 3.7, puede utilizar el operador de fusión nula ?? . Puede pensar en esta función como una forma de "retroceder" a un valor predeterminado cuando se trata de nulos o indefinidos

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

El ??operador puede reemplazar los usos de ||cuando se intenta usar un valor predeterminado y se puede usar cuando se trata de valores booleanos, números, etc., donde ||no se pueden usar.

A partir de TypeScript 4, puede utilizar el ??=operador de asignación como a ??= balternativa aa = a ?? b;

intente averiguar de antemano cuál es el valor real. Si persontiene un válido name, asígnelo a name1, de lo contrario, asigne undefined.

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

Una forma más preparada para la producción de manejar esto es asegurarse de que nameesté presente. Suponiendo que este es un ejemplo mínimo de un proyecto más grande en el que está involucrado un grupo de personas, no sabe cómo getPersoncambiará en el futuro.

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

let name1: string = person.name;

Alternativamente, puede escribir name1como string | undefinedy manejar casos de undefinedmás abajo. Sin embargo, normalmente es mejor manejar los errores inesperados antes.

También puede permitir que TypeScript infiera el tipo omitiendo el tipo explícito: let name1 = person.nameesto aún evitará que name1se reasigne como un número, por ejemplo.

A continuación, le mostramos una forma rápida de conocer lo que está sucediendo:

Cuando hiciste lo siguiente:

¿nombre? : cuerda

Le estaba diciendo a TypeScript que era opcional. Sin embargo, cuando lo hizo:

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

No dejaste otra opción. Necesitaba tener una Unión que refleje el tipo indefinido:

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

Usando su respuesta, pude esbozar lo siguiente, que es básicamente, una interfaz, una clase y un objeto. Encuentro este enfoque más simple, no importa si usted no lo hace.

// 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());

Está intentando establecer la variable name1, el tipo establecido como una cadena estricta (DEBE ser una cadena) con el valor del campo del objeto name, el tipo de valor establecido como una cadena opcional (puede ser una cadena o indefinido, debido al signo de pregunta). Si realmente necesita este comportamiento, debe cambiar el tipo de name1este:

let name1: string | undefined = person.name;

Y estará bien;

Tenga en cuenta que si la variable es de una matriz o desestructuración, puede proporcionar valores predeterminados:

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);

Puede hacer uso del encadenamiento opcional de Typecript. Ejemplo:

const name = person?.name;

Si la propiedad nameexiste en elperson objeto, obtendría su valor, pero si no, automáticamente devolvería indefinido.

Puede hacer uso de este recurso para una mejor comprensión.

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

Puede utilizar el NonNullabletipo de utilidad:

Ejemplo

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

Docs .

Solución 1: elimine la definición de tipo explícita

Como getPersonya devuelve un Personcon un nombre, podemos usar el tipo inferido.

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

let person = getPerson();

Si tuviéramos que definir person: Person, perderíamos una pieza de información. Sabemos que getPersondevuelve un objeto con una propiedad no opcional llamada name, pero describirlo como Persondevolvería la opcionalidad.

Solución 2: use una definición más precisa

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;

Solución 3: rediseña tu interfaz

Una forma en la que todas las propiedades son opcionales se denomina tipo débil y generalmente es un indicador de mal diseño. Si tuviéramos que hacer nameuna propiedad requerida, su problema desaparecería.

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

Tuve el mismo problema.

Me entero de que reaccione-scripts añaden "strict": truea tsconfig.json.

Después de quitarlo, todo funciona muy bien.

Editar

Debe advertir que cambiar esta propiedad significa que usted:

ya no se le advierte sobre posibles errores en tiempo de ejecución.

como ha señalado PaulG en los comentarios. Gracias :)

¡Úselo "strict": falsesolo si comprende completamente lo que afecta!