tutorial - typescript vs javascript

Eu gosto de usar " Uniões discriminadas " (ou "Uniões etiquetadas"). Algo assim:

class LoadingFoo {
    status: 'loading';
}
class ErrorFoo {
    status: 'error';
    error: any;
}
class SuccessFoo<T> {
    status: 'success';
    value: T | undefined;
}

type Foo<T> = LoadingFoo | ErrorFoo | SuccessFoo<T>;

let bar: Foo<number>;
if (bar.status === 'success') {
    bar.value; // OK
    bar.error; // error
} else if (bar.status === 'error') {
    bar.value; // error
    bar.error; // OK
} else {
    bar.value; // error
    bar.error; // error
}

Você pode vê-lo em ação nesta demonstração ao vivo .

Muitas soluções para isso, como podemos ver nas outras respostas.

Ao ler a pergunta, seus requisitos são:

1. Use uma classe para representar uma união de estados
2. Use um membro da classe para restringir a um estado
3. Faça um trabalho estreito corretamente nos dois ramos.

O grande problema é 3. O estreitamento funcionará no ramo verdadeiro, cruzando-o com o tipo declarado pelo protetor de tipo. A ramificação else funciona excluindo o tipo declarado do tipo de variável. Isso funciona muito bem se o tipo for uma união e o compilador puder excluir todos os constituintes correspondentes da união, mas aqui temos uma classe, portanto, não há constituintes a serem excluídos e ficamos com o tipo Foo original.

A solução mais simples da IMO seria dissociar o tipo de instância da classe da classe real. Podemos digitar um construtor para retornar uma união com a união apropriada de estados. Isso permitirá que o mecanismo de exclusão funcione conforme o esperado no ramo else:

class _Foo {
  public value: string | null =  null;
  public hasValue(): this is { value: string } {
    return this.value !== null;
  }
}

const Foo : new () => _Foo & 
    ({ value: string } | { value: null }) 
    = _Foo as any;


const foo = new Foo();
if (foo.hasValue()) {
  // OK
  foo.value.toString();
} else {
  (foo.value); // TypeScript does NOT understand that this can only be null
}

Play

Podemos misturar vários estados:

class _Foo {
    public value: string | null = null;
    public error: string | null = null;
    public progress: string | null = null
    public isError(): this is { error: string } { // we just need to specify enough to select the desired state, only one state below has error: string
        return this.error !== null;
    }
    public isLoading(): this is { progress: string } { // we just need to specify enough to select the desired state, only one state below has progress: string
        return this.value === null && this.progress !== null;
    }
}

const Foo: new () => _Foo & ( 
    | { value: string, error: null, progress: null }  // not loading anymore
    | { value: null, error: null, progress: string }  // loading
    | { value: null, error: string, progress: null})
    = _Foo as any;


const foo = new Foo();
if (foo.isError()) {
    // we got an error
    foo.progress // null
    foo.value // null
    foo.error.big() // string
} else if (foo.isLoading()) {
    // Still loading
    foo.progress // string
    foo.value // null
    foo.error // null
} else {
    // no error, not loading we have a value
    foo.value.big() // string
    foo.error // null
    foo.progress // null
}

Play

A única limitação é que dentro da classe os guardas não funcionam.

Para sua informação, se você possui guardas de tipo que excluem todos os estados, pode até fazer o truque assertNever para garantir que todos os estados foram tratados: play

Não tenho certeza sobre o caso de uso que você está descrevendo (considere redigir a pergunta novamente para esclarecer mais talvez), mas se você estiver tentando trabalhar com um status, talvez as enums sejam melhores para você, assim você pode evitar verificações nulas e sempre mantenha um status de conjunto válido válido.

Aqui está um exemplo que eu fiz com base no que eu acho que é a sua funcionalidade desejada.

• digitações:

enum FoobarStatus {
  loading = 'loading',
  error = 'error',
  success = 'success'
}

interface IFoobar {
  status: FoobarStatus,
  isLoading: () => boolean, 
  isError: () => boolean, 
  isSuccess: () => boolean, 
}

• classe:

class Foobar<IFoobar> {
  private _status: FoobarStatus = FoobarStatus.loading;
  constructor(){
    this._status = FoobarStatus.loading;
  }
  get status(): FoobarStatus {
    return this._status
  }

  set status(status: FoobarStatus) {
    this._status = status;
  }

  isLoading(): boolean {
    return (this._status === FoobarStatus.loading);
  }

  isError(): boolean {
    return (this._status === FoobarStatus.error);
  }

  isSuccess(): boolean {
    return (this._status === FoobarStatus.success);
  }
}

• Função auxiliar para console.logs () "

function report(foobar: IFoobar): void {
  console.log('---- report ----');
  console.log("status:", foobar.status);
  console.log("isLoading:", foobar.isLoading());
  console.log("isError:", foobar.isError());
  console.log("isSucess:", foobar.isSuccess());
  console.log('----- done -----');
}

• Trabalhando com foobar:

const foobar = new Foobar<IFoobar>();
report(foobar);
foobar.status = FoobarStatus.success;
report(foobar);

Você pode criar um tipo que possa lidar com três casos:

• Sucesso: o valor foi obtido e agora está disponível
• Carregando: estamos buscando o valor
• Falha: não foi possível buscar o valor (erro)

type AsyncValue<T> = Success<T> | Loading<T> | Failure<T>;

Em seguida, você pode definir todos esses tipos com seus guardas personalizados:

class Success<T> {
  readonly value: T;

  constructor(value: T) {
    this.value = value;
  }

  isSuccess(this: AsyncValue<T>): this is Success<T> {
    return true;
  }

  isLoading(this: AsyncValue<T>): this is Loading<T> {
    return false;
  }

  isError(this: AsyncValue<T>): this is Failure<T> {
    return false;
  }
}

class Loading<T> {
  readonly loading = true;

  isSuccess(this: AsyncValue<T>): this is Success<T> {
    return false;
  }

  isLoading(this: AsyncValue<T>): this is Loading<T> {
    return true;
  }

  isError(this: AsyncValue<T>): this is Failure<T> {
    return false;
  }
}

class Failure<T> {
  readonly error: Error;

  constructor(error: Error) {
    this.error = error;
  }

  isSuccess(this: AsyncValue<T>): this is Success<T> {
    return false;
  }

  isLoading(this: AsyncValue<T>): this is Loading<T> {
    return false;
  }

  isError(this: AsyncValue<T>): this is Failure<T> {
    return true;
  }
}

Agora você está pronto para usar o AsyncValue no seu código:

function doSomething(val: AsyncValue<number>) {
  if(val.isLoading()) {
    // can only be loading
  } else if (val.isError()) {
    // can only be error
    val.error
  } else {
    // can only be the success type
    val.value // this is a number
  }
}

que pode ser invocado com um desses:

doSomething(new Success<number>(123))
doSomething(new Loading())
doSomething(new Failure(new Error('not found')))