5分鐘上手TypeScript

5分鐘上手TypeScript

image.png

官網(wǎng)鏈接

1.安裝TypeScript

本篇介紹通過Visual Stdio Code終端來安裝

  • 針對使用npm的用戶
npm install -g typescript

2.創(chuàng)建第一個TypeScript文件

在編輯器中，新建HelloWorld.ts文件

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

3.編譯代碼

使用了.ts擴(kuò)展名，但是這段代碼僅僅是JavaScript而已。 你可以直接從現(xiàn)有的JavaScript應(yīng)用里復(fù)制/粘貼這段代碼。

在VS Code終端的命令行上，運行TypeScript編譯器：

tsc greeter.ts

輸出結(jié)果為一個greeter.js文件，它包含了和輸入文件中相同的JavsScript代碼。

一切準(zhǔn)備就緒，我們可以運行這個使用TypeScript寫的JavaScript應(yīng)用了！

4.TypeScript數(shù)據(jù)類型

let或者var都可以定義變量(強(qiáng)類型)

  • 字符型

    "",'',``中包裹的內(nèi)容都是字符

    let a: string = "a";
a = "b";

  • 布爾型

    let b: boolean = false;
b = "a";//報錯，不能隨意更改類型

  • 數(shù)值型

    let c: number = 1;
c = 0x00ff;
c = 1.2e+2;

  • 數(shù)組類型

    //確定數(shù)組中的元素必須是數(shù)值 
let d: number[] = [1, 2, 3, 4];
let d1: Array<string> = ["a", "b", "c", "d"];

  • 元組類型

    //前面的類型與后面初始化的值，必須一一對應(yīng)
let e: [string, boolean, number] = ["a", true, 1];

  • 枚舉類型

    enum Color {
    RED = "0xff0000",
    GREEN = "0x00ff00",
    BLUE = "0x0000ff"
}
console.log(Color.RED);

enum MouseEvents {
    CLICK = "click",
    MOUSE_DOWN = "mousedown",
    MOUSE_UP = "mouseup"
}
document.addEventListener(MouseEvents.CLICK, clickHandler);
function clickHandler() {

}

  • 對象

    let o: object = { a: 1, b: 2 };
o = null;
let s;//s默認(rèn)為undefined

  • 默認(rèn)設(shè)置任意類型

    let i: any = 3;
a = "a";
let x = "b";//默認(rèn)為any

5.函數(shù)類型

在函數(shù)后的冒號后面寫入，返回值的類型，如果是void類型，則不能有return語句；

設(shè)置void表示當(dāng)前函數(shù)不返回任何值

function fn(_a: string, _b: number = 1): void {

}
function getSum(a: number, b: number = 10): number {
    return a + b;
}

6.類型斷言

  • 斷言原理

    1. 類型斷言（Type Assertion）可以用來手動指定一個值的類型。
    2. 類型斷言不是類型轉(zhuǎn)換，斷言成一個聯(lián)合類型中不存在的類型是不允許的;

  • 語法格式

    <類型>值 或者 值 as 類型

  • 舉例如下：

7.繼承

typescript中類的繼承用到的是：extends和super

不同之處，要尤其注意他們的修飾符

  • TypeScript的訪問修飾符

    跟java類似，TypeScript的訪問修飾符有三個，分別是public、private、protected 。TypeScript的默認(rèn)訪問修飾符是public。

    • public聲明的屬性和方法在類的內(nèi)部和外部均能訪問到。
    • protected聲明的方法和屬性只能在類的內(nèi)部和其子類能訪問。
    • private聲明的方法和屬性只能在其類的內(nèi)部訪問。
class Objects {
    constructor() {
    }
    public static assign(target, ...arg: Array<object>): object {
        if (arg.length === 0) return target;
        for (let i = 0; i < arg.length; i++) {
            for (let prop in arg[i]) {
                target[prop] = arg[i][prop];
            }
        }
        return target;
    }
}

class Box {
    // 只能當(dāng)前類或者它的所有子孫類，可以調(diào)用
    protected elem: HTMLDivElement;
    protected speed: number = 2;
    
    // 構(gòu)造函數(shù)不加返回類型
    constructor() {
        this.elem = this.createElement();
    }
    // 通過private設(shè)置私有方法,只有當(dāng)前類才能調(diào)用,在外面實例化對象后不能調(diào)用
    private createElement(): HTMLDivElement {
        let div = document.createElement("div");
        Objects.assign(div.style, {
            width: "50px",
            height: "50px",
            position:"absolute",
            backgroundColor: "red"
        })
        // div.addEventListener("click", this.clickHandler);
        div.addEventListener("click", (e:MouseEvent)=>this.clickHandler(e));
        return div;
    }

    // 通過public設(shè)置為公有類型，在外面實例化對象后可以調(diào)用
    public appendTo(parent: Element) {
        parent.appendChild(this.elem);
    }

    private clickHandler(e: MouseEvent): void {
        // 斷言(確定、肯定)e.currentTarget是HTMLDivElement
        (e.currentTarget as HTMLDivElement).style.backgroundColor = "blue";
        this.update();
    }

    protected update(): void {
        this.speed += 2;
        this.elem.style.left = this.speed + "px";
    }
}

class Ball extends Box{
    constructor(){
        super();
        this.elem.style.borderRadius = "50px";
    }
   protected update():void{
       super.update();
    }
}

let b:Ball = new Ball();
b.appendTo(document.body);

8.接口

實現(xiàn)（implements）是面向?qū)ο笾械囊粋€重要概念。

一般來講，一個類只能繼承自另一個類，有時候不同類之間可以有一些共有的特性，這時候就可以把特性提取成接口（interfaces），用 implements 關(guān)鍵字來實現(xiàn)。這個特性大大提高了面向?qū)ο蟮撵`活性。

舉例來說，門是一個類，防盜門是門的子類。

如果防盜門有一個報警器的功能，我們可以簡單的給防盜門添加一個報警方法。

這時候如果有另一個類，車，也有報警器的功能，就可以考慮把報警器提取出來，作為一個接口，防盜門和車都去實現(xiàn)它：

interface Alarm {
    alert();
}

class Door {
}
//防盜門繼承于門，實現(xiàn)了報警的功能
class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}
//車也實現(xiàn)了報警的功能
class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}
  • 一個類可以實現(xiàn)多個接口：
interface Alarm {
    alert();
}

interface Light {
    lightOn();
    lightOff();
}
//車實現(xiàn)了接口報警器和車燈兩個接口
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
  • 接口繼承接口

接口與接口之間可以是繼承關(guān)系：

interface Alarm {
    alert();
}

interface LightableAlarm extends Alarm {
    lightOn();
    lightOff();
}
  • 接口繼承類
class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

今天就介紹到這里了，感覺不錯的話，給個贊吧~~~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容