Typescript Type 'String' Is Not Assignable to Type

Typescript Type 'string' is not assignable to type

Update

As mentioned in @Simon_Weaver's answer, since TypeScript version 3.4 it's possible to assert it to const:

let fruit = "Banana" as const;

Old answer

You'll need to cast it:

export type Fruit = "Orange" | "Apple" | "Banana";
let myString: string = "Banana";

let myFruit: Fruit = myString as Fruit;

Also notice that when using string literals you need to use only one |

TS2322: Type 'string' is not assignable to type 'union | of | strings'

Try to add as const to the options definiton:

const options = {
    clientSecret: paymentIntent.clientSecret,
    loader: "always",
} as const

TypeScript will often widen string literals to string. By using as const, we can stop TypeScript from widening literal types. This will make all properties readonly so TypeScript can make sure the values won't change afterwards.

You could also add the correct type to options:

const options: StripeElementsOptions = {
    clientSecret: paymentIntent.clientSecret,
    loader: "always",
}

Type 'string[]' is not assignable to type 'string' in Antd Select value?

It was because my onChange handler still had value: string on it, instead of value: Array<string>!

How to solve the Type 'string' is not assignable to type 'AOI | DIMM | FAN | undefined' ts error

You could extract the strings into a type (as pointed out by @Alexey's answer), and export the type from the component so that callers can use it to declare their kind bindings:

<!-- MyComponent.vue -->
<script lang="ts">
import { defineComponent, type PropType } from 'vue';

export type KindType = 'AOI' | 'DIMM' | 'FAN'

export default defineComponent({
  props: {
    kind: { type: String as PropType<KindType> }
  },
})
</script>

Callers of this component could use type assertion (ref('myString' as KindType)) to tell TypeScript to treat any string as a KindType, as seen below. A disadvantage here is this allows invalid strings (i.e., not one of the KindType strings), which could lead to unexpected behavior.

<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import MyComponent, { type KindType } from './components/MyComponent.vue'

const kind = ref('foo' as KindType) // ⛔️ compiles but allows any string
</script>

<template>
  <MyComponent :kind="kind" />
</template>

A more robust solution is to pass a type argument to ref, using ref<KindType>('myString'). This enables a helpful compiler error when the string value is invalid.

<script setup lang="ts">
import { ref } from 'vue'
import MyComponent, { type KindType } from './components/MyComponent.vue'

const kind = ref<KindType>('FAN') // ✅ allows only KindType strings
</script>

<template>
  <MyComponent :kind="kind" />
</template>

demo

Typescript type A is not assignable to type A (same type)

They're not actually the same thing, the name "TranslatorLangs" is being used to mean two different things. First, it's an enum. Second, it's a name for the generic parameter than handle accepts. To rename it so i can refer to them separately, let's change the handle function to:

async handle<T>(interaction: ButtonInteraction, value: T): Promise<void>

This line is saying that handle is a generic function. "T" is a placeholder for whatever type they decide to call it with. They might decide that T is TranslatorLangs, but they could also pass in anything else, such as a boolean. So when you try to pass that boolean into setUserLocale, you get an error.

I think what you're trying to do is make ButtonHandlerInterface itself be generic, as in:

export interface ButtonHandlerInterface<T = unknown> {
  commandName: string;
  handle(interaction: ButtonInteraction, value: T): void | Promise<void>
}

You'll then use it like this:

export default class MbtiCommandHandler implements ButtonHandlerInterface<TranslatorLangs> {
   // ...
  async handle(interaction: ButtonInteraction, value: TranslatorLangs): Promise<void> {
  // ...

Playground link

React Typescript - Argument of type 'string' is not assignable to parameter of type within useState

You're not calling setData with the right type of argument.

useState<InspectionReportData[] | null>()

This line means you'll call setState with one of two types: null or an array of InspectionReportData.

You are actually calling it with a string type: setData(response.data + french);

You need to either make it accept a string or change the way you're calling it.

This is exactly what the error message means.

Getting a type error when writing a function: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.(2345)

This is because when you use String.prototype.at, TypeScript uses built in type of at method:

String.at(index: number): string | undefined

It means that if even you are 100% sure that It should return string, TS still think that it is string | undefined.

---

Related Topics