TypeScript入门实例

啊乌發表於 2019-7-31 18:07:00

<h2>　　前言</h2>
　　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
 
<h2>　　代码</h2>
　　PS：一些要点写在了注释里面
 
 
　　按照我之前的这篇《TypeScript环境安装，以及配置idea开发环境》安装好环境后新建一个SpringBoot项目
　　大致的项目结构如下
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731164011926-1644398487.png" alt="">
 　　需要用到页面，所以我们引入thymeleaf
<div class="cnblogs_code">
<pre> 
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency></pre>
</div>
 
　　修改默认路径
<div class="cnblogs_code">
<pre>spring.thymeleaf.prefix=classpath:view/
spring.thymeleaf.cache=false</pre>
</div>
　　其他常规的依赖我就不说了，还是不清楚的看我的《SpringBoot系列》博客
 
　　直接在启动类写一个controller访问页面
<div class="cnblogs_code">
<pre> @GetMapping("/")
public ModelAndView index(){
 return new ModelAndView("index");
}</pre>
</div>
　　看一下我们的.ts文件
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731170944086-1164770336.png" alt="">
 
　　tsconfig.json
　　项目配置，如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
　　编译项有很多，具体可查阅官网：https://www.tslang.cn/docs/handbook/compiler-options.html
<div class="cnblogs_code">
<pre>{
"compilerOptions": {
"target": "ES6",//ECMAScript目标版本 "ES3"（默认）
"module": "ES6",//指定生成哪个模块系统代码,CommonJS（后端，例如node.js）、AMD（浏览器前端）、ES6（前后端结合体）
"removeComments": true //删除所有注释，除了以 /!*开头的版权信息。
}
}</pre>
</div>
 
　　Person.ts
　　声明一个人类接口
<div class="cnblogs_code">
<pre>/**
* 人类接口
* 接口的成员变量不能用修饰词修饰
* export 表示导出
*/
export interface Person {
/* 属性 */
name?: string;//姓名
age?: number;//年龄

/* 方法 */
toString(): string;
}</pre>
</div>
　　
　　Student.ts
　　一个学生类，实现人类接口，同时声明一个班花类，继承学生类
<div class="cnblogs_code">
<pre>//导入文件名后缀 .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 = "小芳";
}
}</pre>
</div>
　　
　　Main.ts
　　Main入口测试
<div class="cnblogs_code">
<pre>//导入一个模块中的某个导出内容文件名后缀 .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>"); </pre>
</div>
　　引入jquery，我们采用的引入具体模块，但现在的jquery-1.11.0.min.js并没有显式的导出$，因此程序会报错
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731172423352-1847673233.png" alt="">
　　为此，我们在jquery的最后面手动导出默认模块
<div class="cnblogs_code">
<pre>//手动导出全局对象
export default $;</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731172537569-1554367501.png" alt="">
　　
　　或者我们也可以选择这种导入方式
<div class="cnblogs_code">
<pre>// 具有副作用的导入模块，尽管不推荐这么做，一些模块会设置一些全局状态供其它模块使用。
// 这些模块可能没有任何的导出或用户根本就不关注它的导出。
// 这样导入会导致编译报错，但并不影响使用
import "../js/jquery-1.11.0.min.js";</pre>
</div>
 
　　使用下方工具栏编译之后
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731170850652-709636931.png" alt="">
 　　Person.js
<div class="cnblogs_code"><img id="code_img_closed_888bca95-67ac-4801-8e14-cc0948654428" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_888bca95-67ac-4801-8e14-cc0948654428" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_888bca95-67ac-4801-8e14-cc0948654428" class="cnblogs_code_hide">
<pre>//你没看错，内容就是空，编译后什么都没有</pre>
</div>
View Code</div>
 
　　Student.js
<div class="cnblogs_code"><img id="code_img_closed_79a59ff0-48a6-4487-8288-b1c0eb4e6e0d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_79a59ff0-48a6-4487-8288-b1c0eb4e6e0d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_79a59ff0-48a6-4487-8288-b1c0eb4e6e0d" class="cnblogs_code_hide">
<pre>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 = "小芳";
}
}</pre>
</div>
View Code</div>
 
　　Main.js
<div class="cnblogs_code"><img id="code_img_closed_12d8872a-4f22-44ea-b135-fccf5f9443e9" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_12d8872a-4f22-44ea-b135-fccf5f9443e9" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_12d8872a-4f22-44ea-b135-fccf5f9443e9" class="cnblogs_code_hide">
<pre>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>");</pre>
</div>
View Code</div>
 
　　在HTML页面中引入编译生成的Main.js
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
 html, body {
 margin: 0;
 padding: 0;
 }
</style>
</head>
<body>

</body>

<script th:src="@{ts/Main.js}" type="module"></script>
</html></pre>
</div>
　　
<h2>　　大致效果</h2>
　　页面效果
<img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190731170546155-294732142.png" alt="">
<h2> 　　后记</h2>
　　大家可以看到，我们再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，就可以开启自动编译了
<img src="https://img2018.cnblogs.com/blog/1353055/201908/1353055-20190819145854282-653751442.png" alt="">
 

</div>
<div id="MySignature" role="contentinfo">

<div>
<h3>版权声明</h3>
<div>作者：huanzi-qch</div>
<div>出处：https://www.cnblogs.com/huanzi-qch</div>
<div>若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.</div>
</div> 

<div>
<h3>AD广告位（长期招租，如有需要请私信）</h3>

【阿里云】阿里云最全的优惠活动聚集地！ 
【腾讯云】腾讯云当前最新优惠活动专区！ 
 
</div>

<div>
<h3>捐献、打赏</h3>
<div>请注意：相应的资金支持能更好的持续开源和创作，如果喜欢这篇文章，请随意打赏！</div>
<div style="text-align: center;">
<div style="
float: left;
margin-left: 200px;
">
<img style="width: 100px;" src="https://huanzi-qch.github.io/file-server/images/zhifubao.png"/>
支付宝
</div>
<div>
<img style="width: 100px;" src="https://huanzi-qch.github.io/file-server/images/weixin.png"/>
微信
</div>
</div>
</div> 

<div>
<h3>交流群</h3>
<div style="text-align: center;">
有事请加群，有问题进群大家一起交流！ 
<img style="width: 300px;" src="https://huanzi-qch.github.io/file-server/images/qq.png"/>
</div>
</div> 
来源：https://www.cnblogs.com/huanzi-qch/p/11278130.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript入门实例