前端的未来——TypeScript TS基础语法

文章简介
主要内容
- 1 第一个 TypeScript 程序
- 2 TypeScript 保留关键字
- - 2.1 TypeScript保留关键字
  - 2.2 空白和换行
  - 2.3 区分大小写
  - 2.4 分号是可选的
  - TypeScript 注释
- 3 TypeScript 与面向对象
summary
下期预告
- 【TS语法|基础入门】《前端的未来——TypeScript》掌握TS变量声明
- 【TS语法|基础入门】《前端的未来——TypeScript》了解TS基础数据类型

文章简介

本文是我在学习TS课程中的一些学习笔记和听课记录，从这一期开始将正式进入TS的语法内容，本节内容紧接上一期【起步了解】《前端的未来——TypeScript》了解TS的工作流程的内容，重点介绍TS的基础语法。创作不易！多多关照！

主要内容

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

模块

函数

变量

语句和表达式

注释

1 第一个 TypeScript 程序

我们可以使用以下 TypeScript 程序来输出 “Hello World” ：

Runoob.ts 文件代码：

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

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

tsc Runoob.ts

得到如下 js 代码：

Runoob.js 文件代码：

var hello = "Hello World!";
console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

$ node gungun.js  // node gungun.js 也可
Hello World

整个流程如下图所示：

我们可以同时编译多个 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 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译

2 TypeScript 保留关键字

2.1 TypeScript保留关键字

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


break	as	catch	switch
case	if	throw	else
var	number	string	get
module	type	instanceof	typeof
public	private	enum	export
finally	for	while	void
null	super	this	new
in	return	true	false
any	extends	static	let
package	implements	interface	function
do	try	yield	const
continue

2.2 空白和换行

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

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

2.3 区分大小写

TypeScript 区分大写和小写字符。

2.4 分号是可选的

每行指令都是一段语句，你可以使用分号或不使用，分号在 TypeScript 中是可选的，建议使用。

以下代码都是合法的：

console.log("gungun")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔，否则会报错，如：

console.log("gungun");console.log("Google");

TypeScript 注释

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

注释可以提高程序的可读性。
注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。
编译器会忽略注释。

TypeScript 支持两种类型的注释

单行注释 ( // )
在 // 后面的文字都是注释内容。
多行注释 (/* */)
这种注释可以跨越多行。

注释实例：

// 这是一个单行注释/* 这是一个多行注释 这是一个多行注释 这是一个多行注释
*/

3 TypeScript 与面向对象

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

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

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

对象：对象是类的一个实例，有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。
类：类是一个模板，它描述一类对象的行为和状态。
方法：方法是类的操作的实现步骤。
下图中 girl、boy 为类，而具体的每个人为该类的对象：

TypeScript 面向对象编程实例：

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

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

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

编译后生成的 JavaScript 代码如下：

var Site = /** @class */ (function () {function Site() {}Site.prototype.name = function () {console.log("gungun");};return Site;
}());
var obj = new Site();
obj.name();

执行以上 JavaScript 代码，输出结果如下:

gungun

summary

以上就是本期文章的所有内容，看完之后收获满满。文章主要内容为TS基础语法，是非常非常重要的语法入门必备知识。
文章内容由本人结合学习笔记和学习课程，并结合个人见解综合整理得出，难免会有错误和不足，希望大家发现后及时向我指出，我会第一时间做出修改和更新。学习的路还很长，感谢陪伴！！

下期预告

【TS语法|基础入门】《前端的未来——TypeScript》掌握TS变量声明

【TS语法|基础入门】《前端的未来——TypeScript》了解TS基础数据类型

【TS语法|基础入门】《前端的未来——TypeScript》掌握TS基础语法相关推荐

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4% ...
【零基础入门前端系列】—背景属性（十二）
[零基础入门前端系列]-背景属性(十二) 一.背景属性 CSS背景属性主要有以下几个: CSS3中可以通过background-image属性添加背景图片. 不同的背景图像和图像用逗号隔开,所有的图片 ...
Android Studio新手–下载安装配置–零基础入门–基本使用–调试技能–构建项目基础–使用AS应对常规应用开发
转自:http://blog.csdn.net/yanbober/article/details/45306483 目标:Android Studio新手–>下载安装配置–>零基础入门–& ...
java基础入门课后习题答案_《Java基础入门》课后习题及答案
<Java基础入门>课后习题及答案Java基础入门,课后习题,答案博学谷--让IT教学更简单,让IT学习更有效第6章JavaAPI 一.填空题 1.在Java中定义了两个类来封装对字符 ...
我是如何零基础入门前端开发的（2021 版）
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
如何零基础入门前端开发？
一.何为前端开发? 百度上给出解释是:前端开发是创建web页面或是App等前端界面呈现给用户的过程,通过HTML.CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的 ...
0基础入门前端，会遇到哪些困难？
前端是什么? 工作流程为从UI处得到原型图或者效果图,在项目(网站.微信公众号.小程序.WEBAPP)中还原图片效果,然后与后台进行各种数据交互. 目前的前端市场整体还是处于迅速发展期,市场对于前端的 ...
零基础入门学python 第二版-《零基础入门学习Python》第二版和第一版的区别在哪里呢？...
第一版时光荏苒,一晃间,距离<零基础入门学习 Python>出版(2016年11月)已经过去两年多了,在这段时间里, Python 逐步走入了大家的视野,这门语言因其简洁的语法风格,在云 ...
罗马音平假名中文可复制_日语零基础入门五十音，日语零基础五十音图表
日语零基础入门五十音,日语入门的最基本要求就是记住五十音图,但是这个记住不仅是你能背下来或是默写下来.而是你需对号入座! 下面是一张五十音图表. 即每个假名单独拿出来你要立马反应出来怎么读.其重要性甚 ...

【TS语法|基础入门】《前端的未来——TypeScript》掌握TS基础语法