typescript知識點

1、配置ts環境及編譯

npm install typescript -g
tsc xxx.ts
//想用node查看console
node xxx.js

2、基礎知識點

1.基本類型：

（1）字符串：

let email:string = '122121@qq.com';
// 模板字符串
let msg:string = `個人郵箱是：${email}`

（2）布爾類型：

let isshow:boolean = false;

（3）數字：

let num:number =20;

（4）定義數組：

// string[]  表示對數組中的每一項定義類型，這樣表示數組中的每個元素都要是string類型，這屬於強制聲明爲字符串類型
let arr:string[]=["1","2","3"]
// 這種實際上是隱式類型聲明，默認給他數字類型,至關於let arr:number[]=[1,2,3];
let arr = [1,2,3];
arr[3] = '1';//報錯
//隱式聲明，默認給她類型是any,至關於let arr:any[]=[1,'2',false];
let arr = [1,'2',false];

（5）.元組：

//  爲解決數組中多種類型混合
let arr:[string,number] = ["rth",23];

（6）.枚舉：

//主要針對一些：要定義一些固定的值，好比一週幾天的
enum Weeks {Mon,Tue,Wes}
let day:Weeks = Weeks.Mon;
let day1:Weeks = Weeks["Mon"];
let day2:string = Weeks[0];
// 也能夠手動賦值
enum Weeks {Mon=1,Tue,Wes}

（7）.any

let x:any='aaaa';

（8）.void

//當一個函數沒有任何返回值的時候，或者返回值是undefined或null的時候，其返回值類型能夠寫void
function warnUser():void{
    console.log("32")
}

（9）.Null和Undefined

let a:undefined = undefined;
let a:null = null;

2.聯合類型

let x:string|number|boolean;
x='1';
x=1;
x=false;

3.類型推論（即隱式類型聲明）

//定義一個變量，直接賦值，沒有定義類型，他會默認是你定義的那個值的類型；
let x=3;//默認就是number類型了
x='2';//報錯

4.類型斷言

let x:number|string|boolean = 'this is a string';
let strlength:number = (<string>x).length;   //斷言的兩種語法，兩種均可以，經過斷言，訪問x下面的屬性
let strlength1:number = (x as string).length;

5. 函數類型

(1)參數（參數也有類型）

fucntion show(a:number,b:string){

}
show(12,'12');
show(12,12);//報錯
show(12);//報錯,函數簽名檢查;實參形參不對應
show(12,'12',12);//報錯,函數簽名檢查;實參形參不對應

（2）返回值（也有類型）

function sum(a:number,b:number):number{
    return a+b;//返回的必須是number類型的
}
sum(1,2);

（3）函數簽名

// 裏面定義的這些參數的類型啥的，就叫作函數簽名
function ajax(url:string,success:(res:string)=>string,error:()=>void){
    if(success){
        console.log(success);
    }
}
ajax('2',function(res:string){return '23'},function(){})

6.外部變量聲明：

declare var 名字;
//好比要引入一個$,這樣就能夠在頁面使用$了；
//像window、document在typescript內部已經聲明過了，能夠直接用的；
declare var $;

7.接口(就是一種約定、限制)

//(1)
interface Point{
  x:number,
  y:number,
  z?:string, //可選
  [propName : string] : any;  //容許有任意的屬性
}
var p:Point;
p={x:1,y:2};
p={x:1,y:2,z:'1'};
p={x:1,y:2,z:3,m:1}
//(2)
interface A{
  x:number,
  y:number,
}
interface B{
  x:number,
  y:number,
  z:number
}
var a:A|B;//a只能包含A於B公共的屬性
a.z;//報錯
a.x;//success

7.1 函數類型的接口(接口的一種用法，方法的參數類型聲明)

interface SearchFunc{
    (souce:string,substring:string):boolean;
}
let searchfunc:SearchFunc
searchfunc = function(souce:string,substring:string):boolean{
    let result = souce.search(substring);
    return result>-1;
}

7.2 接口聲明方法（類實現接口，必須實現接口裏面聲明的方法，關鍵字implements）

interface Animal{
    eat();
}
class Sheep implements Animal{
    eat(){
        console.log(323);
    }
}

8.class寫法：

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'歲';
    }
}
var p = new Person("rth",12);
console.log(p.showme());
//上面的類也能夠這樣寫，構造函數裏面變化；這樣要聲明一下public，不然就至關於沒有定義name，上面那種寫法默認是public的
class Person{
    constructor(public name:string,public age:number){
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'歲';
    }
}
var p = new Person("rth",12);
編譯事後的js：
var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.showme = function () {
        return '我叫' + this.name + ',今年' + this.age + '歲';
    };
    return Person;
}());
var p = new Person("rth", 12);
console.log(p.showme());

9.訪問修飾符

public(公有，任何人均可以訪問)、private(私有，只有類的內部能夠訪問)、protected(受保護，只有類跟他的子類能夠調用)

class Person{
    public name:string;
    private age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'歲';
    }
}
var p = new Person("rth",12);
console.log(p.name);
console.log(p.age);//報錯

12.定義對象：

// 先用interface定義一個名字叫作Person的接口
interface Person {
   name: string
   age: number
}
// 定義一個變量,裏面key要和上面對象，少一個多一個都會報錯
let obj: Person = {
   name: 'rth',
   age: 20
}
// 某些屬性可選、或者沒法預知會出現啥新的屬性;propName能夠改爲其餘的名字
interface Person {
   name: string,
   age?: number,
   [propName:string] : any(這塊這個屬性的類型必須包含上面兩種屬性的類型，也能夠寫成string|number)
}