【Typescript】基礎知識小總結(jié)
2020-02-16 09:54:37
標簽：it
? ? 最近磕TS呐矾，不磕不知道，ts包括了很多js的基礎知識點，然后結(jié)合es6宵统，有了更多的完善的的地方，對開發(fā)環(huán)境更加的友好覆获。我將我學習到的新知識點马澈，和涉及的老知識點做一個總結(jié)瓢省。
一、類型
? ? 最特別的第一個總結(jié)痊班，與js不一樣的是勤婚，ts有了類型注解，也就是說涤伐，每一個對象馒胆、數(shù)組、函數(shù)都可以定義類型注解凝果。
? ? 在編譯器中實驗可以得知祝迂，類型注解不是強制的，但是編譯器可以根據(jù)你的賦值豆村，推斷出你定義的變量應該賦什么值液兽。這也叫類型推斷。在編譯的時候掌动，如果沒有定義類型注解四啰，應該多查看編譯器推斷的注解是不是需要的，不然可能會有隱藏的雷粗恢。
? ? 類型注解可以分為兩類：
? ? 對于基礎類型的類型注解的示例：
? ?const a:string = 'hello'
? ? 在此只說在程序里如何定義柑晒，每一個的詳細意思在平時編程里或多或少能遇到，或者在網(wǎng)上也有更詳細的總結(jié)眷射。在這里想特別提一下any匙赞，它比較特別，可以有兩個用處妖碉，一是不知道怎么定義的時候可以用any先暫時定義涌庭，或者類型推斷，如果類型推斷不正確也喜歡推斷成any欧宜，這里需要注意一下坐榆。在學習的時候，過來人的建議冗茸，由于any用的太過頻繁席镀，甚至有人直接稱typescript為anyscript，失去了用它的初衷夏漱。
? ? 下面一個一個寫對象類型的示例：
1豪诲、函數(shù)
基礎寫法：
const function = (str:string) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return parseInt(str,10)
}
注：此處未注明function的類型，是因為編譯器會自動推斷為number
函數(shù)中多個對象定義類型的寫法：
function getNum({fir,sec}:{fir:number,sec:number}){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return fir,sec
}
或者
function getNum:({fir,sec}:{fir:number,sec:number}) =>number = (fir,sec) =>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return fir,sec
}
注：傳入值如果是實現(xiàn)定義好的不會強制檢測
2挂绰、數(shù)組
基礎寫法：const arr:number[] =[1,2,3]
定義類型不唯一的寫法： const arr:(number | string)[] = [1,'hello',2]
定義的類型是一個對象：const arr:{ name: string} [] =[{ name:'json' },{ name: 'dora'}] //注意此處是定義的每一個對象都有一個name屎篱，值的屬性是string的意思，在對象中就不存在其他類型的對象了。
如果類型定義太長交播，也可以寫一個類型別名专肪，之后再引用：
type test = { name : string , age : number }
const arr:test[] = [{name:'json',age:22},{name:'dora',age:25}]
如果想定義數(shù)組中每一個元素的屬性，可以用元組堪侯，例如：
const arr:[string,number,string,number] = ['hello',1,'world',2]
3嚎尤、interface接口
? ? 和類型別名相似，interface可以集中定義屬性伍宦，但是和類型定義的區(qū)別在于芽死，作用的對象有不同，interface可以作用于函數(shù)次洼、對象关贵、類。
? ? interface可以定義屬性卖毁，也可以在其中定義方法揖曾。下面是示例代碼：
interface Count {
? ?name:string;
? ?age:number;
? count():void
}
? ? 在interface中也可以單獨定義屬性，常用的是readonly只讀屬性亥啦，它和const都具有只讀屬性炭剪，區(qū)別是const作用于變量，readonly作用屬性翔脱；'?'可有可無的屬性奴拦，也就是說該元素的有無不強求；[propName:string]:any 可接受其他字符串的屬性届吁，下面是統(tǒng)一的示例代碼：
interface Count {
? readonly name:string;
? ?age?:number;
? count():void;
[propName:string]:any
}
? ? interface定義的類错妖，示例代碼如下（interface定義沿用上文的）：
?class CountNum?implements?Count{
...
｝
? ? interface接口也可以繼承，示例代碼如下：
interface Count1?extends?Count {
sex:string?
}
注：Count1為子接口 Count為父接口
? ? interface可定義函數(shù)疚沐，代碼示例如下：
interface Num {
(fir:number,sec:number):number
}
function add:Num=(first:1,sec:2) =>{
...
}
二暂氯、類
? ? 類可以將屬性、方法放在一起亮蛔，在es6的時候痴施，將這個定義提了出來，它是一個面向?qū)ο蟮暮瘮?shù)尔邓，可以繼承晾剖，可以被重寫等锉矢。在我看來梯嗽，類不止是一個語法糖，它使得js的應用范圍變得更加的廣泛和具有更多的可能性沽损。
? ? 基礎定義：
class xx {
name='hello';
say(){
return this.name
}
}
注：xx為類的名字
1灯节、類實例化
? ? 使用類的內(nèi)容之前都需要先實例化，如下例：
const person = new xx();
2、類的繼承
1炎疆、extends：
class xxx extends xx {
...? ?//定義新方法卡骂、屬性
}
注：1、xxx為子類名形入，xx為父類名
? ? ? 2全跨、子類里如果有和父類重名的方法，父類相同的方法會被重寫
2亿遂、super：
class xxx extends xx{
say(){
? return?super.getname() + ' hello '
}
}
super既繼承了父元素浓若，又不會被重寫。
3蛇数、類的類型
private:允許在類的內(nèi)部調(diào)用
protected:允許在類內(nèi)及繼承的子類中使用
public :允許在類的內(nèi)挪钓、外被調(diào)用
4、關(guān)于static
1靜態(tài)方法耳舅，不會被實例繼承碌上，只能通過類的調(diào)用
2在一個靜態(tài)方法中同一個類中有其他靜態(tài)方法可以通過this調(diào)用
3非靜態(tài)方法中，不能直接通過this調(diào)用浦徊，而是通過類名調(diào)用：CLASSNAME.STATIC_METHOD_NAME()或用構(gòu)造器中的屬性：this.constructor.STATIC.METHOD_NAME()調(diào)用
4不能被實例繼承馏予，可以被子類繼承
5、constructor
? ? 在類實例化的瞬間盔性，constructor會自動執(zhí)行吗蚌，作為類的構(gòu)造器，如果實例未定義constructor纯出，實例化后默認函數(shù)中有可空的constructor蚯妇。constructor方法默認返回實例對象，即this暂筝。也可以返回其他對象箩言。
? ? 子類的constructor中，需要super父類的constructor焕襟，即使父類的constructor為空陨收，子類的super()也需要寫。
6鸵赖、getter和setter
? ? 在私有類中务漩，可以通過getter和setter得到和設置數(shù)據(jù)：
class Person{
constructor( readonly _name:string) {
?get name(){
? return this. _name +'world'
}
set name(name:string) {
? ? const realname = name.split(' ')[1];
? ? this._name = realname;
}
}
}
const person = new Person('hello');
//輸出 ‘hello world’
person.name = 'dora';
//輸出‘dora world’
7、抽象類
? ? 可定義屬性它褪，方法饵骨，無需賦值，不能實例化茫打，只能被繼承居触，需注意妖混，定義的抽象方法，在子類需要被實現(xiàn)轮洋。大致寫法如下：
abstract class XX{
abstract say():string
width:number
....
}
