博主信息
博文 91
粉丝 0
评论 0
访问量 99319
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
系统学习 TypeScript(二)——开发流程和语法规则
编程三昧
原创
836人浏览过

TypeScript

前言

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

TypeScript 的使用流程

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

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

image-20220222181806584

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

  1. tsc index.ts

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

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

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

产生如下报错:

image-20220222184145977

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

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

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

TypeScript 基本语法规则

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

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

TypeScript 保留关键字

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

image-20220222184939869

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

空白和换行

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

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

  1. function add(x: number, y: number): number {
  2. return x + y;
  3. }

TypeScript 区分大小写

TypeScript 区分大写和小写字符。

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

分号是可选的

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

TypeScript 注释

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

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

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

  • 单行注释 ( // ) − 在 // 后面的文字都是注释内容。
  • 多行注释 (/* */) − 这种注释可以跨越多行。
  1. /*
  2. * @Author : 编程三昧
  3. * @FilePath : /typescript_learning/1.基本使用/index.ts
  4. */
  5. // 名称的拼音
  6. let name: string = "bianchengsanmei";
  7. // 名称的汉字
  8. let Name: string = "编程三昧";

总结

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

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

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学