TypeScript入門實例

時間 2019-11-08

標籤 typescript 入門實例简体版

原文原文鏈接

　　前言

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

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

　　更多介紹請看：java

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

　　中文官網文檔：https://www.tslang.cn/docs/home.htmljquery

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

　　接口、類、繼承、修飾符、引入jqueryspring

　　代碼

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

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

　　大體的項目結構以下json

　　須要用到頁面，因此咱們引入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>