Typescript Error skyAtmosphere, handling false

Hi,

I get the error, when setting the skyAtmosphere in the viewer-options to false:

TS2345: Argument of type ‘{ requestRenderMode: boolean; maximumRenderTimeChange: number; homeButton: boolean; baseLayerPicker: boolean; fullscreenButton: boolean; sceneModePicker: boolean; infoBox: boolean; selectionIndicator: boolean; … 7 more …; skyAtmosphere: boolean; }’ is not assignable to parameter of type ‘ConstructorOptions’.
Types of property ‘skyAtmosphere’ are incompatible.
Type ‘boolean’ is not assignable to type ‘false | SkyAtmosphere | undefined’.

I think, that this can happen also on other definitions due that false is a boolean in typescript.

Regards

Rüdiger

1 Like

@Ruediger_Brand

Thank you for providing some details on the error that you are receiving. Which other definitions are you seeing this behavior for? I suspect that this is more of a Typescript error than a CesiumJS error.

@markchagers and I have worked on several Typescript related issues together. @markchagers do you have any suggestions for @Ruediger_Brand?

-Sam

@Ruediger_Brand Strictly speaking a boolean is not assignable to a type false | SkyAtmosphere | undefined (which is a so-called composite type definition) since a boolean can also be true which is not part of this definition.
Are you trying to assign it the value of a (boolean) variable or are you using false explicitly?
If you could provide the line of your code where your issue occurs or a sandcastle example, that would give us some context.

1 Like

@markchagers

@sam.rothstein

Hi Mark, Sam, I’m trying to set false and then I got the error.

From my knowledge false is handled in typescript as boolean and therefore you cannot assign it.
What do you recommend ?

I think I will have the same behavoir in all cases with type false | …

Rüdiger

@markchagers
@sam.rothstein

in viewer constructor_options - definitions:

skyAtmosphere?: SkyAtmosphere | false | undefined;

and then I want to set similar to

var viewer = new Cesium.Viewer(“cesiumContainer”, {
skyAtmosphere: false,
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain(),
scene3DOnly: true,
});

Can you post a complete example? I use skyAtmosphere: false as an argument in Typescript without any issues – I’m not able to reproduce the error you’re getting.

1 Like

@James_B

Hi James,

I use a project with typescript and react - the component Map3D is a Cesium Viewer

export default class Map3D extends React.Component<IProps>{
	name: string;
        map3d!: Cesium.Viewer;
	...
	constructor(props: IProps) {
		super(props);
		this.name = 'Map3D';
		.....
	}

	componentDidMount() {
		const options3D = {
			requestRenderMode: true,
			maximumRenderTimeChange: Infinity,
			homeButton: false,
			baseLayerPicker: false,
			fullscreenButton: false,
			sceneModePicker: false,
			infoBox: true,
			selectionIndicator: true,
			geocoder: false,
			sceneMode: Cesium.SceneMode.SCENE3D,
			navigationHelpButton: false,
			animation: false,
			timeline: false,
			mapProjection: new Cesium.WebMercatorProjection(),
			// TilingPlane
			skyAtmosphere: false, // <--- error here
			contextOptions: {
				webgl: {
					alpha:true
				}
			},
			// scene3DOnly: true
		};
		
		this.map3d = new Cesium.Viewer("view3D", options3D);  // <-- error here
.... }
...}

I got the error, when I instantiate the viewer.

Rüdiger

The problem is with implicit typing. When Typescript infers the type of a variable from a literal you’re assigning to it, it treats literal property values as being their broader type – number literals become number, string literals become string, etc.

If you explicitly type const options3D: Viewer.ConstructorOptions = {...}, the error will be resolved. Alternately, you can write const options3D = { ... } as const;. This will create a readonly (frozen) object literal, and the type of options3D will use the individual values you specified instead of the wider primitive types.

I put together a simple Playground example to illustrate how this works.

@James_B

Thank you for the hint - i will try it !

1 Like