总结TypeScript 的一些知识点:TypeScript 基础语法

有时候,不是因为你没有能力,也不是因为你缺少勇气,只是因为你付出的努力还太少,所以,成功便不会走向你。而你所需要做的,就是坚定你的梦想,你的目标,你的未来,然后以不达目的誓不罢休的那股劲,去付出你的努力,成功就会慢慢向你靠近。

导读:本篇文章讲解 总结TypeScript 的一些知识点:TypeScript 基础语法,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

TypeScript 基础语法

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

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

第一个 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 Runoob.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 在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。

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
new try yield const
continue do

空白和换行

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

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

TypeScript 区分大小写

TypeScript 区分大写和小写字符。

分号是可选的

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

以下代码都是合法的:

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

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

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

TypeScript 注释

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

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

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

编译器会忽略注释。

TypeScript 支持两种类型的注释

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

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

注释实例:

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

TypeScript 与面向对象

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

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

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

  • 对象 :对象是类的一个实例(对象不是找个女朋友),有状态和行为。例如,一条狗是一个对象,它的状态有:颜色、名字、品种;行为有:摇尾巴、叫、吃等。
  • :类是一个模板,它描述一类对象的行为和状态。
  • 方法:方法是类的操作的实现步骤。

下图中 girl、boy 为类,而具体的每个人为该类的对象:

TypeScript 面向对象编程实例:

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

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

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

编译后生成的 javascript 代码如下:

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/144739.html

(0)

相关推荐

  • ​Express+FetchAPI 简单实践Cookie

    Express+FetchAPI 简单实践Cookie 本文并不是讲解Cookie在实际项目中的应用,而只是简单地实践一下,自动保存Cookie,然后后续请求自动携带Cookie,…

    2022年10月25日
    00
  • 前端从零开始(105)JavaScript RegExp

    javaScript RegExp RegExp 构造函数创建了一个正则表达式对象,用于将文本与一个模式匹配。 RegExp 的实例用于生成一个正则表达式,利用正则表达式从字符串中…

    2022年6月1日
    00
  • React 父子组件数据关系与状态提升(5)

    父子组件数据关系与状态提升 状态提升:两个组件(无父子关系)共享一个数据并同步数据变化,即将子组件中的数据提升到父组件中进行操作和管理,通过 props 传递给子组件 类组件调用(…

    2022年11月21日
    00
  • 那些年曾经没回答上来的vue面试题

    导读:本篇文章讲解 那些年曾经没回答上来的vue面试题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    2022年11月9日
    00
  • 社招前端必会面试题

    导读:本篇文章讲解 社招前端必会面试题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    Vue 2022年11月9日
    00
  • el-input @focus设置光标位置

    生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

    导读:本篇文章讲解 el-input @focus设置光标位置,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月23日
    00
  • Vue3中 响应式 API ( readonly、shallowReadonly、toRaw、markRaw ) 详解

    勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

    导读:本篇文章讲解 Vue3中 响应式 API ( readonly、shallowReadonly、toRaw、markRaw ) 详解,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月28日
    00
  • 怎么更换vscode背景图,放入自己喜欢的图片

    导读:本篇文章讲解 怎么更换vscode背景图,放入自己喜欢的图片,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    2023年1月19日
    00
  • vue组件间相互传值

    导读:本篇文章讲解 vue组件间相互传值,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2022年12月30日
    00
  • Vue3中 v-model 语法糖详解

    勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

    导读:本篇文章讲解 Vue3中 v-model 语法糖详解,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月28日
    00

发表回复

登录后才能评论