• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript入门实例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  前言

  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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
三千字讲清TypeScript与React的实战技巧发布时间:2022-07-18
下一篇:
Vue+Typescript中在Vue上挂载axios使用时报错发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap