欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂HTML5培訓(xùn)讓你讀懂TypeScript

2019-10-08 11:28:24 6436瀏覽

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個(gè)超集，而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?。本篇文章扣丁學(xué)堂HTML5培訓(xùn)小編就從安裝TypeScript環(huán)境出發(fā)，結(jié)合具體的實(shí)例來深入探索TypeScript。

1、安裝

npminstall-gtypescript

2、vscode自動(dòng)編譯

項(xiàng)目目錄終端執(zhí)行tsc--init
更改tsconfig.json“outDir”:“./js”

基礎(chǔ)語法

1、數(shù)據(jù)類型

布爾值
數(shù)字
字符串
數(shù)組
元組Tuple
枚舉
Any
Void（函數(shù)沒有返回值使用。）
Null和Undefined（默認(rèn)情況下null和undefined是所有類型的子類型。）
Never（never類型是任何類型的子類型）
Object

2、函數(shù)

聲明函數(shù)
functionrun():string{
return'typescript';
}
匿名函數(shù)
varfun=function():string{
return'typescript';
}
定義方法傳參
functionuser(name:string,age:number):string{
return`${name}----${age}`;
}
varuser=function(name:string,age:number):string{
return`${name}----${age}`;
}
沒有返回值
functionrun():void{
console.log('typescript');
}
方法可選參數(shù)
functionuser(name:string,age?:number):string{
return`${name}----${age}`;
}
方法參數(shù)默認(rèn)值
functionuser(name:string,age:number=20):string{
return`${name}----${age}`;
}
方法剩余參數(shù)
functionuser(...result:number[]):string{
}
functionuser(name:string,...result:number[]):string{
}
重載
functionuser(name:string):string;
functionuser(age:number):number;
functionuser(str:any):any{
if(typeofstr==='string){
returnstr
}else{
returnstr
}
}

3、類

基本模型
classPerson{
name:string;//屬性省略publick關(guān)鍵詞
constructor(name:string){//構(gòu)造函數(shù)實(shí)例化的時(shí)候調(diào)用的方法(初始化對(duì)象)
this.name=name;
}
run():void{
alert(this.name);
}
}
classPerson{
name:string;//屬性省略publick關(guān)鍵詞
constructor(name:string){//構(gòu)造函數(shù)實(shí)例化的時(shí)候調(diào)用的方法(初始化對(duì)象)
this.name=name;
}
setName():void{
this.name=name;
}
getName():string{
alert(this.name);
}
}
varperson1=newPerson('張三');
alert(person1.getName());
person1.setName('李四')；
alert(person1.getName());

4、繼承

classPerson{
name:string;//屬性省略publick關(guān)鍵詞
constructor(name:string){//構(gòu)造函數(shù)實(shí)例化的時(shí)候調(diào)用的方法(初始化對(duì)象)
this.name=name;
}
run():string{
return`${this.name}`
}
}
子類可以使用父類的屬性和方法如果子類的方法或者屬性和父類相同則以子類為主
classWebextendsPerson{
constructor(name:string){
super(name);//初始化父類的構(gòu)造函數(shù)
}
work():string{
return`${this.name}在運(yùn)動(dòng)`
}
run():string{
return`${this.name}`
}
}
varw=newWeb('李四');
alert(w.run());

5、類里面的修飾符

public

共有類型在類里面、子類、類外面都可以訪問(默認(rèn)，不寫默認(rèn)就是)。

protected

保護(hù)類型在類里面、子類可以訪問，類外面都不可以訪問。

private

私有類型在類里面可以訪問，子類和類外面都不可以訪問。

6、類的靜態(tài)屬性和靜態(tài)方法

static（靜態(tài)方法里面不能直接調(diào)用類里面的屬性，能調(diào)用靜態(tài)屬性）

classPerson{
publicname:string;
staticage:number=20;
constructor(name){
this.name=name;
}
run(){
alert(`${this.name}在運(yùn)動(dòng)`);
}
staticprint(){
alert(`print`+Person.age);
}
}

7、多態(tài)

父類定義一個(gè)方法不去實(shí)現(xiàn)，讓繼承它的子類去實(shí)現(xiàn)，讓每一個(gè)子類有不同的表現(xiàn)

classAnimal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log('吃的方法');
}
}
classDogextendsAnimal{
constructor(name:string){
super(name)
}
eat(){
returnthis.name+'骨頭'
}
}
classCatextendsAnimal{
constructor(name:string){
super(name)
}
eat(){
returnthis.name+'魚'
}
}

8、抽象類

提供標(biāo)準(zhǔn)
abstract抽象類不能實(shí)例化為子類提供基類
子類必須實(shí)現(xiàn)父類的抽象方法
abstract必須放在抽象類里面

abstractclassAnimal{
name:string;
constructor(name:string){
this.name=name;
}
abstracteat():any;
}
classDogextendsAnimal{
constructor(name:any){
super(name);
}
eat(){
console.log(this.name);
}
}

9、接口

定義規(guī)范定義行為和動(dòng)作的規(guī)范（接口不關(guān)心類內(nèi)部的數(shù)據(jù)狀態(tài)和方法實(shí)現(xiàn)的細(xì)節(jié)）

interfaceFullName{
firstName:string;
secondName:string;
}
functionprintName(name:FullName){
console.log(name.firstName+'--'+name.secondName)
}
varobj={
firstName:'sun',
secondName:'yu'
}
printName(obj)//ok
接口的可選屬性
interfaceFullName{
firstName:string;
secondName?:string;
}
functionprintName(name:FullName){
console.log(name.firstName+'--'+name.secondName)
}
varobj={
firstName:'sun',
secondName:'yu'
}
printName(obj)//ok
varobj={
firstName:'sun'
}
printName(obj)//ok
函數(shù)類型的接口
interfaceencrypt{
(key:string,value:string):string;
}
varmd5:encrypt=function(key:string,value:string):string{
returnkey+value;
}
md5('key','value');
可索引接口數(shù)組和對(duì)象的約束(不常用)
interfaceuserArr{
[index:number]:string
}
vararr:userArr=['string','string'];//ok
interfaceuserObj{
[index:string]:string
}
vararr:userObj=['string','string'];//ok
類類型接口對(duì)類的約束
interfaceAnimal{
name:string;
eat(str:string):void;
}
classDogimplementsAnimal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
return`吃骨頭`;
}
}
vardog=newDog('小黑');
dog.eat();
接口擴(kuò)展接口擴(kuò)展接口
interfaceAnimal{
eat():void;
}
interfacePersonextendsAnimal{
work():void;
}
classWebimplementsPerson{
publicname:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'喜歡吃饅頭');
}
work(){
console.log(this.name+'愛工作');
}
}
---------------------------
interfaceAnimal{
eat():void;
}
interfacePersonextendsAnimal{
work():void;
}
classprogrammer{
public:name:string;
constructor(name:string){
this.name=name;
}
coding(code:string){
console.log(this.name+code);
}
}
classWebextendsprogrammerimplementsPerson{
constructor(name:string){
super(name)
}
eat(){
console.log(this.name+'喜歡吃饅頭');
}
work(){
console.log(this.name+'愛工作');
}
}

interfaceFullName{
firstName:string;
secondName:string;
}
functionprintName(name:FullName){
console.log(name.firstName+'--'+name.secondName)
}
varobj={
firstName:'sun',
secondName:'yu'
}
printName(obj)//ok
接口的可選屬性
interfaceFullName{
firstName:string;
secondName?:string;
}
functionprintName(name:FullName){
console.log(name.firstName+'--'+name.secondName)
}
varobj={
firstName:'sun',
secondName:'yu'
}
printName(obj)//ok
varobj={
firstName:'sun'
}
printName(obj)//ok
函數(shù)類型的接口
interfaceencrypt{
(key:string,value:string):string;
}
varmd5:encrypt=function(key:string,value:string):string{
returnkey+value;
}
md5('key','value');
可索引接口數(shù)組和對(duì)象的約束(不常用)
interfaceuserArr{
[index:number]:string
}
vararr:userArr=['string','string'];//ok
interfaceuserObj{
[index:string]:string
}
vararr:userObj=['string','string'];//ok
類類型接口對(duì)類的約束
interfaceAnimal{
name:string;
eat(str:string):void;
}
classDogimplementsAnimal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
return`吃骨頭`;
}
}
vardog=newDog('小黑');
dog.eat();
接口擴(kuò)展接口擴(kuò)展接口
interfaceAnimal{
eat():void;
}
interfacePersonextendsAnimal{
work():void;
}
classWebimplementsPerson{
publicname:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'喜歡吃饅頭');
}
work(){
console.log(this.name+'愛工作');
}
}
---------------------------
interfaceAnimal{
eat():void;
}
interfacePersonextendsAnimal{
work():void;
}
classprogrammer{
public:name:string;
constructor(name:string){
this.name=name;
}
coding(code:string){
console.log(this.name+code);
}
}
classWebextendsprogrammerimplementsPerson{
constructor(name:string){
super(name)
}
eat(){
console.log(this.name+'喜歡吃饅頭');
}
work(){
console.log(this.name+'愛工作');
}
}

11、模塊

模塊的概念(官方):”內(nèi)部模塊“=》”命名空間“，”外部模塊“=》”模塊“模塊在其自身的作用域里面執(zhí)行，而不是在全局作用域執(zhí)行。這就意味著定義一個(gè)模塊里的變量，函數(shù)，類等等在模塊外部是不可見的，除非你明確的使用export形式之一導(dǎo)出他們。相反，如果想使用其他模塊導(dǎo)出的變量，函數(shù)，類，接口等的時(shí)候，你必須要導(dǎo)入它們，可以使用import形式之一。

模塊的概念(自己理解):我們可以把一些公共的功能單獨(dú)抽離成一個(gè)文件作為一個(gè)模塊。模塊里面的變量，函數(shù)，類等都是私有的，如果我們要在外部訪問模塊里面的數(shù)據(jù)（變量，函數(shù)，類），我們需要通過export暴露模塊里面的數(shù)據(jù)（變量、函數(shù)、類）暴露后我們通過import引用模塊里面的數(shù)據(jù)（變量，函數(shù)，類）。

定義db.ts
vara:string="string";
functiongetData(value:string):string{
returnvalue
}
export{
a,
getData
}
使用
import{a,getDate}form'./db'
getData();
import{a,getDataasget}form'./db'
get();
定義db.ts
exprotdefaultfunctiongetData(value:string):string{
returnvalue
}
使用
importgetDataform'./db'
getData();

12、命名空間

命名空間和模塊的區(qū)別：命名空間，內(nèi)部模塊，主要用于組織代碼，避免命名沖突。模塊，ts的外部模塊的簡稱，側(cè)重代碼的復(fù)用，一個(gè)模塊里可能會(huì)有多個(gè)命名空間。

namespaceA{
interfaceAnimal{
name:string;
eat(str:string):void;
}
exportclassDogimplementsAnimal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
return`吃骨頭`;
}
}
}
vardog=A.Dog("小黑");
dog.eat();
命名空間封裝成模塊
a.ts文件名
定義
exportnamespaceA{
interfaceAnimal{
name:string;
eat(str:string):void;
}
exportclassDogimplementsAnimal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
return`吃骨頭`;
}
}
}
使用
import{a}from'./a'
vardog=newa.Dog();
dog.eat();

13、裝飾器

裝飾器：裝飾器是一種特殊類型的聲明，它能夠被附加到類聲明，方法，屬性或參數(shù)上，可以修改類的行為。

通俗的講裝飾器就是一個(gè)方法，可以注入到類、方法、屬性參數(shù)上來擴(kuò)展類、屬性、方法、參數(shù)的功能。

常見的裝飾器有：類裝飾器、屬性裝飾器、方法裝飾器、參數(shù)裝飾器。

裝飾器寫法：普通裝飾器（無法傳參）、裝飾器工廠（可傳參）。

裝飾器是過去幾年中js最大的成就之一，已經(jīng)是Es7的標(biāo)準(zhǔn)特性之一。

1.類裝飾器(普通裝飾器，無法傳參)
functionlogClass(params:any){
console.log(params);
params.prototype.apiUrl="動(dòng)態(tài)擴(kuò)展的屬性";
params.prototype.run=function(){
console.log("我是run方法");
}
}
@logClass
httpClient{
constructor(){
}
getData(){
}
}
varH=newhttpClient();
console.log(H.apiUrl);
H.run();
2.類裝飾器(裝飾器工廠，可傳參)
functionlogClass(params:string){
returnfunction(target:any){
target.prototype.apiUrl="動(dòng)態(tài)擴(kuò)展的屬性";
target.prototype.run=function(){
console.log("我是run方法");
}
}
}
@logClass('hello')
httpClient{
constructor(){
}
getData(){
}
}
把類賦值給target
把參數(shù)賦值給params
varH:any=newhttpClient();
console.log(H.apiUrl);
H.run();
類裝飾器重載以前類的構(gòu)造函數(shù)
functionlogClass(target:any){
console.log(target);
returnclassextendstarget{
apiUrl:any="我是修改后的url";
getData(){
console.log(this.apiUrl);
}
}
}
@logClass
httpClient{
publicapiUrl:string|undefined;
constructor(){
this.apiUrl='url';
}
getData(){
console.log(this.apiUrl);
}
}
varhttp=newhttpClient();
------------------------------
3.屬性裝飾器(屬性裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)作函數(shù)調(diào)用，傳入下列兩個(gè)參數(shù)，對(duì)于靜態(tài)成員來說是類的構(gòu)造函數(shù)，對(duì)于實(shí)例成員是類的原型對(duì)象)
functionlogClass(params:any){
console.log(params);
params.prototype.apiUrl="動(dòng)態(tài)擴(kuò)展的屬性";
params.prototype.run=function(){
console.log("我是run方法");
}
}
functionlogProperty(params:string){
returnfunction(target:any,attr:any){
console.log(target);
console.log(target[attr]);
target[attr]=params;
}
}
@logClass('xxx')
httpClient{
@logProperty("http://baidu.com");
publicurl:string|undefined;
constructor(){
}
getData(){
console.log(this.url);
}
}
varhttp=newhttpClient();
http.getData();
4.方法裝飾器
它會(huì)被應(yīng)用到的方法的屬性描述符上，可以用來監(jiān)視，修改或者替換方法定義
方法裝飾器會(huì)在運(yùn)行是傳入下列3個(gè)參數(shù)
（1）對(duì)于靜態(tài)成員來說類的構(gòu)造函數(shù)，對(duì)于實(shí)例成員來說是類的原型對(duì)象。
（2）成員的名字。
（3）成員的屬性描述符。
functionlogMethod(params:any){
returnfunction(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
target.apiUrl="動(dòng)態(tài)擴(kuò)展的屬性";
target.run=function(){
console.log("我是run方法");
}
}
}
httpClient{
constructor(){
}
@logMethod("http://baidu.com")
getData(){
console.log(this.url);
}
}
varhttp:any=newhttpClient();
http.run();
------------------------------------------
functionlogMethod(params:any){
returnfunction(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
//修改裝飾器的方法把裝飾器方法傳入所以參數(shù)改為string類型
//保存當(dāng)前的方法
varoMethod=desc.value;
desc.value=function(...args:any[]){
args=args.map((value)=>{
returnString(value)
});
console.log(args);
}
}
}
httpClient{
publicurl:any|undefined;
constructor(){
}
@logMethod("http://baidu.com")
getData(){
console.log(this.url);
}
}
varhttp:any=newhttpClient();
http.getData(123,'xxx');

                             

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開發(fā)VIP免費(fèi)公開課】  

查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>