TypeScript

最新推荐文章于 2024-04-15 09:05:59 发布
最新推荐文章于 2024-04-15 09:05:59 发布
阅读量212 收藏
点赞数
文章标签： typescript javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63310011/article/details/131304295
版权

一、TypeScript 基础语法

1、一个 TypeScript 程序

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

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

tsc Runoob.ts

得到如下 js 代码：

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

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

$ node Runoob.js
Hello World

2、tsc 常用编译参数

tsc 常用编译参数编译参数说明
–help显示帮助信息
–module载入扩展模块
–target设置 ECMA 版本
–declaration额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
–removeComments删除文件的注释
–out编译多个文件并合并到一个输出的文件
–sourcemap生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
–module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
–watch在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。

二、TypeScript 基础类型

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值。
数字类型number双精度 64 位浮点值。它可以用来表示整数和分数。
字符串类型string一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
布尔类型boolean表示逻辑值：true 和 false。
数组类型无声明变量为数组。
元组无元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
枚举enum枚举类型用于定义数值集合。
voidvoid用于标识方法返回值的类型，表示该方法没有返回值。
nullnull表示对象值缺失。
undefinedundefined用于初始化变量为一个未定义的值
nevernevernever 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值

三、TypeScript 变量声明

1、TypeScript 变量的命名规则

  • 变量名称可以包含数字和字母。

  • 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

  • 变量名不能以数字开头。

实例

var uname:string = "Runoob";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("名字: "+uname)
console.log("第一个科目成绩: "+score1)
console.log("第二个科目成绩: "+score2)
console.log("总成绩: "+sum)

2、类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式

<类型>值

或

值 as 类型

实例

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

3、类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

四、TypeScript 运算符

1、算术运算符

运算符描述
+加法
-减法
*乘法
/除法
%取模（余数）
++自增
–自减

2、关系运算符

==、！=、>、<、>=、<=

3、逻辑运算符

&&、||、|

4、短路运算符

&& 与 ||

5、位运算符

&、|、~、^、<<、>>、>>>

五、TypeScript Number

Number 对象是原始数值的包装对象

1、语法

var num = new Number(value);

2、Number 对象属性

属性描述
MAX_VALUE可表示的最大的数，MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 “Infinity”。
MIN_VALUE可表示的最小的数，即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE，MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE (“underflow values”) 的值将会转换为 0。
NaN非数字值（Not-A-Number）
NEGATIVE_INFINITY负无穷大，溢出时返回该值。该值小于 MIN_VALUE
prototypeNumber 对象的静态属性。使您有能力向对象添加属性和方法。
POSITIVE_INFINITY正无穷大，溢出时返回该值。该值大于 MAX_VALUE。负无穷大，溢出时返回该值。该值小于 MIN_VALUE。
constructor返回对创建此对象的 Number 函数的引用。

3、Number 对象方法

方法描述
toExponential()把对象的值转换为指数计数法
toFixed()把数字转换为字符串，并对小数点指定位数
toLocaleString()把数字转换为字符串，使用本地数字格式顺序
toPrecision()把数字格式化为指定的长度。
toString()把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。
valueOf()返回一个 Number 对象的原始数字值。

六、TypeScript Array(数组)

数组对象是使用单独的变量名来存储一系列的值

1、语法格式

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或

var array_name[:datatype] = [val1,val2…valn]

2、Array 对象

(1)、Array 对象的构造函数接受以下两种值

  • 表示数组大小的数值。
  • 初始化的数组列表，元素使用逗号分隔值。

3、数组解构

可以把数组元素赋值给变量
TypeScript

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

编译以上代码，得到以下 JavaScript 代码
JavaScript

var arr = [12, 13];
var x = arr[0], y = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x);
console.log(y);

结果

12
13

4、数组迭代

TypeScript

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

JavaScript

var j;
var nums = [1001, 1002, 1003, 1004];
for (j in nums) {
    console.log(nums[j]);
}

输出结果为

1001
1002
1003
1004

5、多维数组

一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。
TypeScript

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

JavaScript

var multi = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

输出结果为：

1
2
3
23
24
25

6、数组在函数中的使用

（1）、作为参数传递给函数

TypeScript`

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

JavaScript

function disp() {
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
        console.log(sites[i]);
}

输出结果为：

Google
Runoob
Taobao
Facebook

（2）、作为函数的返回值

TypeScript

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

JavaScript

function disp() {
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
        console.log(sites[i]);
}

输出结果为：

Google
Runoob
Taobao
Facebook

7、数组方法

方法描述
concat()连接两个或更多的数组，并返回结果。
every()检测数值元素的每个元素是否都符合条件。
filter()检测数值元素，并返回符合条件所有元素的数组。
forEach()数组每个元素都执行一次回调函数
indexOf()搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项
join()把数组的所有元素放入一个字符串。
lastIndexOf()返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置后向前搜索
map()通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()删除数组的最后一个元素并返回删除的元素。
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()将数组元素计算为一个值（从左到右）。
reduceRight()将数组元素计算为一个值（从右到左）。
reverse()反转数组的元素顺序。
shift()删除并返回数组的第一个元素
slice()选取数组的的一部分，并返回一个新数组。
some()检测数组元素中是否有元素符合指定条件
sort()对数组的元素进行排序。
splice()从数组中添加或删除元素。
toString()把数组转换为字符串，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。

七、TypeScript 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

1、 接口定义

interface interface_name { 
}

2、联合类型和接口

TypeScript

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

JavaScript

// commandline 是字符串
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);
// commandline 是字符串数组
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

输出结果为：

Hello
Hello
World
**Hello World**

3、接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

（1）、单接口继承语法格式

Child_interface_name extends super_interface_name

（2）、多接口继承语法格式

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

继承的各个接口使用逗号 , 分隔。

八、TypeScript 类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式

class class_name { 
    // 类作用域
}

1、类可以包含的模块（类的数据成员）：

  • 字段 ： 字段是类里面声明的变量。字段表示对象的有关数据。

  • 构造函数 ： 类实例化时调用，可以为类的对象分配内存。

  • 方法 ： 方法为对象要执行的操作。

2、创建类的数据成员

TypeScript

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}

JavaScript

var Car = /** @class */ (function () {
    // 构造函数 
    function Car(engine) {
        this.engine = engine;
    }
    // 方法 
    Car.prototype.disp = function () {
        console.log("发动机为 :   " + this.engine);
    };
    return Car;
}());

3、创建实例化对象

使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])

类实例化时会调用构造函数

var obj = new Car("Engine 1")

类中的字段属性和方法可以使用 . 号来访问

// 访问属性
obj.field_name 

// 访问方法
obj.function_name()

4、类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

（1）、语法格式

class child_class_name extends parent_class_name

5、继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法
TypeScript

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

JavaScript

var obj = new StringPrinter() 
obj.doPrint()
 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var PrinterClass = /** @class */ (function () {
    function PrinterClass() {
    }
    PrinterClass.prototype.doPrint = function () {
        console.log("父类的 doPrint() 方法。");
    };
    return PrinterClass;
}());
var StringPrinter = /** @class */ (function (_super) {
    __extends(StringPrinter, _super);
    function StringPrinter() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    StringPrinter.prototype.doPrint = function () {
        _super.prototype.doPrint.call(this); // 调用父类的函数
        console.log("子类的 doPrint()方法。");
    };
    return StringPrinter;
}(PrinterClass));
var obj = new StringPrinter();
obj.doPrint();

输出结果为

父类的 doPrint() 方法。
子类的 doPrint()方法。
葳蕤之森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【TypeScript系列教程04】编译参数
孙叫兽的博客
03-06 1375
目录 编辑单个 .ts 文件 编辑多个 .ts 文件 tsc 常用编译参数 编辑单个 .ts 文件 通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。 然后执行以下命令将 TypeScript 转换为 JavaScript 代码： tsc sunjiaoshou.js 编辑多个 .ts 文件 我们可以同时编译多个 ts 文件： tsc file1.ts, file2.ts, file3.ts tsc 常用编译参数 tsc 常用编译参数如下表所示：
TypeScript 基础学习
火星基地
03-23 215
一、基本类型 1. 类型声明 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量（参数、形参）的类型 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值 语法： let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... } 2. 自动类型判断 TS拥有自动的类型判断机制 当对变量的声明和赋值是同时进行
TypeScript（十五）配置相关（命令行配置）
最新发布
04-15 949
由于typescript配置涉及面相对复杂，所以放在较后的文章中，并不是它不重要，实际上配置项才是最重要的知识点，因为在开发中会遇到与逻辑无关的配置问题，如果熟悉配置或许用不了多久就可以解决。
TypeScript 入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-27 1728
安装TypeScript：首先，你需要在本地安装TypeScript。你可以通过npm（Node Package Manager）来安装TypeScript。创建TypeScript文件：创建一个新的文件，例如hello.ts，并在文件中编写TypeScript代码。编译TypeScript文件：这将会在同一目录下生成一个hello.js的JavaScript文件。类型注解和类型推断：TypeScript是一种静态类型的编程语言，它引入了类型注解和类型推断的概念。
TypeScript---tsc命令需在cmd命令窗口执行，vscode切换为cmd命令窗口
maidu_xbd的博客
02-13 1269
最近比较颓了，也提不起深挖技术的兴致，又碰上春节假期不能回家，实在是不想动脑o(╥﹏╥)o，那就利用这个假期简单学学typeScript 注意：tsc命令需在cmd命令窗口执行，不能在powershell中执行，若在vscode中终端powershell中执行tsc相关命令，结果如下图 解决方法：切换默认Shell，具体操作见下图 ...
【TypeScript】TypeScript基础语法快速入门
孑然的个人博客
04-14 424
经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置。
typescript
03-31
打字稿 安装TypeScript编译器 npm install -g typescript 查看当前版本 tsc --v 全局安装Typescript npm install -g ts-node
Typescript]基础篇之 tsc 命令解析
前端
08-05 1245
这里是对 tsc 的一个详细介绍。
搭建 TypeScript 环境 & TSC 命令的使用 & 配置 tsconfig 文件
热门推荐
青蛙king的博客
04-17 2万+
目录前言一、TSC 命令的使用二、tsconfig 配置文件的属性1、tsconfig 配置文件的顶层属性（1）、compilerOptions（2）、file（3）、 include 和 exclude（4）、compileOnSave（5）、extends（6）、typeAcquisition（7）、watchOptions（8）、reference2、tsconfig 具体配置与解析汇总3、重点属性的配置详解（1）、strict 模式详解（2）、模块解析baseUrl（3）、路径映射（path）（4）
TypeScript编译配置选项说明
summer爱前端
09-01 399
typescript编译配置文件中的配置选项你知道多少？一起来看看吧
TypeScript函数：定义、调用和参数传递
与墨的编程成长历程
06-17 3982
在 TypeScript 中，函数的定义方式和 JavaScript 相同，TypeScript 函数可以创建有名字的函数和匿名函数。在定义 TypeScript 时需要指定函数的参数类型和返回值类型。在这个函数中，我们指定了两个参数的类型（和），以及函数的返回值类型（: number本文介绍了 TypeScript 函数的定义、调用和参数传递方法。通过学习这些知识，可以更好地理解 TypeScript 中的函数概念，并使用 TypeScript 开发更可靠、可维护的程序。
【TypeScript】tsc命令，基础语法，基础类型学习
一个甜甜的大橙子的博客
07-18 521
将 TypeScript 转换为 JavaScript 代码，得到js文件。
TypeScript中的函数详解
qq_44749491的博客
10-24 3274
TypeScript中的函数使用详解
TypeScript - 函数（下）
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
07-05 5393
另一种说法是，具有void返回类型（类型voidFunc=（）=>void）的上下文函数类型在实现时可以返回任何其他值，但会被忽略。它还具有一个特殊的特性，即函数类型的值总是可以被调用；在TypeScript中，这些参数上的类型注释隐式地是any[]而不是any，并且给定的任何类型注释的形式都必须是Array＜T＞或T[]，或者元组类型。与所有类型一样，您可以在任何地方使用它们，但这些类型在函数的上下文中尤其相关。这在描述函数类型时很有用，因为您可以描述接受任何值而不在函数体中具有任何值的函数。
TypeScript函数类型
the_truth1的博客
12-23 445
在 TypeScript 中，函数类型是一项强大的特性，它不仅可以增强代码的可读性和可维护性，还能提供更严格的类型检查，减少潜在的运行时错误。1.函数定义类型和返回值 、箭头函数定义类型和返回值。函数的类型被明确指定为接收两个参数，类型为。是一个箭头函数，它的类型也被指定为接收两个。3.将对象作为参数传递给函数。类型的参数，返回值为。4.函数this类型。
TypeScript函数的相关知识和进阶使用教程
YunWisdom
07-06 756
首先，我们需要了解函数在TypeScript中的基本概念。函数是一段可重复使用的代码块，它接受一些输入（参数），并返回一个输出（返回值）。这是一个简单的函数示例，名为add，它接受两个参数x和y，这两个参数的类型都是number，并且该函数会返回一个number类型的值。在函数体内，我们执行了一个简单的加法操作，并将结果返回。接下来，让我们了解一些TypeScript函数的进阶用法。在TypeScript中，函数可以有可选参数、默认参数和剩余参数。
初识TypeScript编译器(tsc)
BertKing的专栏
12-05 3234
对于有过Java/C/Rust/Go等编程语言经验的开发者来讲，对于编译器这个概念应该都不陌生。(比如 javac , gcc , rustc …)今天我们主要来看一下 TypeScript 编译器 —— tsc
【Typescript基础】函数详解
贤蛋大眼萌
09-06 799
​ 这里会报错，虽然我们将sayhello函数放入info对象中，但是我们通过对象调用sayhello函数的是，this指向的对象，但是如果直接调用sayhello函数的时候，this指向了函数本身，造成了混乱，所以这里会报错，typescript中不允许我们这样做。如果函数作为参数时候，也可以在参数中编写函数类型。​ 在JavaScript中的this指向对象时十分重要的，但是在typescript中的this指向是很难确定类型的，所以在typescript中的this指向是可以被推导出来的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值