TypeScript入门

目录

一:语言特性

二:TypeScript安装

NPM 安装 TypeScript

 三:TypeScript基础语法

第一个 TypeScript 程序

四:TypeScript 保留关键字

空白和换行

TypeScript 区分大小写

TypeScript 注释

TypeScript 支持两种类型的注释

五:TypeScript与面向对象

六:TypeScript基础类型

Any 类型

Null 和 Undefined

null

undefined

never 类型


一:语言特性

TypeScript是一种给JavaScript添加特性的语言扩展。增加了以下功能:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

JavaScript与TypeScript的区别

TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供了编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

二:TypeScript安装

我们需要使用到 npm 工具安装,如果你还不了解 npm,可以参考我们的NPM 使用介绍。

NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装。

使用国内镜像:

http://npm config set registry https://registry.npmmirror.com

安装 typescript:

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

$ tsc -v
Version 3.2.2

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码:

tsc app.ts

TypeScript 转换为 JavaScript 过程如下图:

很多 IDE 都有支持 TypeScript 插件,如:Visual Studio,Sublime Text 2,WebStorm / PHPStorm,Eclipse 等。

本章节主要介绍 Visual Studio Code,Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器,由 Microsoft 公司开发。


 三:TypeScript基础语法

TypeScript程序由以下几个部分组成:

  • 模块
  • 函数
  • 变量
  • 语法和表达式
  • 注释

第一个 TypeScript 程序

我们可以使用以下 TypeScript 程序来输出 "Hello World" :

const hello :string ="Hello World!"
console.log(hello)

以上代码首先通过 tsc 命令编译:

tsc Runoob.ts

整个流程如下图所示:

我们可以同时编译多个 ts 文件:

tsc file1.ts file2.ts file3.ts

tsc 常用编译参数如下表所示:

序号编译参数说明
1.

--help

显示帮助信息

2.

--module

载入扩展模块

3.

--target

设置 ECMA 版本

4.

--declaration

额外生成一个 .d.ts 扩展名的文件。

tsc ts-hw.ts --declaration
以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
5.

--removeComments

删除文件的注释

6.

--out

编译多个文件并合并到一个输出的文件

7.

--sourcemap

生成一个 sourcemap (.map) 文件。

sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。

8.

--module noImplicitAny

在表达式和声明上有隐含的 any 类型时报错

9.

--watch

在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。

四:TypeScript 保留关键字

TypeScript 保留关键字如下表所示:

breakascatchswitch
caseifthrowelse
varnumberstringget
moduletypeinstanceoftypeof
publicprivateenumexport
finallyforwhilevoid
nullsuperthisnew
inreturntruefalse
anyextendsstaticlet
packageimplementsinterfacefunction
dotryyieldconst
continue

空白和换行

TypeScript会忽略程序中出现的空格,制表符和换行符。

空格,制表图通常用来缩进代码,使代码易于阅读和理解。

TypeScript 区分大小写

TypeScript是区分大小写字符的

TypeScript 注释

注释是一个良好的习惯,虽然很多程序员讨厌注释,但还是建议你在每段代码写上文字说明。

注释可以提高程序的可读性。

注释可以包含有关程序一些信息,如代码的作者,有关函数的说明等。

编译器会忽略注释。

TypeScript 支持两种类型的注释

  • 单行注释 ( // ) − 在 // 后面的文字都是注释内容。

  • 多行注释 (/* */) − 这种注释可以跨越多行。


五:TypeScript与面向对象

面向对象是一种对现实世界理解和抽象的方法。

TypeScript是一种面向对象的程序语言。

面向对象主要有两个概念:对象和类。

  • 对象:对象是类的一个实例,有状态和行为
  • 类:类是一个模板,它描述一类对象的行为和状态
  • 方法:方法是类的操作的实现步骤。

TypeScript面向对象编程实例:

class Site{name():void{console.log("Runoob")}
}
var obj =new Site();
obj.name();

以上实例定义了一个类Site,该类有一个方法name(),该方法在终端上输出了字符串Runoob。

new关键字创建了类的对象,该对象调用了方法name()。

编译成JavaScript代码如下:

var Site= (function(){function Site(){}Site.prototype.name= function(){console.log("Runoob");}return Site;
}());
var obj =new Site();
obj.name();

六:TypeScript基础类型

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值。
数字类型number

双精度 64 位浮点值。它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
字符串类型string

一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型boolean

表示逻辑值:true 和 false。

let flag: boolean = true;
数组类型

声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];// 或者使用数组泛型
let arr: Array<number> = [1, 2];
元组

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
枚举enum

枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
voidvoid

用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {alert("Hello Runoob");
}
nullnull

表示对象值缺失。

undefinedundefined

用于初始化变量为一个未定义的值

nevernever

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

注意:TypeScript 和 JavaScript 没有整数类型。

Any 类型

任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。

1.变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查,示例代码如下:

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

改写现有代码时,任意值允许在编译可选择地包含或移除类型检查,示例代码如下:

let x:any =4;
x.ifItExists();//正确,ifItExists方法在运行时可能存在,但这里并不会检查
x.toFixed(); //正确

定义存储各种类型数据的数组时,示例代码如下:

let arrayList:any[] =[1,false,'fine'];
arrayList[1]=100;

Null 和 Undefined

null

在JavaScript中null表示“什么都没有”。

null值是一个只有一个值的特殊类型。表示一个空对象引用。

用typeof检测null返回的是object

undefined

在JavaScript中,undefined是一个没有设置值的变量。

typeof一个没有值的变量会返回undefined。

Null和Undefined是其他任何类型(包括void)的子类型,可以赋值给其他类型,如数字类型

,此时,赋值后的类型会变成null或undefined。而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就可以使得null和undefined只能被赋值给void或本身对应的类型,示例代码如下:

//启用 --strictNullChecks
let x:number;
x=1;// 编译成功
x=undefined;//编译错误
x=null;//编译错误

上面的例子中变量x只能是数字类型。如果一个类型可能出现null或undefined,可以用|来支持多种类型,示例代码如下:

// 启用 --strictNullChecks
let x:number|null|undefined
x=1;//编译正确
x=undefined;//编译正确
x=null;//编译正确

更多内容可以查看:JavaScript typeof, null, 和 undefined


never 类型

never类型是其他类型(包含null和undefined)的子类型,代表从不会出现的值。这意味着声明为never类型的变量只能被never类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环),示例代码如下:

let x:never;
let y:number;// 编译错误,数字类型不能转为 never 类型
x = 123;// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {throw new Error(message);
}// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {while (true) {}
}


本文参考了有关TypeScript相关文章

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

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

相关文章

初识C语言——详细入门一(系统性学习day4)

目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍&#xff1a; 特点&#xff1a; 基本构成&#xff1a; 二、认识C语言程序 标准格式&#xff1a; 简单C程序&#xff1a; 三、基本构成分类详细介绍 &#xff08;1&#xff09;关键字 &#xff08;2&#xf…

fork函数

二.fork函数 2.1函数原型 fork()函数在 C 语言中的原型如下&#xff1a; #include <unistd.h>pid_t fork(void);其中pid_t是一个整型数据类型&#xff0c;用于表示进程ID。fork()函数返回值是一个pid_t类型的值&#xff0c;具体含义如下&#xff1a; 如果调用fork()的…

MyBatis中当实体类中的属性名和表中的字段名不一样,怎么办

方法1&#xff1a; 在mybatis核心配置文件中指定&#xff0c;springboot加载mybatis核心配置文件 springboot项目的一个特点就是0配置&#xff0c;本来就省掉了mybatis的核心配置文件&#xff0c;现在又加回去算什么事&#xff0c;总之这种方式可行但没人这样用 具体操作&…

Python灰帽编程——错误异常处理与面向对象

文章目录 错误异常处理与面向对象1. 错误和异常1.1 基本概念1.1.1 Python 异常 1.2 检测&#xff08;捕获&#xff09;异常1.2.1 try except 语句1.2.2 捕获多种异常1.2.3 捕获所有异常 1.3 处理异常1.4 特殊场景1.4.1 with 语句 1.5 脚本完善 2. 内网主机存活检测程序2.1 scap…

【Java 基础篇】Java字符打印流详解:文本数据的输出利器

在Java编程中&#xff0c;我们经常需要将数据输出到文件或其他输出源中。Java提供了多种输出流来帮助我们完成这项任务&#xff0c;其中字符打印流是一个非常有用的工具。本文将详细介绍Java字符打印流的用法&#xff0c;以及如何在实际编程中充分利用它。 什么是字符打印流&a…

DNG格式详解,DNG是什么?为何DNG可以取代RAW统一单反相机、苹果安卓移动端相机拍摄输出原始图像数据标准

返回图像处理总目录&#xff1a;《JavaCV图像处理合集总目录》 前言 在DNG格式发布之前&#xff0c;我们先了解一下之前单反相机、苹果和安卓移动端相机拍照输出未经处理的原始图像格式是什么&#xff1f; RAW 什么是RAW&#xff1f; RAW是未经处理、也未经压缩的格式。可以…

Rust通用编程概念(3)

Rust通用编程概念 1.变量和可变性1.执行cargo run2.变量3.变量的可变性4.常量5.遮蔽5.1遮蔽与mut区别1.遮蔽2.mut 2.数据类型1.标量类型1.1整数类型1.2浮点数类型1.3数字运算1.4布尔类型1.5字符类型 2.复合类型2.1元组类型2.2数组类型1.访问数组2.无效的数组元素访问 3.函数3.1…

如何解决 503 Service Temporarily Unavailable?

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

想要精通算法和SQL的成长之路 - 填充书架

想要精通算法和SQL的成长之路 - 填充书架 前言一. 填充书架1.1 优化 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 填充书架 原题链接 题目中有一个值得注意的点就是&#xff1a; 需要按照书本顺序摆放。每一层当中&#xff0c;只要厚度不够了&#xff0c;当前层最高…

【考研数学】高等数学第六模块 —— 空间解析几何(1,向量基本概念与运算)

文章目录 引言一、空间解析几何的理论1.1 基本概念1.2 向量的运算 写在最后 引言 我自认空间想象能力较差&#xff0c;所以当初学这个很吃力。希望现在再接触&#xff0c;能好点。 一、空间解析几何的理论 1.1 基本概念 1.向量 —— 既有大小&#xff0c;又有方向的量称为向…

C语言指针,深度长文全面讲解

指针对于C来说太重要。然而&#xff0c;想要全面理解指针&#xff0c;除了要对C语言有熟练的掌握外&#xff0c;还要有计算机硬件以及操作系统等方方面面的基本知识。所以本文尽可能的通过一篇文章完全讲解指针。 为什么需要指针&#xff1f; 指针解决了一些编程中基本的问题。…

spring aop源码解析

spring知识回顾 spring的两个重要功能&#xff1a;IOC、AOP&#xff0c;在ioc容器的初始化过程中&#xff0c;会触发2种处理器的调用&#xff0c; 前置处理器(BeanFactoryPostProcessor)后置处理器(BeanPostProcessor)。 前置处理器的调用时机是在容器基本创建完成时&#xff…

Axure原型设计累加器计时器设计效果(职业院校技能大赛物联网技术应用项目原型设计题目)

目录 前言 一、本题实现效果 二、操作步骤 1.新建文件 2.界面设计 2.1文本框 2.2 按钮 2.3设计界面完成 3.交互 3.1启动交互设置 3.2 分别设置三个属性 3.2.1 设置值为“0” 3.2.2 文字于文本框 3.2.3 获取焦点时 3.3 停止按钮的交互动作 3.3.1 设置变量值 3.4 重…

私有化部署企业即时通讯(企业im)除了钉钉还有这些

在现代企业中&#xff0c;私有化部署企业即时通讯平台已经成为确保数据安全和实现高效通信的重要手段。除了众所周知的钉钉&#xff0c;WorkPlus作为领先品牌&#xff0c;提供私有化部署企业即时通讯的领先选择。本文将介绍WorkPlus为企业提供的广阔领域和精彩特点&#xff0c;…

详解FreeRTOS:FreeRTOS任务删除过程源码分析(进阶篇—2)

本篇博文讲解FreeRTOS中任务删除过程的源代码,帮助各位更好理解删除任务的原理和流程。 在详解FreeRTOS:FreeRTOS任务管理函数(基础篇—11)中,讲述了可以使用vTaskDelete()函数实现删除任务。 函数源码如下: 程序说明如下: (1)、调用函数 prvGetTCBFromHandle()获取要删…

MQTT Paho Android 支持SSL/TLS(亲测有效)

MQTT Paho Android 支持SSL/TLS(亲测有效) 登录时支持ssl的交互 这是调测登录界面设计 代码中对ssl/tls的支持 使用MqttAndroidClient配置mqtt客户端请求时&#xff0c;不加密及加密方式连接存在以下几点差异&#xff1a; url及端口差异 val uri: String if (tlsConnect…

链表oj题1(Leetcode)——移除链表元素,反转链表,链表的中间节点,

链表OJ 一&#xff0c;移除链表元素1.1分析1.2代码 二&#xff0c;找到链表的中间节点2.1分析2.2代码 三&#xff0c;反转链表3.1分析3.2代码 四&#xff0c;找到链表中倒数第k个节点4.1分析4.2代码 一&#xff0c;移除链表元素 移除链表元素 1.1分析 这里的删除要分成两种…

9月19日作业

完成文本编辑器的保存工作-代码&#xff1a; void Widget::on_pushButton_4_clicked() {//创建保存文件对话框QString filename QFileDialog::getSaveFileName(this,"保存文件","./","All(*.*);;Text files (*.txt)");//创建一个文件对象&…

【VisualStudio】NuGet包管理器下载缓存packages文件夹过大怎么清理

使用Visual Studio 开发工具时间长了&#xff0c;会发现整个项目的总大小越来越大&#xff0c;默认是存放在电脑系统盘里的&#xff0c;随着Windows11系统常常更新重启&#xff0c;导致系统盘闲置空间越来越小&#xff0c;该怎么办呢。 描述问题 整个解决方案项目会越变越大&…

problen(5)ubuntu版本问题

浅浅记录一下这段时间的血和泪吧&#xff0c;大概耗时快一个月了吧&#xff0c;终于解决了...... 因为需要开启pwn之旅&#xff0c;需要在Ubuntu上安装一些东西&#xff0c;就是下面的一条命令&#xff1a; sudo pip3 install pwntools -i Simple Index&#xff08;显示不太好了…