In typescript why do the and operators flip their meaning when used on function types

0 votes

In this code, example1 and example2 are confusing me:

type F1 = (a: string, b:string) => void;
type F2 = (a: number, b:number) => void;

//   re: example 1 and 2: 
//   After the =, | means "or" and & means "and"
//   Before the =, & means "or" and | means "and"
const example1: F1 & F2 = (a: string | number, b: string | number) => {}
example1("Hello", "World")
example1(1, 2)
// example1("Hello", 2) // Error! number is not assignable to parameter of type string... (and vice versa)

const example2: F1 | F2 = (a: string | number, b: string | number) => {}
// example2("Hello", "World") // Error! Argument of type string is not assignable to parameter of type never
// example2(1, 2) // Error! Argument of type number is not assignable to parameter of type never
// example2("Hello", 2) // Error! Argument of type string is not assignable to parameter of type never

//   re: example 3,4,5:
//   Before the =, | means "or"
// const example3: number | string = true // Error! Type Boolean is not assignable to type number | string
const example4: number | string = 1
const example5: number | string = "foo"

//   re: example 6,7
//   Before the =, & means "and"
// const example6: {a: string} & {b: number} = {a: "foo"} // Error! Type '{ a: string; }' is not assignable to type '{ a: string; } & { b: number; }'. 
// Property 'b' is missing in type '{ a: string; }' but required in type '{ b: number; }'.
const example7: {a: string} & {b: number} = {a: "foo", b: 5}

To me it seems like the operators in example1 and example2 (before the =) are behaving the opposite way from the others. Here's how I would expect these examples to work:

const example1: F1 & F2 = (a: string | number, b: string | number) => {}
// example2("Hello", "World") // Error! Argument of type string is not assignable to parameter of type never
// example2(1, 2) // Error! Argument of type number is not assignable to parameter of type never
// example2("Hello", 2) // Error! Argument of type string is not assignable to parameter of type never

const example2: F1 | F2 = (a: string | number, b: string | number) => {}
example1("Hello", "World")
example1(1, 2)
// example1("Hello", 2) // Error! number is not assignable to parameter of type string... (and vice versa)

It would also make sense to me if example1 didn't even compile, since "type of string !== type of number".

Why isn't this working as expected?

Jul 13 in TypeSript by Logan
• 2,140 points
25 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

What is TypeScript and why would I use it in place of JavaScript?

TypeScript is a superset of JavaScript which primarily ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
13 views
0 votes
1 answer
0 votes
1 answer

What does the ! (exclamation mark) do in TypeScript?

The exclamation mark is called the non-null ...READ MORE

answered Jun 1 in TypeSript by Nina
• 3,020 points
132 views
0 votes
1 answer

What does the @ (at sign) sign do in TypeScript?

The big news this week is the ...READ MORE

answered Jun 10 in TypeSript by Nina
• 3,020 points
25 views
0 votes
0 answers
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 11,280 points
722 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 11,280 points
464 views
0 votes
0 answers

how to sign bitcoin psbt with ledger?

I'm trying to sign a PSBT transaction ...READ MORE

Mar 9 in Blockchain by Soham
• 8,740 points
277 views
0 votes
0 answers

Can't bind to 'ngModel' since it isn't a known property of 'input'

I have this  input in my component ...READ MORE

Apr 29 in Other DevOps Questions by Kichu
• 19,040 points
149 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP