About the TypeScript

Back last year (2017), TypeScript won its explosive growth. Today, as the amount of JavaScript code grows, more and more developers realize the limitations of JavaScript when building large projects. JavaScript is dynamically typed and can only be type checked at Runtime; It also causes problems with refactoring large projects, to the extent that it is not “readable”. TypeScript solves these problems well.

TypeScript was first opened source by Microsoft on GitHub in October 2012. TypeScript is a superset of JavaScript that allows us to use ES Future syntaxes as well as new syntaxes such as Enum, Tuple, Generics, and so on. Of course, providing an optional static type to JavaScript is one of the most important points of change.

In the following sections, I’ll briefly explain why static typing is good for large projects, as well as a hands-on approach to writing Function Type.

Static typing is friendly to large projects

Check for errors early

As mentioned earlier, JavaScript is a dynamically typed language. It doesn’t have a Type System and can only do Type checking at Runtime. If you’re not careful enough, the following things can happen:

In this simple example, we think the parameter to someMethod is an array, but it’s not, it’s a number. Of course, it gave an error.

When changing to TypeScript with simple type inference:

As you can see, it gives an error message before compiling.

Read code friendly

Maybe you also happen to think “code is for people to read, just to run on the machine”, and I’m sure you’ll add JSDoc to Function, Class, Modules, and so on. Unlike JSDoc, TypeScript provides type declarations and module interfaces that shape documents, provide hints for behavior, and verify correctness at compile time.

Change the previous example:

Of course, for large projects, this can be much more complicated. Finding bugs early makes it easier to read the code, and more or less makes it easier to refactor the project.

Function type

Start with a simple Function type:

(arg: number) = >string
Copy the code

In one of the above Function types, it takes a numeric argument and returns a string.

Now use it:

const func: (arg: number) = > string = String // In this case String is a method
Copy the code

In practice, this is not the case because TypeScript knows the type of String and can accurately deduce the type of func.

A more practical example:

function someMethods (callback: (arg: number) => string) {
  return callback(321)
}
Copy the code

Now, you can use this defined method, but the argument passed must conform to (arg: number) => string, for example you can use someMethods(string) instead of someMethods(number).

Plus the function returns:

function someMethod (
  callback: (num: number) => string
): string {
  const num = 123
  return String(num)
}
Copy the code

Sometimes, you don’t want to pass callback:

function someMethod ( callback? : (num: number) => string ): string { const num = 123 if (callback) { return callback(123) } return String(num) }Copy the code

Alternatively, we want callback to be required; if you don’t want to provide a function, you must explicitly provide null:

function someMethod (
  callback: null | ((num: number) => string)
): string {
  const num = 123
  if (callback) {
    return callback(123)
  }
  return String(num)
}
Copy the code

Define as a type:

type SomeMethod = (callback? : ((num: number) = >string)) = > string
Copy the code

In this type, we define a someMethod method that takes an optional argument, callback, and specifies that the callback has one and only one argument of type number.

Next, we extend the type, use generics (you can easily understand that generics are data types) and change its callback:

type SomeMethod<T> = (
  callback: (value: T, index: number, array: T[]) = > T
) => T
Copy the code

Add a default value to the generic and an optional argument:

type SomeMethod<T = string> = (
  callback: (value: T, index: number, array: T[]) = >T, thisArg? : T ) => TCopy the code

At this point, a simple Function Type is complete.

In fact, there are various interesting ways to play Function types:

type SomeMethod<T = string> = (
  callback: (. arg: (T[] | T) []) = > T[]
  // ...
) => T
Copy the code
// Multigenerics, with constraints
type OthemMethod <T, P extends keyof T> = (
  obj: T,
  key: P
) => T[P]
Copy the code

In fact, with TypeScript version 2.4, it is possible to determine the return value of a function call

function arrayMap<T, U>(
  f: (x: T) => U
): (a: T[]) => U[] {
  return a => a.map(f)
}

const lengths: (a: string[]) => number[] = arrayMap(a => a.length)

console.log(lengths(['123', '1', '1'])) // 3, 1, 1
Copy the code

And more interesting ways to write it, which I won’t cover here.

Reference:

  • https://www.typescriptlang.org/docs/home.html
  • https://zhuanlan.zhihu.com/p/24267683
  • https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html
  • https://juejin.cn/post/6844903497205448711