TypeScript中的约束与类型断言(2)

一、TypeScript中的联合类型

• 联合类型表示取值可以为多种类型中的一种
• 只能访问此联合类型的所有类型里共有的属性或方法

// 联合类型
var muchType:string|number = '1'
muchType = 1
// console.log(muchType.length) // 报错
console.log(muchType.toString()) // 共有方法

二、TypeScript中的对象类型——接口

• 可描述类一部分抽象行为，也可描述对象的结构形状
• 接口一般首字母需要大写，部分编程语言会建议接口名称加上I前缀
• 赋值的时候，变量的形状必须和接口的形状保持一致

// 对象属性 
// 强约束对象的属性值和属性个数
interface IState {
  name: string
}
var obj:IState;
obj = {name: 'wayne'}

// 可限定属性是否唯一
interface IState2 {
  name: string,
  age?: number // 可有可无
}
var obj2:IState2;
obj2 = {name: 'wayne',age: 21}
obj2 = {name: 'wayne'}

// 可限定属性是否唯一
interface IState3 {
  name: string,
  age?: number, // 可有可无
  [propName:string]:any
}
var obj3:IState3;
obj3 = {name: 'wayne',age: 21}
obj3 = {name: 'wayne',a:1,b:2,c:3}

• 接口中可定义可选属性、只读属性、任意属性

// 只读属性 初始值后不可再赋值
interface IState4 {
  name: string,
  readonly age: number // 年龄一旦输入便不可更改
}
var obj4:IState4 = {name: 'wayne',age: 18}
obj4.name = 'zhangsan';
// obj4.age = 16 // 不可修改

三、TypeScript中的数组类型

• 可采用「类型 + 方括号」表示法
• 可采用数组泛型Array<elemType>表示法
• 可采用接口表示法

// 类型+方括号
var arr:number [] = [1,2,3]
var str2:string [] = ['1','2','3']
var obj5:any [] = [1,'2',3]
  // 数组泛型 Array<元素类型>
var arrType:Array<number> = [1,2,3]
var arrType2:Array<string> = ['1','2','3']
var arrType3:Array<any> = [1,'2','3']
// 接口表示法
interface IState5 {
  name: string,
  age?: number // 可有可无
}
interface IArr{
  [index:number]:IState5
}
var interArr:IArr = [{name: 'wayne',age: 1}]
var arrType5:Array<IState5> = [{name: 'wayne',age: 1}]
var arrType6:IState5 [] = [{name: 'wayne',age: 1}]

四、TypeScript中的函数类型

• 函数约束有函数本身的参数约束、返回值约束
• 还有函数本身赋值的变量的约束
• 可采用重载的方式才支持联合类型的函数关系

// 声明类型的函数
function funcType(name:string,age:number):number{
  return age
}
var ageNum:number = funcType('wayne',26)
function funcType2(name:string,age:number,sex?:string):number{
  return age
}
funcType2('wayne',26,'男')
function funcType3(name:string='wayne',age:number=26):number{
  return age
}
// 表达式类型的函数
var funcVar = function(name:string,age:number=26):number{
  return age
}
var funcType4:(name:string,age:number)=>number=function(name:string,age:number):number{
  return age
}
interface funcType5{
  (name:string,age:number):number
}
var funcType6:funcType5 = function(name:string,age:number):number{
  return age
}

var getValue = function(value:number|string):number|string{
  return value
}
getValue(1)
getValue('1')
// 输入number 输出number，输入string 输出string
function getValue2(value:number):number;
function getValue2(value:string):string;
function getValue2 (value:number|string):number|string{
  return value
}
// 重载
var gNum:number = getValue2(1);
var gStr:string = getValue2('1');

五、TypeScript中的类型断言

• 类型断言（Type Assertion）可以用来手动指定一个值的类型
• 语法<类型>值或as类型
• 在jsx语法（React 的jsx语法的ts版）中必须用后一种
• 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

// 类型断言
function getAssert(name:string|number){
  // return (<string>name).length
  return (name as string).length
}
// jsx中只能使用as语法