淺談-開篇前言
TypeScript是JavaScript的超集（遵循ECMAScript6語法）蚯根， 這個語言添加了基于類的面向?qū)ο缶幊獭ypeScript作為JavaScript很大的一個語法糖胀糜，本質(zhì)上是類似于css的less颅拦、sass，都是為了易于維護教藻、開發(fā)距帅，最后還是編譯成JavaScript，只要是js可以運行的地方它都可以運行括堤。
ES是什么碌秸？ES6和ES5之間的關(guān)系？和JS和TS的關(guān)系悄窃？
簡單來說ES就是一種規(guī)范讥电，ES6和ES5就是這個規(guī)范的不同版本，JS實現(xiàn)了ES5轧抗，TS實現(xiàn)了ES6恩敌，JS和TS是客戶端不同的版本。
TypeScript相對于JavaScript的優(yōu)勢
- 支持 ES6 的規(guī)范
- 強大的 IDE 支持
2.1 類型檢查
為變量指定類型 -> 減少開發(fā)階段的幾率
2.2 語法提示
根據(jù)上下文横媚，把所可能需要的類纠炮、變量方法、關(guān)鍵字都會有提示 -> 提高開發(fā)效率
2.3 重構(gòu)
方便修改變量灯蝴、方法名抗碰、文件名(IDE會自動修改) -> 提高代碼質(zhì)量和效率 - angular2 的開發(fā)語言
學習TypeScript的收益
- 強大的靜態(tài)類型系統(tǒng)
- 完善的內(nèi)部代碼庫
- 幾乎所有的API都能得到準確的智能提示
- 可以幫助團隊更好的理解架構(gòu)內(nèi)容的數(shù)據(jù)流向
搭建TS開發(fā)環(huán)境
sudo npm install -g typescript
目前的主流瀏覽器還不完全支持ES6的語法 所以目前想要在瀏覽器運行TS代碼需要Compiler編譯器來將TS代碼轉(zhuǎn)換為瀏覽器支持的JS代碼
tsc 文件名.ts
文件名.ts -> 文件名.js
Type類型
所有類型都是any類型的子類型
元類型(primitive types)
number、boolean绽乔、string弧蝇、null、undefined
對象類型(object types)
所有類、模塊看疗、接口沙峻、字面量
TypeScript 新特性
字符串新類型
- 多行字符串
console.log(`
<a>1</a>
<sapn>2</span>
`)
- 字符串模版
let tt= 1
console.log(`你好我叫${tt}`)
- 自動拆分字符串
function test_n(template,name,age){
console.log(template)
console.log(name)
console.log(age)
}
var myname = "蘭海"
var getAge = ()=>{
return 19
}
/*
直接函數(shù)調(diào)用 函數(shù)名``
->會將里面的 模版string 作為第一個參數(shù) 返回一個數(shù)組['我叫','，今年','!'] 根據(jù)模版字符串切割
->第一個模版和第二個模版分別對應函數(shù)中的第二第三參數(shù) 只會返回對應的值 // 蘭海 // 19
*/
test_n`我叫${myname}两芳，今年${getAge()}!`
參數(shù)新類型
- 參數(shù)類型
在參數(shù)名稱后面使用冒號來指定參數(shù)的類型
類型推斷機制 -> 根據(jù)編寫的值來設(shè)定該變量的參數(shù)類型
(自定義類型)(字符串數(shù)組類型)(數(shù)字數(shù)組類型)(元組類型)(聯(lián)合類型)(顯式類型)
設(shè)置參數(shù)類型 類型推斷機制
var myname: string = "蘭海"
//-> [ts] 后續(xù)變量聲明必須屬于同一類型摔寨。變量“myname”必須屬于類型“string”，但此處卻為類型“number”怖辆。
// 因為在前面已經(jīng)定義了變量的類型 所以后續(xù)再給變量賦值必須遵循之前聲明的類型
var myname = 1; // 報錯
