一、簡(jiǎn)介
image.png
二、環(huán)境搭建
npm install -g typescript
安裝完打開(kāi)cmd --- tsc 測(cè)試有沒(méi)有安裝成功
image.png
三、TypeScript的基本數(shù)據(jù)類型
TypeScript 原始數(shù)據(jù)類型
image.png
undefined和null是其他類型的子類型，所以其他類型可以賦值成undefined和null
var str:string = "hello"
var num:number = 1
var flag:boolean = true
var un:undefined = undefined
var unl:null = null
str = null
//void用來(lái)規(guī)定函數(shù)無(wú)返回值
var callBack = function():void{
//return 10 報(bào)錯(cuò)
}
var num2:void = 3 // error
TypeScript 中的任意值
image.png
var num:any = 1;
num = true;
num = "safd"
var num2;//沒(méi)有賦值操作，就會(huì)被認(rèn)為任意值類型等價(jià)于 var num2:any
num2 = 1;
num2 = true
TypeScript 中的類型推論
image.png
/、給變量賦值初始值的時(shí)候，如果沒(méi)有指定類型，根據(jù)初始值倒推類型
var b = 1
b = 2 //error
四、TypeScript的聯(lián)合類型
image.png
//通過(guò) | 來(lái)增加多種類型
var muchtype:string|number = "hello"
muchtype = 10
console.log(muchtype.toString)//用到屬性和方法的時(shí)候要注意要符合兩種類型的屬性和方法
TypeScript 中的對(duì)象類型--接口
image.png
//定義接口
interface Istate {
name:string
age:number
}
var obj1:Istate;
obj1 = {name:"張三"，age:10}
//可選屬性
interface Istate2 {
name:string
age?:number // 存疑 可有可無(wú)
}
var obj2:Istate2;
obj2 = {name:"李四"，age:20}
obj2 = {name:"李四"}
//屬性個(gè)數(shù)不確定的時(shí)候,any必須是任意類型
interface Istate3 {
name:string|number,
age?:number,
[propName:string]:any
}
var obj3:Istate3 = {name:"張三"，age:10,sex:"男",isMary:true}
//只讀屬性
interface Istate4 {
name:string,
readonly age:number
}
var obj4:Istate4 = {name:"張三"，age:10}
obj4.name = "李四"
obj4.age = 20 //error readonly 設(shè)置完之后不能修改
五、TypeScript的數(shù)組類型
image.png
//數(shù)組表示法
//類型+方括號(hào)
var arr:number [] = [1,2,3]
var arr2:string [] = ["1","2","3"]
var arr3:any [] = ["2",1,true]
//數(shù)組泛型Array<elemType>表示法
var arrType:Array<number> = [1,2,3]
var arrType2:Array<string > =["1","2","3"]
var arrType3:Array<any > =["2",1,true]
//采用接口表示法（常用）
interface Istate {
username:string,
age:number
}
interface IArr{
username:string,
age:number
}
var arrType4:IArr = [{username:"張三"，age:10}]
var arrType5:Array<Istate> = [{username:"張三"，age:10}]
var arrType6:Istate[] = [{username:"張三"，age:10}]
六、TypeScript的函數(shù)類型
image.png
//聲明式類型的函數(shù)
function funcType(name:string,age:number):number{
return age
}
var ageNum:number = funcType("張三"，18)
//函數(shù)參數(shù)不確定
function funcType(name:string,age:number,sex?:string):number{
return age
}
var ageNum2:number = funcType2("張三",18,"男")
//函數(shù)參數(shù)的默認(rèn)值
function funcType3(name:string="張三",age:number=18):number{
return age
}
//表達(dá)式類型函數(shù)
//不完整的約束規(guī)范
var funcType4 = function(name:string,age:number):number{
return age
}
//完整的約束
var funcType5:(name:string,age:number)=>number = function(name:string,age:number):number{
return age
}
interface funcType6{
(name:string,age:number):number
}
var funcType6:funcType6 = function(name:string,age:number):number{
return age
}
//對(duì)于聯(lián)合類型的函數(shù)，可以采用重載的方式
//輸入時(shí)number,輸出也是number
//輸入時(shí)string,輸出也是string
function getValue(value:number):number;
function getValue(value:string):string;
function getValue(value:string|number):string|number{
return value
}
let a:number = getValue(1)
let b:string = getValue("1")
七、TypeScript的類型斷言
image.png
在聯(lián)合類型中要使用某一類型的屬性和方法就可以使用類型斷言
// let num:number|string = "10"
//num = 20
//console.log(num.length) error
//類型斷言 只能斷言聯(lián)合類型中存在的類型
function getAssert(name:string|number){
//return (<string>name).length 方法一
return (name as string).length
}
八、TypeScript的類型別名
image.png
就是把某些聯(lián)合類型單獨(dú)定義出來(lái)，然后就使用這個(gè)定義的名字就可以了；
type strType = string|number|boolean;
var str:strType = "10"
str = 10
str = true
//可以對(duì)于接口也采用類型 別名
interface muchType1{
name:string
}
interface muchType2{
age:number
}
type muchType = muchType1 | muchType2
var obj:muchType = {name: "張三"}
var obj:muchType = {age:10}
var obj:muchType = {name:"李四",age:10}
//限制字符串的選擇
type sex = "男" | "女"
function getSex(s:sex):string{
return s
}
getSex("男")
九、TypeScript 枚舉
image.png
//使用枚舉可以定義一些有名字的數(shù)字常量
enum Days{
Sun,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
console.log(Days.Sun) //0
console.log(Days.Sat) //6
console.log(Days) //枚舉類型會(huì)被編譯成一個(gè)雙向映射的對(duì)象
console.log(Day[0] === "Sun")
enum Days{
Sun=3,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
console.log(Days.Sun) //3
console.log(Days.Sat) //9
console.log(Days) //枚舉類型會(huì)被編譯成一個(gè)雙向映射的對(duì)象
console.log(Day[0] === "Sun")
編譯成的js
image.png
十、TypeScript 類的修飾符
image.png
class Person{
private name = "張三"
protected age=18
say(){
console.log("我的名字是"+this.name+",我的年齡為"+this.age)
}
}
//創(chuàng)建Person的實(shí)例
//var p = new Person()
//p.say()
//private屬性只能在類的內(nèi)部進(jìn)行訪問(wèn)
//console.log(p.name) //當(dāng)一個(gè)類成員變量沒(méi)有修飾的時(shí)候，外界是可以進(jìn)行訪問(wèn)的，默認(rèn)就是public進(jìn)行修飾
//創(chuàng)建child子類
//一旦父親將屬性定義成私有的之后，子類就不可以進(jìn)行訪問(wèn)了
//父親的屬性定義成受保護(hù)的之后，可以在子類里面進(jìn)行訪問(wèn)
class child extend Perxon{
callParent(){
console.log(super.age)
super.say()
}
static test(){
console.log("test")
}
}
var c = new Child()
c.callParent()
//console.log(c.age) //error 子類繼承了父類，但沒(méi)有辦法直接獲取到父類私有的屬性或者受保護(hù)的屬性(實(shí)例的不行)
//console.log(c.say()) //子類繼承了父類，子類就可以訪問(wèn)到父類的公開(kāi)屬性或者方法；
console.log(child.test()) //類的靜態(tài)方法里面，是不予許用this
十一、TypeScript 泛型
image.png
//沒(méi)有確切定義返回值類型，運(yùn)行的數(shù)組每一項(xiàng)都可以是任意類型
function createArray(length:number,value:any):Array<any>{
let arr = []
for(var i=0;i<length;i++){
arr[i] = value
}
return arr
}
createArray(3,1)
//使用泛型將其改造
//不傳的時(shí)候根據(jù)類型進(jìn)行倒推
//泛型可以用來(lái)幫助我們限定約束規(guī)范
function createArray<T>(length:number,value:T):Array<T>{
let arr = []
for(var i = 0;i<length;i++){
arr[i] = value
}
return arr
}
var strArry:string[] = createArray<string>(3,'1')
var numArray:number[] = createArray(3,1)
//接口當(dāng)中采用泛型
interface ICreate{
<T>(name:string,value:T):Array<T>
}
let func:ICreate;
func = function<T>(name:string,value:T):Array<T>{
return []
}
var strArr:number [] = func("zhangsan",3)
