一、環(huán)境搭建
1TypeScript介紹
1删窒、ts是js類型的超集裂垦，它可以編譯成純js；
2肌索、ts可以在任何瀏覽器蕉拢、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行（不需要考慮兼容性問(wèn)題）；
3、ts是一門由微軟開(kāi)發(fā)的開(kāi)源的編程語(yǔ)言企量，擁有自己的特性（eg：類）测萎。
2ts環(huán)境搭建
mac：
1、npm安裝届巩；
2硅瞧、使用npm安裝ts，npm install -g typescript恕汇；
獲取最高權(quán)限sudo npm install -g typescript腕唧，安裝指令不報(bào)錯(cuò)
3、啟動(dòng)編譯工具瘾英，tsc文件名.ts
編譯成為原生js枣接，命令為：tsc xxx.ts，運(yùn)行之后生成一個(gè)新的xxx.js文件
二缺谴、基本數(shù)據(jù)類型
1但惶、boolean
// 布爾類型
let isDone:boolean = true;
// 編譯后原生js：
var isDone = true;
2、string
// 字符串類型
let str:string = "abc";
// 編譯后原生js：
var str = "abc";
3湿蛔、number
// 數(shù)字類型(初始值可以為二進(jìn)制膀曾，八進(jìn)制，十進(jìn)制等等)
let num:number = 10;
// 編譯后原生js：
var num = 10;
4阳啥、array
// 數(shù)組類型
let arr:number[] = [1,2,3];
let arrStr:string[] = ['a','b'];
let arr2:Array<number> = [1,2,3]; // 自帶Array類型
arr[0] // 可以通過(guò)數(shù)組下標(biāo)訪問(wèn)數(shù)組
// 編譯后原生js：
var arr = [1,2,3]; // 數(shù)組存的是數(shù)字類型
var arrStr = ['a','b']; // 數(shù)組存的是字符串類型
var arr2 = [1,2,3]
5添谊、tuple
// 元祖類型
let per:[number,string]; // 數(shù)組可以保存不同類型的數(shù)據(jù)類型
per = [18，"Lucky"]; // 賦初始值,按照賦值的順序
// 編譯后原生js：
var per;
per = [18, "Lucky"];
6察迟、enum（原生js沒(méi)有此類型斩狱，枚舉類型是ts對(duì)js的擴(kuò)展）
// 枚舉類型
enum Season{Spring，Summer扎瓶，Autumn所踊，Winter}; // 聲明：創(chuàng)造一個(gè)枚舉類型
let season:Season = Season.Spring; // 取值：訪問(wèn)枚舉類型的值
// 可以通過(guò)代碼修改里面的值
enum Season1{Spring=1，Summer栗弟，Autumn污筷，Winter};
enum Season2{Spring=1，Summer=2乍赫，Autumn=3瓣蛀，Winter=4};
let season2:string = Season1[1]; // 賦值
7、any
// 任意值
let a:any = 4;
a = "abc"; // 可再賦其他類型的值
8雷厂、void 空值
9惋增、null和undefined
let c:undefined = undefined；
// 可以把null和undefined類型的變量賦值給其他類型
10改鲫、泛型identify诈皿，不僅支持當(dāng)前數(shù)據(jù)類型林束，同時(shí)也支持未來(lái)的數(shù)據(jù)類型。
不用any稽亏，是因?yàn)?code>any會(huì)丟失一些信息壶冒，導(dǎo)致無(wú)法確定返回值類型。泛型可保證入?yún)⑴c返回值類型相同截歉。
// 最初設(shè)計(jì)函數(shù)參數(shù)為String類型
function identity(age: string) {
return age
}
console.log(identity('20'))
// 業(yè)務(wù)迭代之后需要支持Number類型
function identity(age: string) {
return age
}
console.log(identity(20)
三胖腾、接口
1、接口的定義
// 定義
interface Person{
name：String瘪松；
age：number咸作；
}
// 使用
function creatPerson(per:Person) {
console.log(per.age);
}
// 定義個(gè)變量，賦值
let perNew = {name:"Lily",age:18};
// 調(diào)用
creatPerson(perNew)
// 編譯后原生js:
function creatPerson(per) {
console.log(perNew)
}
var perNew = { name: "lily", age: 18 };
creatPerson(perNew);
2宵睦、可選屬性(通過(guò)問(wèn)號(hào)來(lái)進(jìn)行)
interface Animal{
color?: string;
size?: number;
}
function createAnimal(ani:Animal):
{color:string,size:number}{
var aniTemp = {
color: "yellow";
size: 100;
}
if (ani.color) {
aniTemp.color = ani.color;
}
if (ani.size) {
aniTemp.size = ani.size;
}
return aniTemp;
}
createAnimal({color: "red"})
四记罚、類
1、類的定義
class Person {
// 成員
// 屬性
name: string;
// 構(gòu)造函數(shù)
constructor(nameNew:string) {
this.name = nameNew;
}
// 方法
info() {
return this.name；
}
}
// 實(shí)例化一個(gè)Person類的對(duì)象
let person = new Person("小明")；
// 繼承 封裝 多態(tài)
// 子類繼承父類
class Animal{
// 可見(jiàn)度
public name：string；
private age: number;
protected sex: string
}
class Cat extends Animal {
}
五、函數(shù)
1煤辨、函數(shù)定義
// 原生j函數(shù)的寫法：
function sum(a, b) { return a + b; };
var result = sum(1, 2);
// ts中的函數(shù):
// 為函數(shù)定義類型
function sum(x:number, y:number):number {
return x + y;
}
// 完整的函數(shù)類型
// 函數(shù)類型有兩部分組成：參數(shù)類型和函數(shù)返回值的類型
// x和y是參數(shù)的名字 number是參數(shù)的類型
// =>number指的是函數(shù)返回值的類型
let num:number = 10;
let mySum:(x:number, y:number)=>number =
function(x:number, y:number):number{
return x + y;
}
// 當(dāng)函數(shù)無(wú)返回值時(shí)，使用void關(guān)鍵字
function test(a:string):void{
}
2、可選形參
// 函數(shù)有兩個(gè)形參b和c蝗拿，其中b是可選形參
// 注意：可選形參要放在必選形參后面
function test2(c:number,b?:number):void{
console.log(c);
if (b) {
console.log(b);
}
}
test2(10);
