ReactWeb前端之路让前端飞

Typescript基本语法1--类型声明

2017-08-19  本文已影响33人  Dabao123

类型声明

比较常见的基础类型声明
1.字符串

var a : string ;    //声明字符串
console.log(a = 11);   //  error  type 11 not assignable to type string
console.log(a = 'string');

2.数字声明

var b : number;  //声明数字
console.log(b = 2) 
console.log(b = '11') //  error  type 11 not assignable to type 'number'

3.boolean

var c : boolean;
console.log(c = false);
console.log(c = 0) //  error  type 11 not assignable to type 'boolean'

4.数组声明

var array : Array<any>; //表示声明的数组可以是任何类型
var arrayb : Array<string> //表示声明的数组必须都是 字符串
var arrayo : Array<{name:string;age:number}> //表示数组元素必须是包含name 与 age的对象 并且name为字符串,age为数字
var arrayo = [{name:'dabao',age:25}]
var arrays : Array<{name:string,age?: number}>//这里表示数组元素必须为name的对象 age可选
var arrays = [{name:'dabao'}]

##类作为元素
class newDabao {
    name : string
    age ?: number
}
var classArray : newDabao;
console.log(classArray = {name:'cxh'})

上面代码中出现了Array<{name:string;age:number}>其中{name:string;age:number}并不是对象。有很多人写过这样的代码给我看,

var obj = {
  name : 'cxh',
  age : 12,
  height : 180
}
var c : obj
Paste_Image.png

5.定义对象

var obj : {}  
var obj4 : {name:string;age:number}
console.log(obj4= {name : 'dabao',age :26})

我们不能定义一个对象直接使用对象名来进行类型声明,但是我们却可以直接声明对象例如

var obj = {
      name:'cxh',age:13
}
var obj5 :obj   //报错
##but
var obj5 : {name:'cxh',age:13}
console.log(obj5 = {name:'daobao',age:13}) 
Paste_Image.png
var obj5 : {name:'cxh',age:13}
console.log(obj5 = {name:'cxh',age:13})   //ok

同理

var string1 : 'string'
console.log(string1 = 'string')  //ok

对变量声明class类

class Dabao {
      name : string
      age :  number
      height ?: number
     constructor(opations : {
                         name : string;
                         age:number;
                         height?:number 
   }){
          this.name = name
          this.age = age
          this.height = height
     }
}
var dabao  : Dabao = new Dabao('cxh',24)

一个 例子:
假设我们做一个表单,表单的内容分别为,姓名、年龄、地址、电话。我们把每个表单的数据组装成一个对象去处理,例如姓名,我们需要value来获取用户输入,placeholder用来提示用户,当然如果可以也可以把正则验证放进去。这样我们得到
username = {
value : 'dabao',
placeholder : '姓名'
}
首先我们先设置每个字段的数据类型

export class FieldBase {
          value : any
          placeholder:string
}

整个表单的数据

import { FieldBase } from './fieldBase'
export class FieldForm{
      username : FieldBase
      age : FieldBase
      address : FieldBase
      phone :FieldBase
      constructor(options: {
              username : FieldBase
              age : FieldBase
              address : FieldBase
              phone :FieldBase
      }){
              this.username = username
              this.age = age
              this.address = address
              this.phone = phone
      }
}

新建

import { FieldForm } from './fieldBase'
let formData : FieldForm = new FieldForm({
            username : {                      //数据必须是FieldBase型
                    value: "",
                    placeholder:"姓名" 
            },
            age : {
                    value: "",
                    placeholder:"年龄" 
            },
            address:{
                    value: "",
                    placeholder:"地址" 
            },
            phone:{
                    value: "",
                    placeholder:"手机"            
             }
})

二、类型断言

所谓的类型断言就是程序员告诉typescript的编译器,“听我的,这就是这种类型”例如:

let  dabao :  any = "woaidabao"
let  xiaobao = (<string>dabao).length

这里dabao是any类型,但是在计算长度时我断言它是string,亦可以这样做

let  xiaobao = (dabao  as string).length

具体情况在将接口的时候会继续说明。。

上一篇下一篇

猜你喜欢

热点阅读