您的位置:首页 > 其它

TypeScript入门实例

yeshemeng 2019-07-31 18:07 190 查看 https://www.cnblogs.com/huanzi

  前言

  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项目

  大致的项目结构如下

//你没看错,内容就是空,编译后什么都没有
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

 

标签: