Typescript基本語(yǔ)法1--類(lèi)型聲明

類(lèi)型聲明

比較常見(jiàn)的基礎(chǔ)類(lèi)型聲明
1.字符串

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

2.數(shù)字聲明

var b : number;  //聲明數(shù)字
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.數(shù)組聲明

var array : Array<any>; //表示聲明的數(shù)組可以是任何類(lèi)型
var arrayb : Array<string> //表示聲明的數(shù)組必須都是 字符串
var arrayo : Array<{name:string;age:number}> //表示數(shù)組元素必須是包含name 與 age的對(duì)象 并且name為字符串,age為數(shù)字
var arrayo = [{name:'dabao',age:25}]
var arrays : Array<{name:string,age?: number}>//這里表示數(shù)組元素必須為name的對(duì)象 age可選
var arrays = [{name:'dabao'}]

##類(lèi)作為元素
class newDabao {
    name : string
    age ?: number
}
var classArray : newDabao;
console.log(classArray = {name:'cxh'})

上面代碼中出現(xiàn)了Array<{name:string;age:number}>其中{name:string;age:number}并不是對(duì)象。有很多人寫(xiě)過(guò)這樣的代碼給我看艺玲,

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

5.定義對(duì)象

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

我們不能定義一個(gè)對(duì)象直接使用對(duì)象名來(lái)進(jìn)行類(lèi)型聲明险污,但是我們卻可以直接聲明對(duì)象例如

var obj = {
      name:'cxh',age:13
}
var obj5 :obj   //報(bào)錯(cuò)
##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

對(duì)變量聲明class類(lèi)

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)

一個(gè) 例子:
假設(shè)我們做一個(gè)表單蒸痹,表單的內(nèi)容分別為岩齿,姓名头遭、年齡寓免、地址、電話(huà)计维。我們把每個(gè)表單的數(shù)據(jù)組裝成一個(gè)對(duì)象去處理袜香,例如姓名,我們需要value來(lái)獲取用戶(hù)輸入鲫惶,placeholder用來(lái)提示用戶(hù)蜈首,當(dāng)然如果可以也可以把正則驗(yàn)證放進(jìn)去。這樣我們得到
username = {
value : 'dabao',
placeholder : '姓名'
}
首先我們先設(shè)置每個(gè)字段的數(shù)據(jù)類(lèi)型

export class FieldBase {
          value : any
          placeholder:string
}

整個(gè)表單的數(shù)據(jù)

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 : {                      //數(shù)據(jù)必須是FieldBase型
                    value: "",
                    placeholder:"姓名" 
            },
            age : {
                    value: "",
                    placeholder:"年齡" 
            },
            address:{
                    value: "",
                    placeholder:"地址" 
            },
            phone:{
                    value: "",
                    placeholder:"手機(jī)"            
             }
})

二剑按、類(lèi)型斷言

所謂的類(lèi)型斷言就是程序員告訴typescript的編譯器疾就,“聽(tīng)我的,這就是這種類(lèi)型”例如:

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

這里dabao是any類(lèi)型艺蝴,但是在計(jì)算長(zhǎng)度時(shí)我斷言它是string猬腰,亦可以這樣做

let  xiaobao = (dabao  as string).length

具體情況在將接口的時(shí)候會(huì)繼續(xù)說(shuō)明。猜敢。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末姑荷,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子缩擂,更是在濱河造成了極大的恐慌鼠冕,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,000評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胯盯,死亡現(xiàn)場(chǎng)離奇詭異懈费,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)博脑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)憎乙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)票罐,“玉大人,你說(shuō)我怎么就攤上這事泞边「醚海” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,561評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵阵谚,是天一觀的道長(zhǎng)蚕礼。 經(jīng)常有香客問(wèn)我,道長(zhǎng)梢什,這世上最難降的妖魔是什么奠蹬? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,782評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮绳矩,結(jié)果婚禮上罩润,老公的妹妹穿的比我還像新娘。我一直安慰自己翼馆,他們只是感情好割以,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著应媚,像睡著了一般严沥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上中姜,一...
    開(kāi)封第一講書(shū)人閱讀 52,394評(píng)論 1 310
  • 那天消玄,我揣著相機(jī)與錄音,去河邊找鬼丢胚。 笑死翩瓜,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的携龟。 我是一名探鬼主播兔跌,決...
    沈念sama閱讀 40,952評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼峡蟋!你這毒婦竟也來(lái)了坟桅?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,852評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蕊蝗,失蹤者是張志新(化名)和其女友劉穎仅乓,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蓬戚,經(jīng)...
    沈念sama閱讀 46,409評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡夸楣,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評(píng)論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裕偿。...
    茶點(diǎn)故事閱讀 40,615評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡洞慎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嘿棘,到底是詐尸還是另有隱情,我是刑警寧澤旭绒,帶...
    沈念sama閱讀 36,303評(píng)論 5 350
  • 正文 年R本政府宣布鸟妙,位于F島的核電站,受9級(jí)特大地震影響挥吵,放射性物質(zhì)發(fā)生泄漏重父。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評(píng)論 3 334
  • 文/蒙蒙 一忽匈、第九天 我趴在偏房一處隱蔽的房頂上張望房午。 院中可真熱鬧,春花似錦丹允、人聲如沸郭厌。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,470評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)折柠。三九已至,卻和暖如春批狐,著一層夾襖步出監(jiān)牢的瞬間扇售,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,571評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工嚣艇, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留承冰,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,041評(píng)論 3 377
  • 正文 我出身青樓食零,卻偏偏與公主長(zhǎng)得像困乒,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子慌洪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理顶燕,服務(wù)發(fā)現(xiàn),斷路器冈爹,智...
    卡卡羅2017閱讀 134,704評(píng)論 18 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法涌攻,類(lèi)相關(guān)的語(yǔ)法,內(nèi)部類(lèi)的語(yǔ)法频伤,繼承相關(guān)的語(yǔ)法恳谎,異常的語(yǔ)法,線(xiàn)程的語(yǔ)...
    子非魚(yú)_t_閱讀 31,664評(píng)論 18 399
  • 一. Java基礎(chǔ)部分.................................................
    wy_sure閱讀 3,814評(píng)論 0 11
  • 20- 枚舉,枚舉原始值,枚舉相關(guān)值,switch提取枚舉關(guān)聯(lián)值 Swift枚舉: Swift中的枚舉比OC中的枚...
    iOS_恒仔閱讀 2,297評(píng)論 1 6
  • 你有沒(méi)有試過(guò)愛(ài)一個(gè)人,愛(ài)到瘋狂因痛。你有沒(méi)有遇到過(guò)那么一個(gè)男生婚苹,你看到他的第一眼就已經(jīng)淪陷。也許那時(shí)陽(yáng)光正好鸵膏,也許那時(shí)...
    晨默閱讀 311評(píng)論 3 2