What does syntax in example code mean (typescript, react)?

Question

const example: (string: string) => string = string => {
  return string.split("");
}

Its not a detailed question - I know, but I couldnt think of another way to ask and I simply do not understand what is happening in the below code. I only understand only string as type is accepted, but how is this even a function -shouldnt it be:

const example = (string:string) => return string.split("")}

instead? Thanks!!

UPDATE: There was some miscommunication maybe. I only want to understand the following (in bold letters):

const example**: (string: string) => string** = string => {
  return string.split("");
}

1. why is it ":" and not "="?
2. what is: => string = string => why not just = string =>?

Answer 1

Okay, actually there's a type error, it should be:

const example: (string: string) => string[] = string => {
  return string.split("");
}

instead of (string: string) => string because string.split() will return an array.

also, it's better to rename the argument to something other than string as it can be easily confused with the type string .

Here's a fixed version:

const example: (someArg: string) => string[] = (someString) => {
  return someString.split('');
};

So, the function "example" simply takes an argument(of type string ) and returns an array of strings that is indicated by (string: string) => string[] .

You can also use the below syntax if you find above a bit confusing:

const example2 = (someString: string): string[] => {
    return someString.split('');
};

Update:

Considering this (string: string) => string ,

why is it ":" and not "="?

It is not = because we're not yet assigning the value we're still in the process of assigning the type, after giving the type we're indeed using = to finally give it a value(which is an arrow function)

what is: => string = string => why not just = string =>?

TypeScript does understand that the returned value is an array of strings but just to explicitly mention the return type(to make sure that the function always returns what we want it to return), we use => to separate the argument types and return type. Think of this as an arrow function like syntax for giving the type to a function.

Answer 2

This is the type:

               vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
const example: (someArg: string) => string[] = (someString) => {
  return someString.split('');
};

A function taking a string and returning a string. Everything after the equals sign is the value.

Answer 3

You can use arrow function methodology in typescripts. It is a common way in most programming language for make more easy to read.

It is just a syntax. In background typescript will convert this method to vanilla function version.

your above code look like below code. There are many ways to write the same method different versions.

    // you can write like this 
    function example( string: string ){
      return string.split("");
    }

    // If you need to write multiple lines you should use circle brackets
    const example = ( str : string ) => {
        // do something here...
        return str.split("");
    }
    // if you don't need to write multiple lines you can return like this.
    const example = ( str : string ) => str.split("");
   
   // But If you want to use return syntax. you can do. it is up to you.
   const example = ( str : string ) => return str.split("");

If you give more detail. I can help you and apologize for my english.

If I misunderstand sorry about that.