typescript

昔憶落落發表於2019-02-16

一、

1.支援es6規範
2.強大的IDE支援
3.Angular2的開發語言

二、特性

1.字串特性

1.多行字串

var first ='aaa'
var second = 'bbb' + 
              first +
              'cccc'

var second = `bbb${first}cccc`

2.字串模板

var myname = 'liang'
var getAge = function () {
   return 18
}
console.log(`my name is ${myname}, i'm ${getAge()}`)  //my name is liang, i'm 18

3.自動拆分字串

function text(template, name, age) {
    console.log(template)
    console.log(name)
    console.log(age)
}

var myname = 'liang'

function getAge() {
    return 18
}

text`my name is ${myname}, i'm ${getAge()}`
8391871-6ad587fd4635121c.png
自動拆分字串

2.引數新特性

1.引數型別:在引數名稱後面使用冒號來指定引數型別

var my:string = 'liang'
my = 123  //---->報錯
var age = 123
age = '哈哈'  // 一樣會報錯
//這是因為typescript存在型別推斷機制,第一次賦值什麼型別,
//就算是繫結了這種型別,以後賦值為其他型別的話會報錯,
//使用:any可以解決這個問題

型別有以下幾種:

//:string  字串型別
//:any 任意型別
//:number數字累心
//:boolean布林型別
//:void的作用是指定函式沒有返回值
function age():void {
  return '1111'   // 報錯
}

2.預設引數:在引數宣告後面用等號來指定引數的預設值

function text(a, b, c) {
   console.log(a)
   console.log(b)
   console.log(c)
}

text('aa', 'bb', 'cc')
text('dd', 'ff')  //報錯
function text(a, b, c="5555") {
    console.log(a)
    console.log(b)
    console.log(c)
}

text('aa', 'bb', 'cc')
text('dd', 'ff')  //這樣不會報錯,預設將‘555’ 為第三個引數的值
//注意:有預設值的引數應該放在後面

3.可選引數: 在引數宣告後面用問號來標明此引數為可選引數

function text(a, b?, c="5555") {
    console.log(a)
    console.log(b)
    console.log(c)
}

text('aa', 'bb', 'cc') 
text('dd')
8391871-c128bd29cf71ed86.png
可選引數

注意:

  • 要做好可選引數不存在是時候的處理方式,如上的函式中如果讀取b.length的話會報錯;
  • 另外可選引數要放在必選引數的後面

3.函式新特性

1.Rest and Spread操作符:用來宣告任意數量的方法引數

function fun(...agus) {
    agus.map(item => {
        console.log(item)
    })
}

fun(1, 2, 3)  // 1,2,3

fun(5,6,8,9,10,11) // 5,6,8,9,10,11
function fun(a, b, c) {
    console.log(a)
    console.log(b)
    console.log(c)
}

var aa = [1, 2]
var bb = [7, 8, 9, 10]

fun(...aa)
fun(...bb)
8391871-01e13dfa6bc38922.png
image.png

2.generator 函式:控制函式的執行過程,手工暫停和恢復程式碼執行

function* doSomething() {
    console.log(111)
    yield    //----->相當於打斷點
    console.log(222)
}
var aa = doSomething()

doSomething().next()   // 111
doSomething().next()  // 111

aa.next() // 111
aa.next() // 222

tip:用*號來定義一個generator函式,利用yield來暫停執行,使用next()方式來恢復程式碼的執行;這種函式的使用方式是定義一個變數來接受該函式的返回值,利用這個變數.next()方式來恢復程式碼執行的

相關文章