TypeScript入門實例

　　前言

　　TypeScript是JavaScript的超集，微軟公司開發，利用es6語法，實現對js的面向對象編程思想，寫代碼的時候會像強類型語言一樣，指定參數類型、返回值類型，類型不對會報錯，但編譯后還是js，弱類型語言，就算是報錯一樣能編譯，不影響程序運行，但可能會出現不可預期的bug；

　　同時在ts文件里面import引入了它需要的依賴，外部引入這個ts編譯好的js就不需要在引入它的依賴了，它內部自己去找依賴，就跟java一樣，自動模塊的導入，還有就是你在A引入了B，B引入了C，並返回了C類型的屬性，這時候你在A實例化B，然后用b.c，能.出C類型的屬性、方法，這樣大大方便了js開發

 

　　更多介紹請看：

　　中文官網：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

//你沒看錯，內容就是空，編譯后什么都沒有

 

　　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 = "小芳";
    }
}

 

　　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>");

 

　　在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>

　　

　　大致效果

　　頁面效果

 　　后記

　　大家可以看到，我們再html里就引入了Main.js，它依賴Student.js，Student依賴Person.js，這些依賴關系它會自己去引入，只要在對應的路徑有這個文件就可以了，如果是按照之前js的引入方法，我們需要在引入Main之前引入它的依賴，否則就會報錯

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

 

　　補充：2019-08-19補充，每次改完ts代碼都要進行一次編譯，太麻煩了，可以設置一下自動編譯，打開settings，找到Languages & Frameworks 下面的TypeScript，勾選Recompile on changes，就可以開啟自動編譯了