TypeScript入門例項

qch發表於2019-07-31
TypeScript

　　前言

　　TypeScript是JavaScript的超集，微軟公司開發，利用es6語法，實現對js的物件導向程式設計思想，寫程式碼的時候會像強型別語言一樣，指定引數型別、返回值型別，型別不對會報錯，但編譯後還是js，弱型別語言，就算是報錯一樣能編譯，不影響程式執行，但可能會出現不可預期的bug；

 

　　更多介紹請看：

　　中文官網：https://www.tslang.cn/index.html

　　中文官網文件：https://www.tslang.cn/docs/home.html

 

　　本文記錄一個TypeScript入門例項，主要內容有：

　　介面、類、繼承、修飾符、引入jquery

 

　　程式碼

　　PS：一些要點寫在了註釋裡面

 

 

　　按照我之前的這篇《TypeScript環境安裝，以及配置idea開發環境》安裝好環境後新建一個SpringBoot專案

　　大致的專案結構如下

 　　需要用到頁面，所以我們引入thymeleaf

        <!--Thymeleaf模板依賴-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

 

　　修改預設路徑

spring.thymeleaf.prefix=classpath:view/
spring.thymeleaf.cache=false

　　其他常規的依賴我就不說了，還是不清楚的看我的《SpringBoot系列》部落格

 

　　直接在啟動類寫一個controller訪問頁面

    @GetMapping("/")
    public ModelAndView index(){
        return new ModelAndView("index");
    }

　　看一下我們的.ts檔案

 

　　tsconfig.json

　　專案配置，如果一個目錄下存在一個tsconfig.json檔案，那麼它意味著這個目錄是TypeScript專案的根目錄。tsconfig.json檔案中指定了用來編譯這個專案的根檔案和編譯選項。

　　編譯項有很多，具體可查閱官網：https://www.tslang.cn/docs/handbook/compiler-options.html

{
  "compilerOptions": {
    "target": "ES6",//ECMAScript目標版本 "ES3"（預設）
    "module": "ES6",//指定生成哪個模組系統程式碼,CommonJS（後端，例如node.js）、AMD（瀏覽器前端）、ES6（前後端結合體）
    "removeComments": true //刪除所有註釋，除了以 /!*開頭的版權資訊。
  }
}

 

　　Person.ts

　　宣告一個人類介面

/**
 * 人類介面
 * 介面的成員變數不能用修飾詞修飾
 * export 表示匯出
 */
export interface Person {
    /* 屬性 */
    name?: string;//姓名
    age?: number;//年齡

    /* 方法 */
    toString(): string;
}

　　

　　Student.ts

　　一個學生類，實現人類介面，同時宣告一個班花類，繼承學生類

//匯入 檔名字尾 .js 必須要有，不然瀏覽器無法識別路徑
import {Person} from "./Person.js";

/**
 * 學生類
 * 實現了Person，必須實現它的屬性跟方法
 */
export class Student implements Person {
    /*
        看一下有哪些修飾符（與java基本一致）

        公有 public，可以自由的訪問程式裡定義的成員
        私有 private，不能在宣告它的類的外部訪問
        受保護 protected，與private修飾符的行為很相似，但有一點不同，protected成員在派生類中仍然可以訪問
        靜態 static，被修飾的屬性存在於類本身上面而不是類的例項
        只讀 readonly，設定只讀後只能才宣告變數時跟在構造引數進行賦值
     */

    //屬性
    public name?: string;
    public age?: number;
    private identity: string = "學生";

    //構造引數，預設已經建立空構造
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    //set、get方法
    set _identity(identity: string) {
        this.identity = identity;
    }

    get _identity() {
        return this.identity;
    }

    //普通方法
    public toString(): string {
        return "name：" + this.name + " age：" + this.age + " identity：" + this.identity;
    }

    //泛型，輸入什麼型別就輸出什麼型別
    public static print<T>(ss: T): T {
        return ss;
    }

    //靜態方法
    public static whoIsClassFlower(): string {
        return new ClassFlower().toString();
    }
}

/**
 * 班花
 * 繼承了Student類
 */
class ClassFlower extends Student {
    constructor() {
        /*
            派生類包含了一個建構函式，它必須呼叫super()，它會執行基類的建構函式。
            而且，在建構函式裡訪問this的屬性之前，我們一定要呼叫super()
         */
        super("小芳", 18);
        this.name = "小芳";
    }
}

　　

　　Main.ts

　　Main入口測試

//匯入一個模組中的某個匯出內容 檔名字尾 .js 必須要有，不然瀏覽器無法識別路徑
import {Student} from "./Student.js";

import $ from "../js/jquery-1.11.0.min.js";

// 具有副作用的匯入模組，儘管不推薦這麼做，一些模組會設定一些全域性狀態供其它模組使用。
// 這些模組可能沒有任何的匯出或使用者根本就不關注它的匯出。
// 這樣匯入會導致編譯報錯，但並不影響使用
// import "../js/jquery-1.11.0.min.js";

//通過new構造引數建立物件
let student = new Student("張三", 19);

//呼叫set、get方法，修改identity學生身份
console.log("當前身份：" + student._identity);
student._identity = "還是學生";

//呼叫普通方法
console.log(student.toString());
//呼叫靜態方法
console.log("班花：" + Student.whoIsClassFlower());
//泛型
console.log(typeof Student.print(1));
console.log(typeof Student.print("1"));

//使用jq操作DOM
$("body").append("<h3>使用jq操作DOM</h3>");

　　引入jquery，我們採用的引入具體模組，但現在的jquery-1.11.0.min.js並沒有顯式的匯出$，因此程式會報錯

　　為此，我們在jquery的最後面手動匯出預設模組

//手動匯出全域性物件
export default $;

　　

　　或者我們也可以選擇這種匯入方式

// 具有副作用的匯入模組，儘管不推薦這麼做，一些模組會設定一些全域性狀態供其它模組使用。
// 這些模組可能沒有任何的匯出或使用者根本就不關注它的匯出。
// 這樣匯入會導致編譯報錯，但並不影響使用
import "../js/jquery-1.11.0.min.js";

 

　　使用下方工具欄編譯之後

 　　Person.js

//你沒看錯，內容就是空，編譯後什麼都沒有
View Code

 

　　Student.js

export class Student {
    constructor(name, age) {
        this.identity = "學生";
        this.name = name;
        this.age = age;
    }
    set _identity(identity) {
        this.identity = identity;
    }
    get _identity() {
        return this.identity;
    }
    toString() {
        return "name：" + this.name + " age：" + this.age + " identity：" + this.identity;
    }
    static print(ss) {
        return ss;
    }
    static whoIsClassFlower() {
        return new ClassFlower().toString();
    }
}
class ClassFlower extends Student {
    constructor() {
        super("小芳", 18);
        this.name = "小芳";
    }
}
View Code

 

　　Main.js

import { Student } from "./Student.js";
import $ from "../js/jquery-1.11.0.min.js";
let student = new Student("張三", 19);
console.log("當前身份：" + student._identity);
student._identity = "還是學生";
console.log(student.toString());
console.log("班花：" + Student.whoIsClassFlower());
console.log(typeof Student.print(1));
console.log(typeof Student.print("1"));
$("body").append("<h3>使用jq操作DOM</h3>");
View Code

 

　　在HTML頁面中引入編譯生成的Main.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

</body>
<!-- script裡面要加type="module"，這樣瀏覽器才會把相關的程式碼當作ES6的module來對待 -->
<script th:src="@{ts/Main.js}" type="module"></script>
</html>

　　

　　大致效果

　　頁面效果

 　　後記

 　　這個例子比較簡單，我們引入第三方庫也是用比較簡單、暴力的方式，如需要支援ts，還需要TypeScript 宣告檔案，具體可以參考一下菜鳥教程：https://www.runoob.com/typescript/ts-ambient.html

 

相關文章