【学习笔记】TypeScript

TypeScript

  • 1、介绍
    •       1.1、概述
    •       1.2、基本特点
    •       1.3、优势
    •       1.4、开发环境搭建
  • 2、基础
    •       2.1、类型声明
    •       2.2、配置相关
      •             2.2.1 自动编译文件
      •             2.2.2 配置文件 tsconfig.json
      •             2.2.3 使用 webpack 打包 ts 代码
      •             2.2.4 完善 webpack.config.js
    •       2.3、类
      •             2.3.1 基本用法示例
      •             2.3.2 继承示例
      •             2.3.3 抽象类示例
      •             2.3.4 接口
      •             2.3.4 范型

1、介绍

      1.1、概述

        TypeScript 是由微软开发并维护的一种开源编程语言。它是 JavaScript 的一个超集,主要用于开发大型应用程序。TypeScript 提供了对 JavaScript 的静态类型检查和现代编程功能,同时保留了与 JavaScript 完全兼容的特点

      1.2、基本特点

基本特点描述
类型系统TypeScript 是强类型语言,提供了静态类型检查。开发者可以在编写代码时指定变量、函数参数和返回值的类型,从而在编译时捕获潜在的类型错误
编译器TypeScript 代码需要通过 TypeScript 编译器(tsc)编译为 JavaScript 代码。编译器可以将 TypeScript 转换为任何版本的 JavaScript(例如 ES5、ES6 等)
接口TypeScript 支持接口,允许开发者定义对象的结构和类型,从而提供更强的代码约束
类和继承TypeScript 支持基于类的面向对象编程,包括类的定义、继承、公共和私有成员等

      1.3、优势

优势描述
代码可维护性由于有类型检查,TypeScript 使得代码更易于阅读和维护,减少了运行时错误
开发工具支持TypeScript 与多种开发工具(如 Visual Studio Code)紧密集成,提供智能提示、代码补全和重构等功能,提升开发效率
社区和生态系统TypeScript 拥有活跃的社区和丰富的生态系统,包括大量的类型定义文件(如 DefinitelyTyped),使得使用第三方库时也能享受类型安全的好处

      1.4、开发环境搭建

        ① 安装依赖:npm i -g typescript
        ② 编写一个 ts 脚本 index.ts

// 定义一个接口
interface Person {name: string;age: number;
}// 实现接口的类
class Student implements Person {constructor(public name: string, public age: number, public grade: number) {}study() {console.log(`${this.name} is studying.`);}
}// 创建一个 Student 实例
const student: Student = new Student('John', 20, 3);
student.study();  // 输出: John is studying.

        ③ 编译 ts 文件:tsc index.ts 编译之后能在同一目录下看到编译后的 js 文件 index.js(如果用 vsCode 编辑器的话,TypeScript 编译器扫描到 index.js、index.ts 中都有 Student 类会有下划线警告,因此可以选择使用 WebStorm 编辑器,因为编译后 index.ts 变得跟文件夹一样,index.js 存放在这个“文件夹”下,因此不会有警告)

// 实现接口的类
var Student = /** @class */ (function () {function Student(name, age, grade) {this.name = name;this.age = age;this.grade = grade;}Student.prototype.study = function () {console.log("".concat(this.name, " is studying."));};return Student;
}());
// 创建一个 Student 实例
var student = new Student('John', 20, 3);
student.study(); // 输出: John is studying.

Tip:在没有配置文件时,默认编译后的 JS 支持 ES3,所以会看到在 ts 中使用的 let 会被转换成 var

        ④ 验证 js 文件是否可以使用:node .\index.js

2、基础

      2.1、类型声明

        类型声明式 TS 非常重要的一个特点,通过类型声明可以指定 TS 中变量的类型,指定类型后当为变量赋值时,TS 编译器会自动检查值是否符合类型的声明,符合则成功赋值、否则报错(C++、Java 的特性)

// 先声明 后赋值
let a:number
a=1024
console.log(a);// 声明后顺便赋值
let b:boolean=true
console.log(b);// 直接赋值会自动检测类型
let c='ccc'
console.log(typeof c);// 没有规定形参类型
function sum1(a,b){return a+b
}
console.log(sum1(123,"456"));// 规定形参类型
function sum2(a:number,b:number){return a+b
}
console.log(sum2(123,456));// 规定返回值类型 像上面那种没有规定的就自动判断
function hello():string{return 'Hello~'
}
console.log(hello());
类型描述
number数字
string字符串
boolean布尔值
字面量例如 let a = number | “abc”
// 字面量类型
// 简单
let a: 10; // 声明a只能被赋值10
a = 10;
console.log(a);
// 多个类型使用 | 拼接
let b: 1 | "a" | boolean;
b = true;
console.log(b);
// 使用 type 来存储类型
type C = number | string;
let c: C = 3;
类型描述
any任意类型,随便赋值给别人不报错
unknown任意类型,随便赋值给别人会报错
let a:number
let b:boolean
let c:string// any类型 不推荐使用 因为可以随便赋值给别人不报错
// 显示声明
let d: any;
d = 1;
d = "a";
a = d; // 随便赋值给别人不报错
// 隐式声明
let e; // 相当于 let e:any;
e = 1;
e = 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/17800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十种常用数据分析方法

描述性统计分析(Descriptive Statistics) 使用场景:用来总结数据的基本特征,如平均值、中位数、标准差等。 优势:简单易懂,快速总结数据。 劣势:无法深入挖掘数据的潜在关系。 模拟数据及示例…

7B2PRO5.4.2主题 wordpress主题开心版免授权源码

这款7B2 PRO主题也是很多小伙伴儿喜欢的一个主题,有伙伴儿反馈说想学习下新版本,这不就来了,免受权开心版本可供学习使用,要运营还是尊重下版权到官网进行购买吧。 下载:7B2PRO5.4.2 wordpress主题免授权直接安装_麦…

软件工程作业5

某培训机构入学管理系统有报名、交费和就读等多项功能,下面是对其各项功能的说明: 1、报名:由报名处负责,需要在学员登记表上进行报名登记,需要查询课程表让学员选报课程,学院所报课程将记录到学员选课表 2、交费&am…

vim方向键乱码

问题描述 有的docker容器使用的父镜像比较精简,安装的vim不带vimrc文件,只支持使用 h, j, k, l来进行方向键的移动。具体的历史背景是: 在 Vim 的前身 vi 编辑器开发时(1976 年),很多终端并不具备现代键盘…

C#算数运算符

赋值运算符 符号: 先看右侧 再看左侧 将右侧的数据赋值给左侧的变量 使用方法: int num 5; 加 符号: 先计算 在赋值 右边两个值相加 赋值给左边 使用方法: int i 1 2; 减 符号:- 右边两个值相减 赋值给左边 使用方法: int i 4 -…

The First项目报告:解读ZK技术的跨链巨头Polyhedra Network

4 月 17 日,零知识证明(ZK)基础设施开发团队 Polyhedra Network与谷歌云达成战略合作,以响应 Web2 与 Web3 市场对于该技术日益增长的需求。双方将基于Polyhedra的尖端研究及专有算法通过谷歌云提供的零知识即服务向全球开发者开放…

JS-01基本介绍和数据类型

目录 1 JS基本介绍 2 数据类型 2.1 基本数据类型(值类型) 2.2 复杂数据类型(引用类型) 2.2 关于undefined类型 1 JS基本介绍 ## JS基本介绍 JS的用途:Javascript可以实现浏览器端、服务器端(nodejs)。。。 浏览器…

hexo静态博客 部署到xxx.github.io github 静态页

hexo安装 npm install hexo-cli -g hexo init blog cd blog npm install hexo server key配置 ssh-keygen -t ed25519 -C “emaile.com” 添加key到github err gitgithub.com: Permission denied (publickey). fatal: Could not read from remote repository. 配置GitHub仓…

精酿啤酒:品质与口感在不同消费人群中的差异与共性

在啤酒市场中,不同消费人群对品质与口感的喜好存在一定的差异。然而,Fendi club啤酒凭借其卓着的品质和与众不同的口感,在不同消费人群中都展现出一定的共性。 从性别差异来看,男性消费者通常更注重啤酒的品质和口感,而…

TiDB-从0到1-体系结构

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务 一、TiDB体系结构图 TiDB基础的体系架构中有4大组件 TiDB Server:用于处理客户端的请求PD:体系的大脑,存储元数据信息TiKV:存储数据TiFlash…

【机器学习】【深度学习】批量归一化(Batch Normalization)

概念简介 归一化指的是将数据缩放到一个固定范围内,通常是 [0, 1],而标准化是使得数据符合标准正态分布。归一化的作用是使不同特征具有相同的尺度,从而使模型训练更加稳定和快速,尤其是对于使用梯度下降法的算法。而标准化的作用…

软件功能测试的类型和流程分享

在现代社会,软件已经成为人们生活中不可或缺的一部分,而在软件的开发过程中,功能测试是不可或缺的环节。软件功能测试指的是对软件系统的功能进行检查和验证,以确保软件在各种情况下能够正常运行,并且能够按照用户需求…

2024年国内最全面最前沿人工智能理论和实践资料

引言 【导读】2024第11届全球互联网架构大会圆满结束。会议邀请了100余位行业内的领军人物和革新者,大会通过主题演讲、实践案例分享,以及前瞻性的技术讨论,探索AI技术的边界。 近日,备受瞩目的第十一届全球互联网架构大会&#x…

SOLIDWORKS正版代理商该如何选择?

伴随着科技的迅猛进步,CAD计算机辅助设计软件在制造行业中的重要性日益凸显。其中SOLIDWORKS凭借其强大的建模功能,模拟分析,自动化工程图纸生成及协作与数据管理能力成为制造业的佼佼者。作为SOLIDWORKS正式版代理商,可为制造业提供综合技术…

AlmaLinux9安装zabbix6.4

文章目录 [toc]一、配置源1)查看系统2)配置源 二、安装zabbix三、安装数据库1)卸载mariadb2)安装MySQL3)配置开启自启动4)MySQL设置root密码 四、导入数据五、配置zabbix六、参考地址六、参考地址 一、配置…

为什么会有websocket(由来)

一、HTTP 协议的缺点和解决方案 1、HTTP 协议的缺点和解决方案 用户在使用淘宝、京东这样的网站的时候,每当点击一个按钮其实就是发送一个http请求。那我们先来回顾一下http请求的请求方式。 一个完整的http请求是被分为request请求节点和response响应阶段的&…

chrony时间同步

文章目录 [toc]一、、配置chronyd1)时区设置为本地时区2)配置chrony服务端3)配置chronyd客户端 二、chronyd常用命令1)chronyd常用命令说明2)timedatectl说明3)设置时间 一、、配置chronyd Centos7默认使用…

iOS--工厂设计模式

iOS--工厂设计模式 设计模式的概念和意义类族模式UIButton作为类族模式的例子总结 三种工厂设计模式简单工厂模式(Simple Factory Pattern):代码实例 工厂方法模式(Factory Method Pattern):代码实例 抽象工…

Spring boot集成easy excel

Spring boot集成easy excel 一 查看官网 easyexcel官方网站地址为easyexcel官网,官网的信息比较齐全,可以查看官网使用easyexcel的功能。 二 引入依赖 使用easyexcel,首先要引入easyexcel的maven依赖,具体的版本根据你的需求去…

C语言学习笔记--C语言的实型数据

实型常量的表示方法(掌握) 实型也称为浮点型。实型常量也称为实数或者浮点数。在C语言中,实数只采用十进制。它有两种形式:十进制小数形式,指数形式。 1十进制数形式:由数码0~9和小数点组成。 例如&…