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

//你没看错，内容就是空，编译后什么都没有

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>

　　

　　大体效果

　　页面效果

 　　后记

　　你们能够看到，咱们再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，就能够开启自动编译了