【零基础入门TypeScript】TypeScript - 基本语法

news2024/10/6 14:25:17

目录

你的第一个 TypeScript 代码

编译并执行 TypeScript 程序

编译器标志

TypeScript 中的标识符

TypeScript ─ 关键字

空格和换行符

TypeScript 区分大小写

分号是可选的

TypeScript 中的注释

TypeScript 和面向对象



语法定义了一组编写程序的规则。每种语言规范都定义了自己的语法。TypeScript 程序由以下部分组成:

  • Modules
  • Functions
  • Variables
  • Statements and Expressions
  • Comments

你的第一个 TypeScript 代码

让我们从传统的“Hello World”示例开始 -

var message:string = "Hello World"
console.log(message)

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);
  • 第 1 行通过名称 message 声明一个变量。变量是程序中存储值的一种机制。

  • 第 2 行将变量的值打印到提示符处。这里,控制台指的是终端窗口。函数log()用于在屏幕上显示文本。

编译并执行 TypeScript 程序

让我们看看如何使用 Visual Studio Code 编译和执行 TypeScript 程序。请按照以下步骤操作 -

步骤 1 - 使用 .ts 扩展名保存文件。我们将文件保存为 Test.ts。保存代码时,代码编辑器会标记代码中的错误(如果有)。

步骤 2 - 右键单击​​ VS Code 的浏览窗格中“工作文件”选项下的 TypeScript 文件。选择“在命令提示符中打开”选项。

步骤 3 - 要编译文件,请在终端窗口上使用以下命令。

tsc Test.ts

步骤 4 - 该文件被编译为 Test.js。要运行编写的程序,请在终端中键入以下内容。

node Test.js

编译器标志

编译器标志使您能够在编译期间更改编译器的行为。每个编译器标志都会公开一个设置,允许您更改编译器的行为方式。

下表列出了与 TSC 编译器相关的一些常见标志。典型的命令行用法使用部分或全部开关。

S.No.Compiler flag & Description
1.

--help

Displays the help manual

2.

--module

Load external modules

3.

--target

Set the target ECMA version

4.

--declaration

Generates an additional .d.ts file

5.

--removeComments

Removes all comments from the output file

6.

--out

Compile multiple files into a single output file

7.

--sourcemap

Generate a sourcemap (.map) files

8.

--module noImplicitAny

Disallows the compiler from inferring the any type

9.

--watch

Watch for file changes and recompile them on the fly

注意- 可以一次编译多个文件。

tsc file1.ts, file2.ts, file3.ts

TypeScript 中的标识符

标识符是赋予程序中的元素(如变量、函数等)的名称。标识符的规则是 -

  • 标识符可以包括字符和数字。但是,标识符不能以数字开头。

  • 标识符不能包含除下划线 (_) 或美元符号 ($) 之外的特殊符号。

  • 标识符不能是关键字。

  • 它们必须是独一无二的。

  • 标识符区分大小写。

  • 标识符不能包含空格。

下表列出了有效和无效标识符的一些示例 -

Valid identifiersInvalid identifiers
firstNameVar
first_namefirst name
num1first-name
$result1number

TypeScript ─ 关键字

关键字在语言上下文中具有特殊含义。下表列出了 TypeScript 中的一些关键字。

breakasanyswitch
caseifthrowelse
varnumberstringget
moduletypeinstanceoftypeof
publicprivateenumexport
finallyforwhilevoid
nullsuperthisnew
inreturntruefalse
anyextendsstaticlet
packageimplementsinterfacefunction
newtryyieldconst
continuedocatch

空格和换行符

TypeScript 会忽略程序中出现的空格、制表符和换行符。您可以在程序中自由使用空格、制表符和换行符,并且可以以整洁一致的方式自由地格式化和缩进程序,使代码易于阅读和理解。

TypeScript 区分大小写

TypeScript 区分大小写。这意味着 TypeScript 区分大写和小写字符。

分号是可选的

每行指令称为一条语句。在 TypeScript 中分号是可选的。

例子

console.log("hello world")
console.log("We are learning TypeScript")

一行可以包含多个语句。但是,这些语句必须用分号分隔。

TypeScript 中的注释

注释是提高程序可读性的一种方法。注释可用于包含有关程序的附加信息,例如代码作者、有关函数/构造的提示等。编译器会忽略注释。

TypeScript 支持以下类型的注释 -

  • 单行注释 ( // ) - // 和行尾之间的任何文本都被视为注释

  • 多行注释 (/* */) - 这些注释可能跨越多行。

例子

//this is single line comment 
 
/* This is a  
   Multi-line comment 
*/

TypeScript 和面向对象

TypeScript 是面向对象的 JavaScript。面向对象是一种遵循现实世界建模的软件开发范例。面向对象将程序视为对象的集合,这些对象通过称为方法的机制相互通信。TypeScript 也支持这些面向对象的组件。

  • 对象- 对象是任何实体的实时表示。根据 Grady Brooch 的说法,每个物体都必须具有三个特征 -

    • 状态- 由对象的属性描述

    • 行为- 描述对象将如何行动

    • 身份- 将一个对象与一组类似的对象区分开来的唯一值。

  • - OOP 中的类是创建对象的蓝图。类封装了对象的数据。

  • 方法- 方法促进对象之间的通信。

示例:TypeScript 和面向对象

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

上面的示例定义了一个类Greeting。该类有一个方法greet()。该方法在终端上打印字符串“Hello World”。new关键字创建该类的对象 (obj)。该对象调用greet()方法。

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

上述程序的输出如下:

Hello World!!!

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

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

相关文章

浏览器使用隧道代理HTTP:洞悉无界信息

在信息爆炸的时代,互联网已经成为获取信息的首选渠道。然而,在某些地区或情况下,访问某些网站可能会受到限制。这时,隧道代理HTTP便成为了一个重要的工具,帮助用户突破限制,洞悉无界信息。 一、隧道代理HT…

Nextjs打包类型检查报错ype error: Property ‘card_list‘ does not exist on type(已解决)

在Nextjs 中 在数组 map 的时候报错如下: 里面的数据类型是 data1 {cart_list:[]} 那么在 声明类型的时候 使用 data1:{card_list:any[]} export default function Card({authStates,data1,data2}:{authStates:boolean;data1:{card_list:any[]};data2:any[]}) {}) 这样就…

学到了!3步get微信自动回复

你是不是也有过这样的烦恼:因为忙碌或是消息太多,没能及时回复好友消息,尤其是在休息、节假日的时候。 今天就给大家种草一款能够让微信自动回复消息的神器——微信管理系统,让你再忙碌也能及时回复好友!而且操作也不…

YOLOv8改进 | 检测头篇 | DynamicHead原论文一比一复现 (不同于网上版本,全网首发)

一、本文介绍 本文给大家带来的改进机制是DynamicHead(Dyhead),这个检测头由微软提出的一种名为“动态头”的新型检测头,用于统一尺度感知、空间感知和任务感知。网络上关于该检测头我查了一些有一些魔改的版本,但是我觉得其已经改变了该检测头的本质,因为往往一些细节上才…

互联网加竞赛 基于LSTM的天气预测 - 时间序列预测

0 前言 🔥 优质竞赛项目系列,今天要分享的是 机器学习大数据分析项目 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng-senior/po…

【性能测试】性能压测TPS上不去原因分析,13年老鸟总结...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、性能测试TPS上…

数据结构学习 jz42连续子数组最大和

关键词:动态规划 滚动数组 最长上升子序列 这道题比较简单,类似最长上升子序列,比最长上升子序列简单。 和最长上升子序列的区别:这道题因为是连续的,所以只用记录max就好了。最长上升子序列是不连续的,所…

【计算机毕业设计】SSM实现的在线农产品商城

项目介绍 本项目分为前后台,且有普通用户与管理员两种角色。 用户角色包含以下功能: 用户登录,查看首页,按分类查看商品,查看新闻资讯,查看关于我们,查看商品详情,加入购物车,查看我的订单,提交订单,添加收获地址,支付订单等功能。 管理员角色包含以…

TypeScript 之 interface 和 type 的区别

结论: 1、可以声明的数据类型 type 可以修饰任何类型 (值类型和引用数据类型) interface 只能修饰引用类型 (对象、数组、函数) //interface 声明对象属性 interface ins {a: string;b?: number; //可选项 }// int…

python主流开发工具排名,python最好用的开发工具

大家好,小编来为大家解答以下问题,python的开发工具软件有哪些,python主流开发工具排名,今天让我们一起来看看吧! 对于程序员来说,除了日常争论世界上最好的语言是哪一门以外,哪款 IDE 是最好的…

羊大师讲解长期喝羊奶的女性,身体变化与福利

羊大师讲解长期喝羊奶的女性,身体变化与福利 羊奶作为天然健康食品一直备受关注,尤其对女性来说更是具有独特的身体效益。长期喝羊奶不仅可以改善女性的健康状况,还能带来一系列积极的身体变化。本文小编羊大师将为大家详细介绍长期饮用羊奶…

程序员必知!装饰模式的实战应用与案例分析

装饰模式是一种结构型设计模式,允许在不改变对象基础上动态添加职责或行为。举个咖啡店中咖啡定制的实际例子,顾客可选不同配料装饰咖啡,每个配料视作装饰器,装饰模式优点有动态扩展、灵活性和避免类爆炸,但可能增加系…

Nacos 持久化及集群的搭建【微服务】

文章目录 一、统一配置管理二、微服务配置拉取三、配置热更新四、多环境共享配置五、Nacos 集群搭建1. 集群结构2. 初始化数据库3. 搭建集群 六、Nginx 反向代理七、启动项目测试 一、统一配置管理 案例练习的时候我们只有两个微服务,管理起来非常简单,但…

虎克:开发小程序要多少钱一个,非专业开发如何做自己的小程序

小程序开发费用主要取决于小程序的功能复杂度和开发周期。一般来说,小程序开发费用可以分为两类:模板开发和定制开发。 模板开发:模板开发是指使用现成的模板进行开发,价格相对较低,一般在几千元左右。优点是价格便宜&…

SpringSecurity-2.7中跨域问题

SpringSecurity-2.7中跨域问题 访问测试 起因 写这篇的起因是会了解到 SSM(CrosOrigin)解决跨域,但是会在加入SpringSecurity配置后,这个跨域解决方案就失效了,而/login这个请求上是无法添加这个注解或者通过配置(WebMvcConfig)去解决跨域,所以只能使用SpringSecurity提供的.c…

【接口自动化】写接口自动化case要注意的点!

可能有人会说,写接口的自动化CASE多简单了,写个参数发送请求完事了,还要注意啥? 没错,相比起UI自动化的case,你要去写各种定位器,接口自动化的case写起来确实容易多了。这也是接口自动化的一个…

APM32 移植 RTX5

打开APM32的 一个官方例子或者模板工程, MKD格式 更改工程属性,将编译器换为V6: 然后勾选 Use MicroLIB; 接着: 接着: 接着确认 然后编译,会报260个错误: 然后 打开工程树中 下面的文件: 如果用的是M4内核,添加下面的定义:

2SK3019 中低压MOSFET 60V 100mA 双N通道 SOT-723封装

2SK3019小电流双N通道MOSFET,电压60V电流100mA,采用SOT-723封装形式。适用于低RDS (on)的高密度电池设计,压控小信号开关,坚固可靠,ESD保护。可应用便携式设备的负载开关,电池开关上。

探索 CodeWave低代码技术的魅力与应用

目录 前言1 低代码平台2 CodeWave简介3 CodeWave 的独特之处3.1 高保真还原交互视觉需求3.2 擅长复杂应用开发3.3 支持应用导出&独立部署3.4 金融级安全要求3.5 可集成性高3.6 可拓展性强 4 平台架构和核心功能4.1 数据模型设计4.2 页面设计4.3 逻辑设计4.4 流程设计4.5 接…

【STM32F103】TIM定时器PWM

定时器分类 STM32F1中除了互联型产品(STM32F103C8T6为64KB Flash 中容量产品),其余有8个定时器。 可以8个定时器分为高级,通用,基本三种。 高级定时器有两个,分别是TIM1和TIM8。 通用定时器有四个&…