TypeScript

 

 

TS初體驗

1.安裝

npm i typescript -g

3.使用

function test (a: number,b:number): number{
return a +b
}

2.全局會提供一個tsc命令使用

tsc index.ts

 

TS配置文件

1.建立配置文件

tsc --init

2.設置配置項

target:轉換成哪一個版本的js代碼es5es6
module:使用的模塊化標準是什麼
outDir:最終js代碼存放的文件夾路徑
rootDir:ts代碼的存放路徑
strict:是否將ts代碼轉換成嚴格模式的js代碼

3.使用配置文件

tsc -p ./tsconfig.json

 

TS數據類型

//number
let a: number = 10
let a: number = NaN
let c: number = Infinity
let d: number = 0xA12
let e: number = 0b101001
let f: number = 0o75
​
//string
let str: string = "這是一個字符串"
let str1: string = '這也是一個字符串'
let str2: string = `這是一個模板字符串${a}`
​
//boolean
let flag: boolean = true
let flag: boolean = false
​
//Array<數據類型>
let arr: Array<number> = [1,2,3,4]
let arr1: number[] = [1,2,3,4]
​
//元組
let arr2: [number,string] = [1,'a']
arr2[0] = 'a'//報錯!
arr2[0] = 100
arr2[2] = 'a'//沒有索引的元素,則表明是新增,可是隻能是聲明的兩種類型
arr2[2] = []//非number,string
​
//void
let res: void = undefind
​
//undefined
//null
let res1: undefined = undefined
let res2: null = null
​
//any
let somevar: any = 10
somevar = 'abc'
somevar = []
​
//never
//通常用在不可能返回內容的函數的返回值類型設置
function test(): never{
    while(true){
        //死循環不可能有返回值
    }
}
​
//object
let o: object = {}
let o: {name:string,age:number} = {name:'張三',age:12}
​
//enum枚舉,給一組數據賦值友好的名字
enum Gender{
    male = 1,
    famale = 0,
    unknow = -1
}
let gender: Gender = Gender.male
let o ={
    gender:Gender.male
}
​
//類型斷言
let str1: any = 'abc'
let len: number = (<string>str1).length

 

TS中的類

class Person{
    //與ES6不一樣的是,TS屬性必須聲明,須要指定類型
    name: string
    //聲明好屬性以後,屬性必須賦值一個默認值或者在構造函數中進行初始化
    // age:number = 10
    age: number
constructor(name: number){
this.name = name
        this.age = age
}
    
    sayHello(msg: string): void{
        console.log(msg)
    }
}

 

TS類繼承

class Animal{
	age: number
	constructor(age: number){
		this.age = age
	}
	eat(){
		console.log('吃雞腿')
	}
}

class Dog extends Animal{
    type: string
    constructor(type: string,age: number){
        super(age)		//	繼承必需要super父類過來的屬性
        this.type = type
    }
    //	子類出現與父類同名的方法,則會進行覆蓋
    eat(){
        console.log('狗對象中的eat方法')
    }
}
var dog = new Dog('哈士奇',18)
dog.eat()

 

TS類成員訪問修飾符

在類的成員前添加關鍵字來設置當前成員的訪問權限

• public:公開默認,全部人均可以訪問

• private:私有的,只能在當前類中進行訪問

• protected:受保護的,只能在當前類或者子類中進行訪問

enum Color{
	red,
	yellow,
	blue
}

class Car{
    //	若是不加訪問修飾符,則當前成員默認是公開的,全部人均可以訪問
	color:	Color
    constructor(){
        this.color = Color.red
    }
    private run(){
        console.log('當前成員只能在當前類中使用')
    }
    protected loadPeople(){
        console.log('在當前類中或子類中方位')
    }
}
let byd = new Car()
byd.color	//	紅色
byd.run()	//	報錯!
byd.loadPerson()	//	報錯,只能在當前類中或者子類中

class Audi extends Car{
    sayHi(){
        console.log(this.color)
        this.loadPeople()	//	正常調用
    }
}
let audi = new Audi()
audi.color	//	紅色

 

TS只讀屬性與參數屬性

class Cat{
	readonly name: string
    type: string
    //	type: string	public代替了這兩句
    //	構造函數中給參數前面加上修飾符,就至關於聲明瞭一個屬性
    constructor(public type: string){
        this.name = '加菲'
    //  this.type = type	public代替了這兩句
    } 
}
var cat = new Cat("橘貓")
cat.name		//	正常訪問
cat.name = 123	//	報錯1

 

TS類成員存取器

class People{
		//	name: string = ''
    private _name: string = ""
    	//	屬性的存取器
    get name(): string{
        return this._name
    }
    set name(value: string){
        //	設置器中能夠添加相關的校驗邏輯
        if(value.length < 2 || value.length > 5){
            throw new Error('非法暱稱,禁止使用!')
        }
        this._name = value
    }
}
var p = new People
p.name = '111111'	//	報錯
p.name = '123'	

 

TS接口

接口使用interface進行聲明

interface AjaxOptions{
	url: string,
	type?: string,		//	可選屬性加?
	data?: object,		//	可選屬性加?
     success(data: object): void
}

 

//	options參數中 須要包含 url type data success
function ajax(options: AjaxOptions){
	
}

ajax({
    url: 'www.baidu.com',
    type: 'get',	//	可不選
    data: {},		//	可不選
    success(data){
        
    }
})

 

接口只讀屬性

interface Point{
	readonly x: number,
	y: number,
    [propName: string]: any	//	加了額外屬性檢查propName不報錯
}
let poi: Point = {
    x:10,
    y:10,
    z:100		//	加了額外屬性檢查propName不報錯
}
poi.x = 100		//	報錯,x是可讀

 

TS函數類型接口

interface SumInterFace{
    (a: number,b: number): number
}
let sum: SumInterFace = function(a: string,b: number){	//	報錯,接口規範爲number類型
    return a + b
}

 

TS類類型接口

interface PersonInterFace{
    name: string,
    age: string,
    eat(): void
}
class XiaoMing implements PersonInterFace{
    name: string = '小明'
    age: number = 18
    eat(){
        console.log('吃飯')
    }
}
class XiaoHong implements PersonInterFace{
    name: string = '小紅'
    age: number = 18
    eat(){
        
    }
}
var xh = new XiaoHong()
xh.name		//	放心使用數據,由於都遵照PersonInterFace接口
xh.age		//	放心使用數據,由於都遵照PersonInterFace接口
xg.eat()	//	放心使用數據,由於都遵照PersonInterFace接口

 

TS接口繼承

1.接口繼承接口

interface TwoDPoint{
	x: number,
	y: number
}
interface ThreeDPoint{
    z: number
}
interface FourDPoint extends ThreeDPoint,TwoDPoint{
    time: Data
}
let poi1: FourDPoint = {
    z : 100,
    x : 100,
    y : 100,
    time : new Data
}

2.接口繼承類

class Bird{
	type: string = '畫眉鳥'
	fly(): void{
		
	}
}
interface Fly extends Bird{
    
}
let flyingBird: Fly = {
    type:'啄木鳥',
    fly():void{
        
    }
}