Order of execution missing in class

Question

Order of execution missing in class

On numerous occasions, I find myself facing the same dilemma. The data types are incorrect and additional verification is required.

Let's consider a simple example, where we have a Car class that allows us to retrieve a model name. Upon initialization of this class, the model property is set to null.

We have two methods: one to set and another to get the model:

class Car {
    private model: string | null

    setModel() {
        this.model = 'a3'
    }
  
    getModel() {
        return this.model
    }
}

While using this class, everything seems to work as expected, with the model being correctly defined in the order of execution.

But TypeScript only recognizes the original type as a string or null.

function searchForBrand(model: string) {
    if (model === 'a3') return 'audi'

    return ''
}


const car = new Car()
car.setModel()

console.log(car) // { model: 'a3' }

const currentModel = car.getModel()
console.log(currentModel) // a3

searchForBrand(currentModel) // Error: Argument of type 'string | null'

I am inclined to use ! (even though it's not ideal), or handle this issue within my function or beforehand. This solution involves extra steps and might not be the most effective approach. What do you think?

Playground

The actual scenario where I face a similar challenge:

class Stream {
  idealConstraint = {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 60 },
    advanced: [ { zoom: 2 } ]
  }
  flux: MediaStream | null = null

  async useStreamWithConstraints() {
    const constraints = {
      video: {
        facingMode: FACING_MODE.ENVIRONMENT,
        noiseSuppression: true,
      },
      audio: false
    }
  
    await this.useUserStream(constraints)
    if (APP_MODE === 'development') await this.useDevelopmentStream() 

    await this.applyVideoConstraints(this.idealConstraint)
    
    return this.flux
  }

  async useUserStream(constraints: MediaStreamConstraints) {
    this.flux = await navigator.mediaDevices.getUserMedia(constraints)
  }

  async useDevelopmentStream() {
    const developmentDeviceId = (await navigator.mediaDevices.enumerateDevices()).filter(device => device.label === 'OBS Virtual Camera')[0]?.deviceId
    const developmentStream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: developmentDeviceId } })
    const developmentStreamDeviceId = developmentStream.getVideoTracks()[0]?.getCapabilities()?.deviceId

    if (developmentStreamDeviceId === developmentDeviceId) this.flux = developmentStream
  }

  async applyVideoConstraints(constraints: MediaTrackConstraints) {
    try {
      const videoTrack = this.flux?.getVideoTracks()[0]
      await videoTrack?.applyConstraints(constraints)
    } catch (error) {
      console.error('Could not apply constraints')
    }
  }

  getFluxSettings() {
    return this.flux?.getVideoTracks()[0]?.getSettings()
  }

  getFluxCapabilities() {
    return this.flux?.getVideoTracks()[0]?.getCapabilities()
  }

  setZoom(zoomValue: number) {
    return this.applyVideoConstraints({
      advanced: [{ zoom: zoomValue }]
    })
  }
}

typescript

Answer 1

Answer №1

In the previous comment by @jonrsharpe, it was suggested that a better approach might be to prevent the creation of any invalid instances of Car. Instead, consider passing the model as a parameter in the constructor to set it during the initialization of the Car object.

class Car {
    constructor(private model: string){}
  
    getModel(): string {
        return this.model
    }
}

function searchForBrand(model: string) {
    if (model === 'a3') return 'audi'

    return ''
}


const car = new Car('a3')

const currentModel = car.getModel()
searchForBrand(currentModel)

Playground

Answer 2

In the previous comment by @jonrsharpe, it was suggested that a better approach might be to prevent the creation of any invalid instances of Car. Instead, consider passing the model as a parameter in the constructor to set it during the initialization of the Car object.

class Car {
    constructor(private model: string){}
  
    getModel(): string {
        return this.model
    }
}

function searchForBrand(model: string) {
    if (model === 'a3') return 'audi'

    return ''
}


const car = new Car('a3')

const currentModel = car.getModel()
searchForBrand(currentModel)

Playground

Answer 3

Answer №2

Here is the updated code that may be helpful to someone. If there are any missing parts, feel free to leave a comment.

Thank you for the insightful explanation.

class Stream {
  static idealConstraint = {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 60 },
    advanced: [ { zoom: 2 } ]
  }
  flux: MediaStream

  constructor(flux: MediaStream) {
    this.flux = flux
  }

  static async create() {
    const flux = await this.#getUserFlux()
    const developmentFlux = await this.#getDevelopmentFlux()
    const usedFlux = developmentFlux ?? flux

    await this.#applyFluxConstraints(usedFlux, this.idealConstraint)

    return new this(usedFlux)
  }

  static #getUserFlux() {
    const constraints = {
      video: {
        facingMode: FACING_MODE.ENVIRONMENT,
        noiseSuppression: true,
      },
      audio: false
    }

    return navigator.mediaDevices.getUserMedia(constraints)
  }

  static async #getDevelopmentFlux() {
    if (APP_MODE !== 'development') return

    const developmentDeviceId = (await navigator.mediaDevices.enumerateDevices()).filter(device => device.label === 'OBS Virtual Camera')[0]?.deviceId
    if (!developmentDeviceId) return

    const developmentStream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: developmentDeviceId } } })

    return developmentStream
  }

  static async #applyFluxConstraints(flux: MediaStream, constraint: MediaTrackConstraints) {
    try {
      const videoTrack = flux.getVideoTracks()[0]
      await videoTrack.applyConstraints(constraint)
    } catch (error) {
      console.error('Could not apply constraints')
    }
  }

  get currentZoom() {
    return this.flux.getVideoTracks()[0].getSettings().zoom
  }

  getFluxCapabilities() {
    return this.flux.getVideoTracks()[0].getCapabilities()
  }

  setZoom(zoomValue: number) {
    const zoomConstraint = {
      advanced: [{ zoom: zoomValue }]
    }

    return Stream.#applyFluxConstraints(this.flux, zoomConstraint)
  }
}

Answer 4

Here is the updated code that may be helpful to someone. If there are any missing parts, feel free to leave a comment.

Thank you for the insightful explanation.

class Stream {
  static idealConstraint = {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 60 },
    advanced: [ { zoom: 2 } ]
  }
  flux: MediaStream

  constructor(flux: MediaStream) {
    this.flux = flux
  }

  static async create() {
    const flux = await this.#getUserFlux()
    const developmentFlux = await this.#getDevelopmentFlux()
    const usedFlux = developmentFlux ?? flux

    await this.#applyFluxConstraints(usedFlux, this.idealConstraint)

    return new this(usedFlux)
  }

  static #getUserFlux() {
    const constraints = {
      video: {
        facingMode: FACING_MODE.ENVIRONMENT,
        noiseSuppression: true,
      },
      audio: false
    }

    return navigator.mediaDevices.getUserMedia(constraints)
  }

  static async #getDevelopmentFlux() {
    if (APP_MODE !== 'development') return

    const developmentDeviceId = (await navigator.mediaDevices.enumerateDevices()).filter(device => device.label === 'OBS Virtual Camera')[0]?.deviceId
    if (!developmentDeviceId) return

    const developmentStream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: developmentDeviceId } } })

    return developmentStream
  }

  static async #applyFluxConstraints(flux: MediaStream, constraint: MediaTrackConstraints) {
    try {
      const videoTrack = flux.getVideoTracks()[0]
      await videoTrack.applyConstraints(constraint)
    } catch (error) {
      console.error('Could not apply constraints')
    }
  }

  get currentZoom() {
    return this.flux.getVideoTracks()[0].getSettings().zoom
  }

  getFluxCapabilities() {
    return this.flux.getVideoTracks()[0].getCapabilities()
  }

  setZoom(zoomValue: number) {
    const zoomConstraint = {
      advanced: [{ zoom: zoomValue }]
    }

    return Stream.#applyFluxConstraints(this.flux, zoomConstraint)
  }
}

Order of execution missing in class

Answer №1

Answer №2

Similar questions

Tips for choosing and filtering the preferred object in ES6

Creating a String Array and linking it to an Input Field

Numerous mistakes detected in the TypeScript code

Enhance your workflow with Visual Studio Code by incorporating multiple commands

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

Angular 6 - Using properties in classes

A static method written in Typescript within an abstract class for generating a new instance of the class itself

The TypeScript error "Uncaught ReferenceError: require is not defined" occurs when the

How can I ensure a function only runs after all imports have been successfully loaded in Vue 3?

Modify the scope in the middle of a scope function

Is it beneficial to use TypeScript for writing unit tests?

Using variables within the useEffect hook in ReactJS

Creating a unique type with a suffix of `px`

When dealing with ng effects, an undefined value replaces the stream observable

In React Typescript, the input type="checkbox" does not show any value in the value attribute

Error: module not found in yarn

Issue with accessing global variable in nested function using "this" in Angular 2

Conflicts arise when trying to create several objects with different material types in ThreeJS within the

The Bootstrap modal I implemented is opening correctly, but for some reason, the form inside is not appearing

Error in React Typescript Props in ListItem (Material UI Component)