1. Annotation of functions

The annotation of a function contains

  • parameter
  • The return value
function fn(a: string): string {};
let fn: (a: string) => string = function(a) {};

type callback = (a: string): string;
interface ICallBack {
  (a: string): string;
}

let fn: callback = function(a) {};
let fn: ICallBack = function(a) {};

Copy the code

Optional parameters and default parameters

[1] Optional

Add? After the parameter name. To note that this parameter is optional

let div = document.querySelector('div'); function css(el: HTMLElement, attr: string, val? : any) {} / / div setting && CSS (div, 'width', '100 px); // get div && CSS (div, 'width');Copy the code

[2] Default parameters

We can also set default values for the parameters

  • Parameters with default values are also optional
  • Parameters with default values can automatically derive types from their values
Function sort(items: Array<number>, order = 'desc') {} sort([1,2,3]); // The default value of order is desc. // The value can also be restricted by the union type. Array < number >, order: 'desc' | 'asc' = 'desc') {} / / ok sort ([1, 2, 3]); / / ok sort ([1, 2, 3], 'asc'); / / the error sort ([1, 2, 3], "ABC");Copy the code

[3] Residual parameters

The remaining parameters are an array, so be careful when annotating

interface IObj { [key:string]: any; } function merge(target: IObj, ... others: Array<IObj>) { return others.reduce( (prev, currnet) => { prev = Object.assign(prev, currnet); return prev; }, target ); } let newObj = merge({x: 1}, {y: 2}, {z: 3});Copy the code

This in the function

In both JavaScript and TypeScript, this is the type of function we care about. How do we label this?

[1] Ordinary functions

For normal functions, this changes with the calling environment, so by default, this is labeled any, but we can explicitly label the type of this on the first argument bit of the function (which does not take up the actual argument position)

interface T { a: number; fn: (x: number) => void; } let obj1:T = {a: 1, fn(x: number) {//any console.log(this); }} let obj2:T = {a: 1, fn(this: T, x: number) {console.log(this); } } obj2.fn(1);Copy the code

[2] Arrow function

The arrow function’s this cannot be annotated like a normal function; its this annotation type depends on the annotation type of this in its scope

interface T { a: number; fn: (x: number) => void; } let obj2: T = { a: 2, fn(this: T) { return () => { // T console.log(this); }}}Copy the code

Function overloading

Sometimes, the same function may take different types of arguments and return different types of values. We can use function overloading to do this

function showOrHide(ele: HTMLElement, attr: string, value: 'block'|'none'|number) { // } let div = document.querySelector('div'); if (div) { showOrHide( div, 'display', 'none' ); showOrHide( div, 'opacity', 1 ); ShowOrHide (div, 'display', 1); showOrHide(div, 'display', 1); }Copy the code

Let’s look at function overloading

function showOrHide(ele: HTMLElement, attr: 'display', value: 'block'|'none'); function showOrHide(ele: HTMLElement, attr: 'opacity', value: number); function showOrHide(ele: HTMLElement, attr: string, value: any) { ele.style[attr] = value; } let div = document.querySelector('div'); if (div) { showOrHide( div, 'display', 'none' ); showOrHide( div, 'opacity', 1 ); ShowOrHide (div, 'display', 1); }Copy the code
  • Overloaded function types only need to define structures, not entities, like interfaces
interface PlainObject { [key: string]: string|number; } function css(ele: HTMLElement, attr: PlainObject); function css(ele: HTMLElement, attr: string, value: string|number); function css(ele: HTMLElement, attr: any, value? : any) { if (typeof attr === 'string' && value) { ele.style[attr] = value; } if (typeof attr === 'object') { for (let key in attr) { ele.style[attr] = attr[key]; } } } let div = document.querySelector('div'); if (div) { css(div, 'width', '100px'); css(div, { width: '100px' }); CSS (div, 'width'); }Copy the code

The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books