Typescript prend-il actuellement (ou prévoit-il) de prendre en charge l' opérateur de navigation?.

c'est à dire:

var thing = foo?.bar
// same as:
var thing = (foo) ? foo.bar : null;

En outre, existe-t-il un nom plus commun pour cet opérateur (il est incroyablement difficile de chercher sur Google).

Mise à jour : elle est prise en charge à partir de TypeScript 3.7 et appelée chaînage facultatif : https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

Je ne trouve aucune référence à cela dans la spécification du langage TypeScript .

Quant à savoir comment appeler cet opérateur dans CoffeeScript, il est appelé l' opérateur existentiel (en particulier, la "variante d'accesseur" de l'opérateur existentiel).

De la documentation de CoffeeScript sur les opérateurs :

La variante d'accesseur de l'opérateur existentiel ?.peut être utilisée pour absorber des références nulles dans une chaîne de propriétés. Utilisez-le à la place de l'accesseur point .dans les cas où la valeur de base peut être nulle ou non définie .

Ainsi, la variante d'accesseur de l'opérateur existentiel semble être la bonne façon de se référer à cet opérateur; et TypeScript ne semble pas actuellement le prendre en charge (bien que d' autres aient exprimé le désir de cette fonctionnalité ).

Pas aussi sympa qu'un single?, Mais ça marche:

var thing = foo && foo.bar || null;

Vous pouvez utiliser autant de && que vous le souhaitez:

var thing = foo && foo.bar && foo.bar.check && foo.bar.check.x || null;

Ceci est défini dans la spécification de chaînage facultatif ECMAScript, nous devrions donc probablement faire référence au chaînage facultatif lorsque nous en discuterons. Mise en œuvre probable:

const result = a?.b?.c;

Le long et le court de celui-ci est que l'équipe TypeScript attend que la spécification ECMAScript soit resserrée, de sorte que leur implémentation puisse être ininterrompue à l'avenir. S'ils implémentaient quelque chose maintenant, cela finirait par nécessiter des changements majeurs si ECMAScript redéfinissait leurs spécifications.

Voir spécification de chaînage facultative

Là où quelque chose ne sera jamais du JavaScript standard, l'équipe TypeScript peut implémenter comme bon lui semble, mais pour les futurs ajouts ECMAScript, ils veulent préserver la sémantique même s'ils donnent un accès anticipé, comme ils l'ont fait pour tant d'autres fonctionnalités.

Raccourcis

Ainsi, tous les opérateurs funky JavaScripts sont disponibles, y compris les conversions de type telles que ...

var n: number = +myString; // convert to number
var b: bool = !!myString; // convert to bool

Solution manuelle

Mais revenons à la question. J'ai un exemple obtus de la façon dont vous pouvez faire une chose similaire en JavaScript (et donc TypeScript), bien que je ne suggère certainement pas que c'est une grâce car la fonctionnalité que vous recherchez vraiment.

(foo||{}).bar;

Donc, si fooest undefinedle résultat est undefinedet si fooest défini et possède une propriété nommée barqui a une valeur, le résultat est cette valeur.

Je mets un exemple sur JSFiddle .

Cela semble assez sommaire pour des exemples plus longs.

var postCode = ((person||{}).address||{}).postcode;

Fonction chaîne

Si vous cherchez désespérément une version plus courte alors que les spécifications sont toujours en suspens, j'utilise cette méthode dans certains cas. Il évalue l'expression et renvoie une valeur par défaut si la chaîne ne peut pas être satisfaite ou se retrouve nulle / non définie (notez que !=c'est important ici, nous ne voulons pas l'utiliser !==car nous voulons un peu de jonglage positif ici).

function chain<T>(exp: () => T, d: T) {
    try {
        let val = exp();
        if (val != null) {
            return val;
        }
    } catch { }
    return d;
}

let obj1: { a?: { b?: string }} = {
    a: {
        b: 'c'
    }
};

// 'c'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = {
    a: {}
};

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = {};

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = null;

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

Mise à jour: Oui, c'est supporté maintenant!

Il vient de sortir avec TypeScript 3.7: https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/

Il s'agit du chaînage facultatif : https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#optional-chaining

Avec elle, les éléments suivants:

let x = foo?.bar.baz(); 

est équivalent à:

let x = (foo === null || foo === undefined) ?
    undefined :
    foo.bar.baz();

Ancienne réponse

Il y a une demande de fonctionnalité ouverte pour cela sur github où vous pouvez exprimer votre opinion / désir: https://github.com/Microsoft/TypeScript/issues/16

Modifier le 13 novembre 2019!

Depuis le 5 novembre 2019, TypeScript 3.7 est livré et prend désormais en charge ?. l'opérateur de chaînage facultatif 🎉🎉🍾🍾🎉 !!!

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

À des fins historiques uniquement:

Éditer: j'ai mis à jour la réponse grâce au commentaire de fracz.

TypeScript 2.0 publié !.Ce n'est pas la même chose que?. (Safe Navigator en C #)

Voir cette réponse pour plus de détails:

https://stackoverflow.com/a/38875179/1057052

Cela indiquera uniquement au compilateur que la valeur n'est pas nulle ou non définie. Cela ne vérifiera pas si la valeur est nulle ou non définie.

Opérateur d'assertion non nul TypeScript

// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
    // Throw exception if e is null or invalid entity
}

function processEntity(e?: Entity) {
    validateEntity(e);
    let s = e!.name;  // Assert that e is non-null and access name
}

L'opérateur de chaînage facultatif Elvis (?.) Est pris en charge dans TypeScript 3.7.

Vous pouvez l'utiliser pour vérifier les valeurs nulles: cats?.miowsretourne null si cats est nul ou non défini.

Vous pouvez également l'utiliser pour appeler une méthode facultative: cats.doMiow?.(5) appellera doMiow s'il existe.

Accès La propriété est également possible: cats?.['miows'].

Référence: https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/

L'opérateur ?.n'est pas pris en charge dans TypeScript version 2.0 .

J'utilise donc la fonction suivante:

export function o<T>(someObject: T, defaultValue: T = {} as T) : T {
    if (typeof someObject === 'undefined' || someObject === null)
        return defaultValue;
    else
        return someObject;
}

l'utilisation ressemble à ceci:

o(o(o(test).prop1).prop2

de plus, vous pouvez définir une valeur par défaut:

o(o(o(o(test).prop1).prop2, "none")

Cela fonctionne très bien avec IntelliSense dans Visual Studio.

C'est enfin là!

Voici quelques exemples:

// properties
foo?.bar
foo?.bar()
foo?.bar.baz()
foo?.bar?.baz()

// indexing
foo?.[0]
foo?.['bar']

// check if a function is defined before invoking
foo?.()
foo.bar?.()
foo?.bar?.()

Mais cela ne fonctionne pas exactement de la même manière que votre hypothèse.

Au lieu d'évaluer

foo?.bar

à ce petit extrait de code, nous sommes tous habitués à écrire

foo ? foo.bar : null

il évalue en fait

(foo === null || foo === undefined) ?
    undefined :
    foo.bar

qui fonctionne pour toutes les valeurs de falsey comme une chaîne vide, 0 ou false.

Je n'ai tout simplement pas d'explication pourquoi ils ne le compilent pas foo == null

Nous avons créé cette méthode util tout en travaillant sur Phonetradr qui peut vous donner un accès sécurisé aux propriétés profondes avec Typescript:

/**
 * Type-safe access of deep property of an object
 *
 * @param obj                   Object to get deep property
 * @param unsafeDataOperation   Function that returns the deep property
 * @param valueIfFail           Value to return in case if there is no such property
 */
export function getInSafe<O,T>(obj: O, unsafeDataOperation: (x: O) => T, valueIfFail?: any) : T {
    try {
        return unsafeDataOperation(obj)
    } catch (error) {
        return valueIfFail;
    }
}

//Example usage:
getInSafe(sellTicket, x => x.phoneDetails.imeiNumber, '');

//Example from above
getInSafe(foo, x => x.bar.check, null);

Je ne recommande généralement pas cette approche (faites attention aux problèmes de performances), mais vous pouvez utiliser l'opérateur de propagation pour cloner peu profondément un objet, sur lequel vous pouvez ensuite accéder à la propriété.

 const person = { personId: 123, firstName: 'Simon' };
 const firstName = { ...person }.firstName;

Cela fonctionne car le type de 'firstName' est 'propagé' à travers.

Je vais l'utiliser le plus souvent lorsque j'ai une find(...)expression qui peut retourner null et que j'en ai besoin d'une seule propriété:

 // this would cause an error (this ID doesn't exist)
 const people = [person];
 const firstName2 = people.find(p => p.personId == 999).firstName;

 // this works - but copies every property over so raises performance concerns
 const firstName3 = { ...people.find(p => p.personId == 999) }.firstName;

Il peut y avoir des cas marginaux avec la manière dont le tapuscrit déduit les types et cela ne se compile pas, mais cela devrait généralement fonctionner.

C'est ce qu'on appelle le chaînage facultatif et c'est dans le script de type 3.7

Le chaînage facultatif nous permet d'écrire du code où nous pouvons immédiatement arrêter d'exécuter certaines expressions si nous rencontrons un null ou undefined

Comme indiqué précédemment, il est actuellement encore à l'étude, mais il est mort dans l'eau depuis quelques années.

S'appuyant sur les réponses existantes, voici la version manuelle la plus concise à laquelle je puisse penser:

jsfiddle

function val<T>(valueSupplier: () => T): T {
  try { return valueSupplier(); } catch (err) { return undefined; }
}

let obj1: { a?: { b?: string }} = { a: { b: 'c' } };
console.log(val(() => obj1.a.b)); // 'c'

obj1 = { a: {} };
console.log(val(() => obj1.a.b)); // undefined
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

obj1 = {};
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

obj1 = null;
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

Il échoue simplement en silence sur les erreurs de propriété manquantes. Il revient à la syntaxe standard pour déterminer la valeur par défaut, qui peut également être complètement omise.

Bien que cela fonctionne pour les cas simples, si vous avez besoin de choses plus complexes telles que l'appel d'une fonction, puis l'accès à une propriété sur le résultat, toutes les autres erreurs sont également avalées. Mauvaise conception.

Dans le cas ci-dessus, une meilleure version de l'autre réponse publiée ici est la meilleure option:

jsfiddle

function o<T>(obj?: T, def: T = {} as T): T {
    return obj || def;
}

let obj1: { a?: { b?: string }} = { a: { b: 'c' } };
console.log(o(o(o(obj1).a)).b); // 'c'

obj1 = { a: {} };
console.log(o(o(o(obj1).a)).b); // undefined
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

obj1 = {};
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

obj1 = null;
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

Un exemple plus complexe:

o(foo(), []).map((n) => n.id)

Vous pouvez également aller dans l'autre sens et utiliser quelque chose comme Lodash ' _.get(). C'est concis, mais le compilateur ne pourra pas juger de la validité des propriétés utilisées:

console.log(_.get(obj1, 'a.b.c'));

Pas encore (en septembre 2019), mais comme "l'opérateur de navigation en toute sécurité" est désormais à l'étape 3 , il est implémenté en TypeScript.

Surveillez ce numéro pour les mises à jour:

https://github.com/microsoft/TypeScript/issues/16

Plusieurs moteurs ont des implémentations précoces:

JSC: https://bugs.webkit.org/show_bug.cgi?id=200199

V8: https://bugs.chromium.org/p/v8/issues/detail?id=9553

SM: https://bugzilla.mozilla.org/show_bug.cgi?id=1566143

(via https://github.com/tc39/proposal-optional-chaining/issues/115#issue-475422578 )

Vous pouvez installer un plugin pour le prendre en charge maintenant:

npm install --save-dev ts-optchain

Dans votre tsconfig.json:

// tsconfig.json
{
    "compilerOptions": {
        "plugins": [
            { "transform": "ts-optchain/transform" },
        ]
    },
}

Je m'attends à ce que cette réponse soit obsolète au cours des 6 prochains mois, mais j'espère que cela aidera quelqu'un dans l'intervalle.

_.get(obj, 'address.street.name')fonctionne très bien pour JavaScript où vous n'avez aucun type. Mais pour TypeScript, nous avons besoin du véritable opérateur Elvis!