一、TypeScript簡介
- TypeScript是JavaScript的一個超集，主要提供了類型系統和對ES6的支持。
- 全局安裝命令：cnpm install -g typescript
- 編譯文件：tsc 文件名
二、TypeScript數據類型
- 原始數據類型：string、number、boolean、null、undefined、enum、symbol 、any。
- 空值一般採用void來表示，void可以表示變量，也可以表示函數無返回值。
- never類型，從來不會用到的值
var num:number = 123;
var arr:any[] = [‘123’,34,true];
三、TypeScript函數
- 定義函數
（1）函數聲明法
function run():string{
return 'run';
}
（2）匿名函數法
var fun2 = function():number{
return 123;
}
- 方法傳參
function getInfo(name:string,age:number):string{
return '${name}--${age}';
}
- 可選參數
function getInfo(name:string,age?:number):string{//age是可選參數，可選參數必須放在最後
return '${name}--${age}';
}
- 默認參數
function getInfo(name:string,age:number=20):string{//age默認是20，也可以叫可選參數
return '${name}--${age}';
}
- 剩餘參數
function sum(...result:number[]):number{//實參可以是任意個，都會傳到這個數組中
}
- 函數重載
- 箭頭函數
setTimeout(()=>{
…
},1000);
四、TypeScript類
- 定義類
class Person{
name:string;
constructor(n:string){
this.name = n;
}
run:void{
alert(this.name);
}
}
var p = new Person('張三');
p.run();
- 繼承：extends+super
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{
return '${this.name}在運動';
}
}
class Web extends Person{
constructor(name:string){//通過構造函數繼承
super(name);
}
}
var w = new Web('李四');
w.run();
- 類裏面的修飾符
（1）public：在類裏面、子類、類外面都可以訪問（默認是public）
（2）protected：在本類和子類中可以訪問
（3）private：在本類中可以訪問 - 靜態方法
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{//實例方法：實例化之後才能調用
return '${this.name}在運動';
}
static print(){//靜態方法：通過類名就可以直接調用，不能調用類裏面的屬性，除非屬性是static類型
alert("print方法");
}
}
- 多態：父類定義一個方法不實現，讓繼承它的子類去實現，每個子類有不同的表現。
- 抽象類/方法
（1）關鍵字：abstract ，用來定義一種標準
（2）抽象類不能直接實例化，子類必須實現抽象類的方法。
五、TypeScript接口
- 接口是行爲和對象的規範
interface FullName{
firstName:string;
lastName:string;
}
function Name(name:FullName){//必須傳入接口中定義的屬性
console.log(firstName+lastName);
}
var obj={
age=20,
firstName:'張',
lastName:'三'
};
Name(obj);
- 接口：可選屬性
interface FullName{
firstName:string;
lastName?:string;//可選屬性，此參數可用可不用
}
- 函數類型接口：對方法傳入的參數和返回值進行約束。
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
//模擬操作
return key+value;
}
console.log(md5('name','zhangsan'));
- 可索引接口：數組、對象的約束
interface UserArr{//對接口的約束
[index:number]:string//要求數組元素必須是string類型，改成any即可傳任意類型
}
var arr:UserArr=['aaa','bbb'];
-----------------------------------------------------
interface UserObj{//對對象的約束
[index:number]:string
}
var arr:UserObj={name:'張三'};
- 類類型接口：對類的約束，與抽象類有點類似
interface Animal{
name:string;
eat(str:string):void;
}
- 接口擴展
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Web implements Person{//該類必須實現上面兩個接口中的所有方法，因爲Person接口繼承了Animal接口
public name:string;
constructor(name:string){
this.name = name;
}
eat(){
console.log("hahah");
}
work(){
console.log("hahhahahah");
}
}
六、泛型
- 泛型函數
function getData<T>(value:T):T{
return value;
}
getData<number>(123);
- 泛型類
class MinClass<T>{
public list:T[]=[];
add(value:T):void{
this.lish.push(value);
}
min():T{
var minNum = this.list[0];
for(var i=0;i<this.list.length;i++){
if(this.list[i]<minNum){
minNum = this.list[i];
}
}
return minNum;
}
}
- 泛型接口
interface ConfigFn{
<T>(value:T):T;
}
var getData:ConfigFn = function<T>(value:T):T{
return value;
}
getData<string>('張三');
interface ConfigFn<T>{
(value:T):T;
}
function getData<T>(value:T):T{
return value;
}
var myGetData:ConfigFn<string> = getData;
myGetData('20');
七、模塊
- 暴露模塊：export
- 導入模塊：import { } from ‘./modules/db’
八、命名空間 - namespace A{}關鍵字可以使花括號裏的代碼私有化，需要通過export暴露出來才能供外部使用，作用是避免命名衝突。
九、裝飾器 - 定義：裝飾器是一種特殊類型的聲明，能夠附加到類聲明、方法、屬性或參數上，可以修改類的行爲。裝飾器是js最大成就之一，已是es7標準特性之一。
- 裝飾器類型：普通裝飾器（無法傳參）、裝飾器工廠（可以傳參）。
- 類裝飾器
（1）類裝飾器：普通裝飾器
function logClass(params:any){ //裝飾器
console.log(params);//params就是當前類
params.prototype.apiUp = 'xxx';//擴展一個屬性
params.prototype.run = function(){
console.log("我是動態添加的run方法")
}
}
@logClass //調用裝飾器
class HttpClient{
constructor(){
}
getData(){
}
}
var http:any = new HttpClient();
console.log(http.apiUp);//這是裝飾器裏動態擴展的屬性，會打印'xxx'
（2）類裝飾器：裝飾器工廠（可傳參）
function logClass(params:any){ //裝飾器
return function(target:any){
console.log(target); //target表示當前類
console.log(params); //params表示傳進來的參數，此處輸出'hello'
target.prototype.apiUp = params;//擴展一個屬性
}
}
@logClass('hello') //調用裝飾器
class HttpClient{
constructor(){
}
getData(){
}
}
（3）類裝飾器：修改構造函數
function logClass(target:any){ //裝飾器
return class extends target{
apiUrl:any="我是修改後的數據";
getData(){
console.log(this.apiUrl);
}
}
}
@logClass //調用裝飾器
class HttpClient{
public apiUrl:string|undefined;
constructor(){
this.apiUrl="我是構造函數裏的url";
}
getData(){
console.log(this.apiUrl);
}
}
- 屬性裝飾器
function logProperty(params:any){
return function(target:any,attr:any){
console.log(target);//target是類的原型對象
console.log(attr);//attr是屬性名稱
target.attr = "aaaa";//修改屬性值
}
}
@logClass('xxxx') //調用裝飾器
class HttpClient{
@logProperty('http:www.baidu.com')
public apiUrl:string|undefined;
constructor(){
}
getData(){
}
}
- 方法裝飾器
function get(params:any){
return function(target:any,methodName:any,desc:any){
console.log(desc.value);//當前裝飾的方法
target.apiUrl='xxx';//擴展一個屬性
target.run=function(){//擴展一個方法
console.log("run");
}
}
}
class HttpClient{
public apiUrl:string|undefined;
constructor(){
}
@get("http://www.baidu.com")//末尾不能加分號
getData(){
}
}
- 方法參數裝飾器
function logParams(params:any){
return function(target:any,methodName:any,paramsIndex){
console.log(params);//接收傳過來的參數，此處打印'xxx'
console.log(target);//原型對象
console.log(methodName);//打印getData,
console.log(paramsIndex);//打印0
}
}
class HttpClient{
public apiUrl:string|undefined;
constructor(){
}
getData(@logParams('xxxx') uuid:any){
console.log(uuid);
}
}
- 各種裝飾器的執行順序：屬性裝飾器->方法裝飾器->方法參數裝飾器（如果有多個，從後往前執行）->類裝飾器（如果有多個，從下往上執行）