ts study notes - Advanced articles

Advanced

Type alias

Type alias used to type a new name from

type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver

function getName(n: NameOrResolver): Name {
  if(typeof n === 'string') {
    return n
  } else {
    return n()
  }
}

The above example, we used typeto create the type of alias.

Type alias type commonly used in the joint.

String literal type

Type string literal value used to constrain only a certain string.

type EventNames = 'click' | 'scroll' | 'mousemove'

function handleEvent(ele: Element, event: EventNames) {
  // do something
}

handleEvent(document.getElementById('hello'), 'scoll')
handleEvent(document.getElementById('world'), 'dbclick') // err dbclick 未存在于 EventNames 定义中

Note: Type alias string literal types are used typeto define

Originator

The combined arrays of the same type of object, the tuples (Tuple) incorporating different types of objects.

Ancestral origin and functional programming languages ​​(e.g., F #), ancestral frequently used in these languages.

example

Respectively define a pair of values stringand numberthe tuples.

let tao: [string, nubmer] = ['Tao', 26]

When the assignment element to access a known living index, you will get the correct type:

let tao: [string, nubmer]
tao[0] = 'tao'
tao[1] = 26

tao[0].slice(1)
tao[1].toFixed(2)

You can be assigned only one:

let tao: [string, nubmer]
tao[0] = 'tao'

But when directly Ganso types of variables to initialize or assign the need to provide all types of Ganso specified items.

let tao: [string, number] = ['tao']
// err

let tao: [string, number]
tao = ['tao']
// err

Cross-border element

When the additive element bounds of its type to be limited for each type of neuron progenitor union type

let tao: [string, number]
tao = ['tao', 26]
tao.push('http://tao.com') // success
tao.push(true) // err 类型必须是 string 或者 number

enumerate

Enumeration (the Enum) type is defined for values ​​within a certain range of the scene, such as one week only seven days, for the red, green and blue colors is defined.

Enumeration using enumkeyword to define:

enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat }

Enum members will be assigned from 0the start incrementing number (in steps of 1, to observe the negative and decimal), but also to enumerate the names of the enumeration values reverse mapping:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

// 在未手动赋值时， 枚举值会默认从数字0 开始递增
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

In fact, the above example is compiled as follows:

var Days;
(function (Days) {
    Days[Days['Sun'] = 0] = 'Sun'
  Days[Days["Mon"] = 1] = "Mon";
  Days[Days["Tue"] = 2] = "Tue"
  Days[Days["Wed"] = 3] = "Wed"
  Days[Days["Thu"] = 4] = "Thu"
  Days[Days["Fri"] = 5] = "Fri"
  Days[Days["Sat"] = 6] = "Sat"
})(Days || (Days = {}))

Manual assignment

We can also manually assign items to enumerate

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

If not manually assigned repeated manual assignment, normally it is normal, when performing direction mapping can manually assign will overwrite the former. (Especially when enumeration value is a number), so it is best not to let that happen.

Enumeration manually assigned or may not be a number, the type of case, you need to make assertions ignore tsc type checking (compiled results are also available)

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

Compilation results

var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] = 8] = "Mon";
    Days[Days["Tue"] = 9] = "Tue";
    Days[Days["Wed"] = 10] = "Wed";
    Days[Days["Thu"] = 11] = "Thu";
    Days[Days["Fri"] = 12] = "Fri";
    Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));

Manual assignment, type the assertion should not affect other enumeration values that must be placed in the last one, and should be a value, in spite of the above <any>'S'it is available

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};