typescript---快速入門

什么是TS

TypeScript 是 JavaScript的一個超集，主要提供了型別系統和對 ES6的支持，具有可選的型別并可以編譯為JavaScript，從技術上講TypeScript就是具有靜態型別的 JavaScript ， TypeScript撰寫的檔案以.ts為后綴，用 TypeScript 撰寫 React 時，以 .tsx為后綴，

安裝typescript

命令:npm/cnpm install -g typescript
檢查是否安裝成功：tsc -v

新建檔案

(1)檔案目錄：創建index.ts
(2)里面寫點內容，然后編譯tsc index.ts

可能遇到的問題

啟動成功后，檔案會多出編譯后的index.js檔案,如果在第一次啟動tsc index.ts(檔案名)后發現報錯，如下圖，

• 此時重新以管理員的身份重新打開編輯器，打開終端，然后輸入命令：

get-ExecutionPolicy (顯示restricted：表示是受限制的)；
set-ExecutionPolicy RemoteSigned；（設定）
get-ExecutionPolicy（再次輸入，會顯示RemoteSigned）

(3)組態檔

//檔案tsconfig.json里配置=====根據需求配置
{
    "compilerOptions": {
        // none、'commonjs','amd','system','es6','es2015','esnext'
        "module": "es2015",//指定模塊化標準,如果要合并多個模塊化的代碼就要使用"system"
        "target": "es2015",//用來編譯什么語法,
        "strict": true,
        // "lib":[]//指定專案中要使用的庫
        "sourceMap": true,
        "outDir":"./dist",//編譯后檔案在的目錄
        "outFile":"./dist/app.js",//將代碼合成為一個檔案
        "allowJs":true,//是否編譯js
        "checkJs":true,//是否檢查js
        "removeComments": false,//是否在編譯后帶有注釋
        "noEmit": true,//不生成編譯檔案，
        "noEmitOnError":true,//當有錯誤時，不生成編譯檔案
        "alwaysStrict": true,//用來設定編譯后的檔案使用嚴格模式
        "noImplicitAny":true,//不允許隱式的any型別
        "noImplicitThis": true,//不允許不明確的的this
        "strictNullChecks": true,//嚴格的檢查空值；
    },
    "exclude": ["node_modules"],//不包含
    "include": ["./src/**/*"],//src目錄下都可以編譯

}

typescript語法

1. 型別宣告：

語法：
let 變數:型別;
let 變數:型別=值;

表示宣告一個變數str，同時指定它的型別為string，也就是說只能賦值字串的值，其它會報錯,如下宣告的變數

var str: string = "你好";
var num: number = 2;

2.可以使用|來表示多個型別

let yan: boolean | string;
yan= true;
yan = "hello"

3.any表示的是任意型別，使用ts時，不建議用any型別,相當于沒有型別

let d: any;
 d = 10;
 d = "dddd";
 d = true;

4. unknown表示未知型別

let e: unknown;
e = true;
e = 'hello';
let s: string;
//s=e 這樣不能直接賦值，因為定義的e是未知型別,如果是any就可以
//可判斷
if (typeof e === 'string') {
    s = e
}
語法：
  變數 as 型別  ==>  s = e as string
  <型別>變數    ==>  s = <string> e

5. void用來表示空，沒有回傳值

function fn():void{

}

6. object物件

語法：{屬性名：屬性值，屬性名：屬性值}

(1)、在屬性的后面加上?，表示屬性是可選的,賦值時可寫age也可不寫

let d:{str:string,age?:number};
 d={str:"董"};

(2)、[proname:string]:any表示任意型別的屬性；

//宣告時沒有定義age、gender屬性，加了[proname:string]:any賦值時是可以的
let c:{str:string,[proname:string]:any};
c={str:"dong",age:12,gender:"男"};

7. 設定函式結構型別宣告：

語法：
functon fn(引數：型別，引數：型別)：型別（回傳值的型別）{
}
(形參:型別 ,形參:型別 ,....)=>回傳值；
function getRest(a: number, b: number): number {
    return a + b
}
getRest(2, 5);
let m:(a:number,b:number)=>number;

8. 陣列Array

(1) 、表示字串陣列

 let f:string[];
f=["a","d"]

(2)、表示數字陣列

let g:Array<number>
g=[1,2,3]

(3)元組，就是固定長度的陣列

let v:[string,number];
v=["22",234]

9. &表示同時

let j:{str:string}&{age:number};
j={str:'dong',age:12}

10. 型別別名

type mytype=1|2|3|4|5|6;
let k:mytype;
let n:mytype;
k=4;
n=2;

型別推論

如果沒有明確的指定型別，那么 TypeScript 會依照型別推論（Type Inference）的規則推斷出一個型別，

//比如下面的代碼，沒有寫型別，但是它的值是一個字串，所以再次賦值為數字7是會報錯的
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;//報錯

類-------介面

類：定義了一件事物的抽象特點，包含它的屬性和方法

1、創建一個類，運用了static靜態

class Person{
   name:string="孫悟空";
   num:number=18;
   static age:number=20;//靜態屬性
  // 加上static只能用類Person去呼叫
   static sayhello(){
       console.log("age")
   }
   sayHi(){
       console.log(this.num)
   }
}
const per=new Person;
Person.sayhello();
per.sayHi()//實體呼叫

2、抽象方法使用抽象類abstract和繼承extends

class Animal {
    namestr: string;
    age: number;
    // 建構式會在物件創建時呼叫
    //抽象方法使用abstract開頭，子類必須對抽象方法進行重寫
 abstract constructor(namestr: string, age: number) {
        this.namestr = namestr;
        this.age = age;
    }
  abstract say(): void;
}
//這里運用了繼承========extends ============
class Dong extends Animal {
//當子類用了constructor時，需要用super去復用父類的
    constructor(newname: string, age: number) {
        super(newname, age);
    }
    say() {
        console.log("汪汪")
    }
}
const minzi = new Dong('wang', 6);
console.log(minzi);
minzi.say();

3、修飾屬性public、pricate、protected

public修飾的屬性可以在任意位置訪問，默認值
pricate 私有屬性 ，私有屬性只能在類的內部進行訪問
protected受包含的屬性，只能在當前和當前類使用

 class Animal {
    private namestr: string;//私有屬性
    protected age: number;
    public gender:number;
    constructor(namestr: string, age: number,gender:number) {
        this.namestr = namestr;
        this.age = age;
        this.gender=gender;
    }
    getName(){
        return this.namestr;
    }
    setname(value:string){
       this.namestr=value;
    }
    say(){
      console.log(this.age)//6
    }
}
const per = new Animal('wang', 6,5);
per.setname("dong")
per.say();
console.log(per.getName())//==>dong
console.log(per.gender)//5
console.log(per.namestr)//報錯

4、介面

介面是一種規范的定義，它定義了行為和動作的規范， 定義好介面,用來定義類中包含哪些屬性和方法，可以重復申明，介面中的屬性不能有實際的值

介面合并

interface myInterface{
    name:string,
    age:number,
}
interface myInterface{
    gender:string,
}
const obj:myInterface={
    name:"ddd",
    age:2,
    gender:'男'
}

函式型別介面

interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
    return key+value;
}
md5('dong','zhang')

類與介面型別

interface Anmimal{
    name:string;
    eat(str:string):void;
}
class Dog implements Anmimal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(food:string){
        console.log(this.name+'吃'+food)
    }
}
var dng=new Dog('柯基')
dng.eat('肉')

介面繼承

// 介面繼承
interface Persen{
    eat():void;
}
// PersonOne繼承Persen的介面===
interface PersonOne extends Persen{
   work():void;
}
// web實作PersonOne的類，所以需要包含它們的方法==
class web implements PersonOne{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){
        console.log(this.name+'吃肉---');
    }
    work(){
        console.log(this.name+'做作業')
    }
}

let p=new web('小紅')
p.eat();//小紅吃肉---
p.work();//小紅做作業

5、泛型

可以支持不指定資料型別，傳入的引數和回傳的資料一直，在定義函式或者是類時，如果遇到型別不明確就可以使用泛型

function fn<K>(a: K): K {
    return a
}
let result=fn(10)//不指定泛型，TS可以自動對型別進行推測
let result1=fn<string>('dong')//指定型別string
console.log(result,result1)//=>10,dong

function fn2<K,T>(a: K,b:T): K {
    console.log(b);//=>bu,dong
    return a
}
let result3=fn2(10,"bu")
let result4=fn2<number,string>(23,'dong')

類的泛型

class MinClass<T>{
    public list: T[] = [];
    add(value: T): void {
        this.list.push(value)
    }
    min(): T {
        var minNum = this.list[0];
        for (var i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }
        console.log(minNum)//88
        return minNum;
    }
}
var mi=new MinClass<number>();//這里定義的引數是number
mi.add(99);
mi.add(88);
mi.min()

6、命名空間

內部模塊，主要用于組織代碼，避免命名沖突，一個模塊里可能會有多個命名空間,各個命名空間里的相同類名或者介面不沖突

// 用了命名空間相當于私有空間，
namespace A {
    interface Anmimal {
        name: string;
        eat(str: string): void;
    }
    //里面的方法或者類需要`export`暴露出去
    export class Dog implements Anmimal {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        eat(food: string) {
            console.log(this.name + '吃' + food)
        }
    }
}
// 實體化時用命名的A去獲取
var d = new A.Dog('zhangsan');
d.eat('肉')

7、裝飾器

裝飾器：是一種型別的宣告，它能夠被附加到類宣告，方法、屬性或引數上，可以修改類的行為，通俗講：就是一個方法，可以注入到類、方法、屬性引數上來擴展類、屬性、方法、引數的功能，分兩類：普通裝飾器（無法傳參）、裝飾器工廠（可傳參）

1. 普通裝飾器（無法傳參）

function logClass(params:any){
   console.log(params)//@logClass如果沒有傳引數params就是當前的類HttpClient
//  擴展屬性和方法==
params.prototype.apiUrl='動態擴展的屬性';
params.prototype.run=function(){
    console.log("跑步=====")
}
}
@logClass
class HttpClient{
    constructor(){}
    getDate(){}
}
var http:any =new HttpClient();
console.log(http.apiUrl);//動態擴展的屬性
http.run();//跑步=====

1. 裝飾器工廠（可傳參）

function logClass(params: string) {
    console.log(params)
    //params傳過來的引數====(我是來學ts的)
    return function (target: any) {
        // target就是類HttpClient 
        target.prototype.apiUrl = params;
    }
}
@logClass('我是來學ts的')//傳的引數
class HttpClient {
    constructor() {}
    getDate() {}
}
var http: any = new HttpClient();
console.log(http.apiUrl);//動態擴展的屬性

3. 修改方法及屬性裝飾器

//類裝飾器修改屬性及方法資料
function logClass(target: any) {
//target=>類HttpClient 
    return class extends target {
        str: any = '我是修改后的屬性';
        getDate() {
            console.log(this.str)//我是修改后的屬性
        }
    }
}
// 屬性裝飾器=====
function logParams(params: any) {
    console.log(params)//傳的引數（我是屬性裝飾器---）
    return function (target: any, attr: any) {
        console.log(target);//=>類
        console.log(attr);//屬性=>str
        target[attr] = params;//加上這個會顯示str'我是屬性裝飾器---'
    }
}
@logClass
class HttpClient {
    @logParams('我是屬性裝飾器---')
    public str: string | undefined;
    constructor() {
        this.str = '我是建構式里的str'
    }
    getDate() {
        console.log(this.str)
    }
}
var http = new HttpClient();
http.getDate()
console.log(http.str);//=>我是修改后的屬性

4. 方法裝飾器及修改方法傳參的型別

function getMethods(params: any) {
    return function (target: any, methods: any, desc: any) {
        console.log(target);
        console.log(methods);//方法的名字
        console.log(desc.value);//=>getDate()方法===
        // 擴展屬性和方法=====
        target.str = '修改后的===';
        target.run = function () {
            console.log('run')
        }
        //  修改裝飾器的方法，把裝飾器方法里面傳入的所有引數改為string型別
        //保存當前的方法
        var oMethods = desc.value;
        //  改變引數的型別===
        desc.value = function (...args: any[]) {
            args = args.map((value) => {
                return String(value);
            })
            console.log(args)
            oMethods.apply(this,args)
        }
    }
}
class HttpClient {
    public str: string | undefined;
    constructor() {
        // this.str = '我是建構式里的str'
    }
    @getMethods('http://www.baidu.com')
    getDate(...args: any[]) {
        console.log(args);   
    }
}
var http: any = new HttpClient();
http.run();
console.log(http.str);
http.getDate(123, 123)

有了ts，好像就不用寫typeof了，也不用檢查拿到的資料是不是string、number、undefined、null了，給程式帶來了穩定性和可預測性，方便debug，😊😊😊😊😊😊