系统学习 TypeScript(二)——开发流程和语法规则

简介: 我们已经知道了 TypeScript 是什么,以及为什么要用 TypeScript,今天,我们就来学习怎么初步使用它。

7.png


前言


我们已经知道了 TypeScript 是什么,以及为什么要用 TypeScript,今天,我们就来学习怎么初步使用它。


TypeScript 的使用流程


原始的 TypeScript 文件以 .ts 结尾,它不能被直接使用到页面中,需要经过编译,转换成 JavaScript (.js)文件才行。


TypeScript 的使用流程基本上如下图所示:


10.png


编译 TypeScript 文件的这一步,我们使用的是前面安装的全局 TypeScript 模块,编译指令为:


tsc index.ts


通过这一步的编译之后,会在 index.ts  同级目录下生成一份 index.js 文件,我们最终在页面中使用的就是编译产生的 JavaScript 文件。


我们在前面说过,TypeScript 是静态的,会在编译过程中进行数据类型、语法等的检测,如果发现错误会立即报错,比如我们编译下面的 TypeScript 代码:


// index.ts
let a: number = 12;
a = "编程三昧";


产生如下报错:


9.png


虽然编译阶段发生了报错,但最终还是会生成一份 JavaScript 文件:


// index.js
var a = 12;
a = "编程三昧";


编译报错后是否生成 JavaScript 文件跟 TypeScript 编译器的配置项有关,我们会在后面介绍编译配置的详细信息。


TypeScript 基本语法规则


学习一门语言,首先应该学习的应该是它的语法规则,只有掌握了规则,才能保证少犯错误。


TypeScript 的基本语法规则和 JavaScript 相同。


TypeScript 保留关键字


和 JavaScript 一样,TypeScript 也有保留关键字,主要有:


8.png


我们在使用 TypeScript 进行编码时,需要注意这些保留关键字的使用。


空白和换行


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


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


function add(x: number, y: number): number {
    return x + y;
}


TypeScript 区分大小写


TypeScript 区分大写和小写字符。


let name: string = "bianchengsanmei";
let Name: string = "编程三昧";
// name 和 Name 是不同的变量


分号是可选的


每行指令都是一段语句,你可以使用分号或不使用, 分号在 TypeScript 中是可选的,但是我们建议使用每一段语句都使用分号结束。


TypeScript 注释


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


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


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


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


/*
 * @Author       : 编程三昧
 * @FilePath     : /typescript_learning/1.基本使用/index.ts
 */
// 名称的拼音
let name: string = "bianchengsanmei";
// 名称的汉字
let Name: string = "编程三昧";


总结


关于 TypeScript 的使用流程和基本语法规则就说到这里,其实和 JavaScript 大差不差。


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
1月前
|
JavaScript 前端开发 安全
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
95 0
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
25天前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
25 0
|
2月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
51 4
|
1月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
54 0
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
29 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
59 0
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
41 1
typeScript进阶(9)_type类型别名
下一篇
无影云桌面