TypeScript 教程：什么是接口、枚举和数组

⚡ 智能摘要

TypeScript 是一个强类型超集 Java编译成纯文本的脚本 Java本文介绍脚本并添加类、接口、枚举、模块和命名空间。内容涵盖安装、变量、类型、数组、类、访问修饰符、接口、函数、枚举、模块和环境声明。

🧬 语言关系： 每个有效 Java脚本程序有效 TypeScript编译器会输出纯文本。 Java适用于任何目标版本的脚本。
🔒 静态类型ping: 变量保持声明时指定的类型，因此类型不匹配会在编译时报告，而不是在运行时报告。
🧱 面向对象： 类、继承以及公共、私有和受保护修饰符为浏览器代码带来了熟悉的结构。
📐 接口： 接口定义了一个连接trac变量、函数或类必须满足的属性和方法集合。
🔢 枚举： 命名常量集会编译成自调用函数，因为 Java脚本没有原生枚举类型。
📦 模块： 导出和导入操作会将声明保留在文件本地，防止全局名称冲突。
???? 环境声明： .d.ts 文件描述了第三方 Java脚本库，无需重写即可进行类型检查。

什么是 TypeScript?

TypeScript 是一个超集 Java脚本。 TypeScript 是一种面向对象的编程语言，支持类、接口等。它是一种由[此处应填写开发者名称]开发的开源语言。 Microsoft 静态编译代码为 Java脚本。它可以轻松地在浏览器或Node.js中运行。

ECMAScript 发布的所有最新功能均受支持 TypeScript此外 TypeScript 它具有自身的面向对象特性，例如接口、环境声明和类继承，这些特性有助于开发。ping 一个大型应用程序，否则很难构建。 JavaScript.

这种关系是单向的。每一个有效的 Java脚本文件已有效 TypeScript但反过来却不成立，因为类型注解仅存在于…… TypeScript 并在编译过程中被删除。

为什么使用 TypeScript?

以下是使用以下产品的重要好处 TypeScript:

大型复杂项目 Java脚本难以编码和维护。
TypeScript 它对代码组织大有帮助，并且在编译过程中而不是运行时消除了大部分错误。
TypeScript 支持JS库和API文档。
它是一种可选类型的脚本语言，因此可以逐步采用类型。
TypeScript 代码可以转换为纯文本 Java适用于任何浏览器目标的脚本代码。
它提供了更好的代码结构和面向对象编程技术。
它能够提供更好的开发时间工具支持，包括自动完成和安全重构。
它可以通过装饰器等功能，将语言扩展到标准之外。

最大的实际好处在于编辑器支持。由于编译器知道每个值的结构，编辑器可以重命名整个项目中的属性，并报告所有不再匹配的地方。

TypeScript 历史

让我们回顾一下历史上的重要里程碑。 TypeScript:

经过两年的内部开发 Microsoft, TypeScript 0.9 版本于 2013 年发布。
TypeScript 1.0 版本在 2014 年 Build 大会上发布，增加了对泛型的支持。
2014 年 XNUMX 月，新 TypeScript 新编译器速度比之前的版本快五倍。
2015 年 7 月，增加了对 ES6 模块、命名空间关键字、for…of 循环和装饰器的支持。
2016 年 11 月，新增了映射类型、键和查找类型以及对象剩余部分和扩展。
2018 年 3 月 27 日，添加了条件类型和改进的 keyof 与交叉类型。
TypeScript 5.0 版本于 2023 年 3 月发布，对装饰器进行了现代化改造，并减小了软件包大小。
TypeScript 6.0 版本于 2026 年 3 月发布，是在此基础上构建的最终版本。 Java脚本代码库。
TypeScript 7.0 将编译器迁移到原生 Go 实现， Microsoft 据报道，其速度大约是 6.0 的十倍。

谁使用 TypeScript?

TypeScript 它不再是小众选择。它是几种最常用的前端和后端工具的基础，下面的列表显示了初学者最有可能接触到它的地方。

角度： Angular框架是用以下语言编写的： TypeScript应用程序代码也需要用这种语言编写。
React 和 Vue 项目： 两个生态系统都提供官方服务。 TypeScript 模板，以及大多数现代启动器默认启用此功能。
Node.js后端： NestJS 等服务器框架围绕以下原理构建： TypeScript 课程和装饰师。
编辑器工具： Visual Studio Code 本身就是一个大 TypeScript 代码库，因此其语言支持非常完善。
大型企业前端： 与众多贡献者合作的团队采用这种方法在部署前捕获集成错误。

如何下载和安装 TypeScript

以下是下载和安装的分步过程 TypeScript:

步骤 1）下载并安装 Nodejs

访问Node.js官方网站， https://nodejs.org/en/download/然后下载并安装适用于您操作系统的 Node.js。详细说明请参阅指南。如何下载和安装Node.js.

步骤 2）检查 Nodejs 和 npm 版本

要检查 Nodejs 和 npm 是否已安装，请在命令提示符中检查版本。

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

任何当前版本的Node LTS都可以使用。 TypeScript 编译器本身只需要一个受支持的 Node 版本即可运行。

步骤3） TypeScript 安装

创建项目目录 typeproject\ 并运行 npm init，如下命令所示：

npm init

步骤 4）开始安装

这将创建 package.json 文件，用于存储我们项目的依赖项。

完成后，安装 TypeScript 如下：

npm -g install typescript

上述命令将负责安装 TypeScript. 在 npm install 中添加“-g”将安装 TypeScript 全局性地使用 -g 参数的优势在于，您将能够使用 TypeScript TSC 由于它是全局安装的，因此可以从任何目录执行命令。如果您不想安装，请执行以下操作： TypeScript 全局范围内，请使用以下命令：

npm install --save-dev typescript

在项目目录中创建一个名为 src\ 的文件夹，并在 src\ 文件夹中创建以下文件： TypeScript 文件 test.ts 并编写代码。

例如：test.ts

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

let sum = add(5,10);
console.log(sum);

汇编 TypeScript 编码为 Javascript

要编译上述代码，请使用以下命令。

If TypeScript 已全局安装，请使用以下命令：

tsc test.ts

If TypeScript 如果已安装在您的项目本地，您需要使用其路径。 TypeScript 从 node_modules 目录下运行（如图所示），或者通过 npx 运行：

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

上述命令将创建一个名为 test.js 的文件，该文件中的代码将被编译成…… Java脚本。

例如：test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

演练： Javascript 使用 Nodejs

现在我们将按如下方式在Nodejs中执行test.js：

D:\typeproject\src>node test.js
15

当 test.js 运行时，传递给 console.log 的值会显示出来。

演练： Java浏览器中的脚本

计费示例：

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

汇编 TypeScript 编码为 Javascript 使用 EcmaScript 版本

TypeScript 支持所有已发布的 ECMAScript 特性，开发者可以在编码时使用它们。但并非所有新特性都受旧版浏览器支持，因此您可能需要编译为旧版本的 ECMAScript。 TypeScript 提供了可以实现这一功能的编译器选项。

例如：test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

要编译为您选择的 ES 版本，您可以在命令中使用 target 或 t 选项，如下所示：

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

默认情况下，经典编译器的目标语言是 ES3。如果您想更改目标语言，可以使用上面的命令。

目前我们将使用 ES6 作为目标：

tsc --target ES6  test.ts

test.ts 到 test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

代码保持不变，因为你使用的箭头函数是 ES6 的特性，编译成 ES6 时不会改变。

默认情况下，目标框架是 ES3，因此如果没有指定目标框架，test.js 文件将如下所示：

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

所以这里，粗箭头被替换成了一个普通的匿名函数。

💡提示： 与其每次都在命令行中传递选项，不如运行 tsc --init 生成 tsconfig.json 文件。然后，编译器会从该文件中读取整个项目的 target、outDir 和 strict 设置。

变量在 TypeScript

变量用于存储值，值可以是字符串、数字、布尔值或表达式。当涉及到 TypeScript，它们类似于 JavaScript所以，让我们来学习如何声明变量并为其赋值。 TypeScript.

变量必须先定义才能在代码中使用。要声明变量，可以使用以下方法：

VAR 关键词，

让关键词

常量关键词

使用变量 TypeScript 类似于 Java脚本，以及熟悉该脚本的用户 Java脚本会发现这非常容易。在现代代码中，让和常量优先于 VAR因为它们的块级作用域可以防止一整类错误。

使用 var 声明变量

语法：

var firstname = "Roy";

让我们来看几个例子。 TypeScript 通过示例来理解 var 关键字的用法以及使用该关键字声明的变量的作用域。 VAR 关键词。

例如1：

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

例如2：

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

例如3：

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

使用 let 声明变量

此 TypeScript let 的语法如下：

语法：

let name = "Roy";

的工作让该变量几乎与 VAR但有一个重要的区别，下面的例子可以说明这一点。

计费示例：

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

以上 TypeScript 示例会抛出错误，但同样的代码在其他情况下却可以正常运行。 VAR 关键字。使用以下方式声明的变量让变量仅在声明它们的代码块内可用。在本例中，变量 t 仅存在于 if 代码块内，而不存在于整个函数中。

这一点同样适用于任何函数、for 循环、while 循环或 switch 代码块内部。let 变量只能在该代码块内部使用，在外部引用它会抛出错误。这就是 var 和 let 的主要区别。

使用 const 声明变量

const 表示常量变量。它们类似于 let 变量，区别在于 const 变量一旦被赋值就不能更改。因此，const 声明必须在同一行进行初始化。

语法：

const name = "Roy";

计费示例：

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

因此，只要确定赋值不会被重新赋值，就应该使用 const。请注意，const 防止的是绑定被重新赋值，而不是它指向的对象被修改。

类型 TypeScript

TypeScript 是一种强类型语言，而 Java脚本并非如此。一个值定义为字符串的变量可以毫无问题地更改为数字。 Java脚本中同样的做法是不被容忍的。 TypeScript。在 TypeScript变量的类型在程序启动时就已定义，并且在整个执行过程中必须保持该类型不变。任何更改都会导致编译时出现编译错误。 Java脚本。

以下是基本类型：

类型	接受	声明示例
数	整数、浮点数和分数	let a: number = 10;
绳子	仅文本值	let s: string = “hello”;
布尔	仅真或假	let b: boolean = true;
任何	任意值，不进行任何检查	令 x: any = 123;
无效	没有返回值	函数 f(): void {}

联系电话

只接受整数、浮点数、小数和类似的数值。

语法：

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

以下是一些可用于数字类型的重要方法：

到固定（） – 它会将数字转换为字符串，并保留传递给该方法的小数位数。

toString（） – 此方法会将数字转换为字符串。

的价值（） – 此方法将返回数字的原始值。

到精度() – 此方法将数字格式化为指定的长度。

例如：所有数值方法

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

串

字符串：仅限字符串值。

语法：

let str :string = "hello world";

以下是一些可用于字符串类型的重要方法：

分裂() – 此方法会将字符串拆分成数组。
字符() – 此方法将给出给定索引处的字符。
指数() – 此方法将给出给定值首次出现的位置。
更换() – 此方法接受两个字符串。它在字符串中查找第一个值，如果找到，则将其替换为第二个值，并返回一个新字符串。
修剪（）——此方法将删除字符串两侧的空白字符。
子字符串() – 此方法将根据给定的起始位置和长度给出字符串的一部分。
子串() – 此方法将根据起始位置和结束位置返回字符串的一部分。末尾的字符将被排除在外。
到大写() – 将字符串转换为大写。
降低大小写() – 将字符串转换为小写。

计费示例：

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

布尔

布尔值只接受逻辑值 true 和 false。与普通值不同。 Java脚本中不接受数字 0 和 1，因为它们属于数字类型。

语法：

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

任何

语法：

let a :any = 123
a = "hello world"; // changing type will not give any error.

使用以下方式声明的变量任何 type 可以容纳字符串、数字、数组、布尔值或 void 值。 TypeScript 不会抛出任何编译时错误，这类似于变量 Java脚本。仅当您不确定与该变量关联的值的类型时才使用 any 类型，因为它会关闭对该值的所有检查。

空间

void 类型通常用作不返回任何值的函数的返回类型。

语法：

function testfunc():void{
 //code here
}

TypeScript 排列

An 排列 in TypeScript 数组是一种可以存储多个值的数据类型。让我们学习如何在数组中声明和赋值以进行数组操作。 TypeScript.

建立 TypeScript 是一种强类型语言，你必须指定数组中值的数据类型。否则，它将被视为任意类型。

声明并初始化数组

语法：

let nameofthearray : Array<typehere>

例如：

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

访问数组元素的不同方法

要从数组中获取元素，值从索引 0 开始，一直到数组长度减 1。

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

您还可以使用以下方法从数组中获取元素： TypeScript HPMC胶囊循环，如下所示。

运用 TypeScript for循环

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

输出：

⚠️警告： 循环条件必须是 i < years.length。写作 i <= years.length 额外运行一次迭代并打印结果 undefined因为最后一个有效索引始终是长度减一。

使用 for-in 循环

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

输出：

使用 for-of 循环

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

输出：

使用 forEach 循环

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

输出：

TypeScript 数组方法

此 TypeScript 数组对象拥有许多属性和方法，可以帮助开发者轻松高效地处理数组。您可以通过指定 `arrayname.property` 来获取属性的值，通过指定 `arrayname.method()` 来获取方法的输出结果。

会员	目的	Returns & Exchanges
长度	数组中的元素个数	数
撤销（）	Reverse物品的排列顺序	同一个数组
种类（）	将物品就地排序	同一个数组
流行音乐（）	移除最后一个项目	移除的物品
转移（）	移除第一个项目	移除的物品
推（）	添加一个值作为最后一个项目	新长度
连接（）	将两个数组合并成一个数组。	一个新的数组

长度属性示例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

反向方法示例

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

排序方法示例

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

pop 方法示例

console.log(months.pop()); // Dec

移位方法示例

console.log(months.shift()); // Jan

推送方法示例

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

concat 方法示例

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

上课 TypeScript

TypeScript 是一个超集 Java脚本，所以任何可能的事情 Java脚本也可以在 TypeScript.class 是从 ES6 开始添加的特性。在 ES6 早期版本中， Java通过使用带有原型方法的函数来实现类似脚本和类的功能，可以重用代码。使用类，你的代码可以接近于某些语言的功能。 Java、C# 和 Python代码易于重用。

定义一个类 TypeScript

以下是基本的类语法 TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

示例：Class 上的一个工作示例

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

在上面的例子中，你有一个名为 Students 的类。它有 age、name 和 roll_no 三个属性。

构造函数 TypeScript 增益级

上面定义的 Students 类有一个构造函数，如下所示：

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

构造函数方法带有参数 age、name 和 roll_no。构造函数负责在类实例化时初始化这些属性。可以通过以下方式访问这些属性： Free Introduction 例如，可以使用关键字参数，例如 this.age 来访问年龄，this.roll_no 来访问学号。您还可以设置默认构造函数，如下所示：

constructor () {}

内部的方法 TypeScript 增益级

在 Students 类中定义了诸如 getRollNo()、getName() 和 getAge() 之类的方法，它们返回属性 roll_no、name 和 age 的值。

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

创建类的实例 TypeScript

In TypeScript要创建类的实例，可以使用 `new` 运算符。使用 `new` 创建实例后，会得到一个可以访问类的属性和方法的对象，如下所示：

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

编译 TypeScript 班级 Java脚本

您可以使用如下所示的 tsc 命令进行编译。 Java脚本。

Command: tsc  Students.ts

输出 Java编译后的脚本代码如下所示：

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Java脚本中，该类被转换为自调用函数。

类继承

可以使用以下方式继承类扩展关键字输入 TypeScript.

类继承语法：

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

B级可以分享 A级方法和属性。

以下是一个使用继承的类的示例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

你有两个类，Person 和 Student。Student 继承自 Person，从 Student 创建的对象可以访问它自身的方法和属性，以及它所继承的类的方法和属性。

现在让我们对上面的类做一些修改。

计费示例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

与前一个例子相比，变化之处在于 Student 类中定义了一个构造函数。该构造函数接受与基类相同的参数，以及它自身添加的任何其他参数。

In TypeScript 你需要使用基类的所有参数调用 `super` 方法。这必须是构造函数中的第一条语句，因为 `super` 会执行被扩展类的构造函数。任何由派生类声明的属性，例如 `tmarks`，都必须显式赋值，否则 `getMarks` 方法会返回 `undefined`。

访问修饰符 TypeScript

TypeScript 支持对方法和属性使用 public、private 和 protected 访问修饰符。默认情况下，如果没有指定访问修饰符，则方法或属性被视为 public，可以从类的对象轻松访问。

对于私有访问修饰符，成员无法从类的对象访问，只能在类内部使用。它们不能被继承类访问。

对于受保护的访问修饰符，成员只能在类及其继承的类中使用，不能从类的对象访问。

计费示例：

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

修改	同班	派生类	类的对象
国家	是	是	是
保护	是	是	没有
私立	是	没有	没有

接口输入 TypeScript

的核心功能之一 TypeScript 接口是一组规则，使用它的实体必须实现这些规则。实体可以是类、函数或变量。接口可以由属性和方法组成。您可以使用“?”语法将属性或方法标记为可选。接口会为任何实现它的函数、变量或类添加强类型检查。

接口的语法 TypeScript

interface Dimension {
    width: string;
    height: string;
}

您定义了一个名为 Dimension 的接口，它具有 width 和 height 属性，这两个属性的类型均为 string。

现在，这个接口可以由变量、函数或类来实现。以下是一个实现了 Dimension 接口的变量示例。

计费示例：

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Dimension 接口的签名包含 width 和 height 两个属性，且两者都是必需的。如果缺少任何属性或更改了类型，则在编译代码时会产生编译时错误。 Java脚本。

上述代码编译后为 Java脚本如下所示：

var _imagedim = {
    width: "100px",
    height: "200px"
};

现在让我们看看如何使用具有功能的接口。

在函数中使用接口作为返回类型

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

在上面的例子中，接口 Dimension 被用作函数 getDimension() 的返回类型。返回值必须与接口中声明的属性和类型相匹配。

汇编 Java脚本代码如下：

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

编译过程中，如果返回类型与接口不匹配，则会抛出错误。

接口作为函数参数

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

在上面的示例中，您将接口 Dimension 用作函数 getDimension() 的参数。调用该函数时，传递给它的参数必须符合接口定义的规则。

汇编 Java脚本代码如下：

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

实现接口的类

要在类中使用接口，需要使用关键字器物.

实现接口的类的语法：

class NameofClass implements InterfaceName {
}

以下示例展示了如何将接口与类配合使用。

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

在上面的示例中，您定义了接口 Dimension，它具有属性 width 和 height，均为字符串类型，以及一个名为 getWidth() 的方法，该方法返回一个字符串。

汇编 Java脚本代码如下：

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

函数在 TypeScript

函数是为完成特定任务而执行的一系列指令。 Java在脚本中，大部分代码都是以函数的形式编写的，它们发挥着重要作用。 TypeScript 虽然有了类、接口、模块和命名空间，但函数仍然扮演着重要的角色。函数与接口的区别在于…… Java脚本和 TypeScript 参数和返回类型有哪些？ TypeScript 功能。

Java脚本功能：

function add (a1, b1) {
   return a1+b1;
}

TypeScript 功能：

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

在上面的函数中，函数名是add，参数是 a1 和 b1两者类型均为数字，返回类型也为数字。如果将字符串传递给该函数，则在编译时会抛出编译时错误。 Java脚本。

调用函数：add

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

参数 a1 和 b1 参数是必填项，如果未提供将导致错误。参数类型和返回类型同等重要，一旦定义就无法更改。

函数的可选参数

In Java在脚本中，所有函数参数都是可选的，如果未传递参数，则视为未定义。但在其他情况下则不然。 TypeScript定义参数后，必须提供这些参数。如果希望某个参数为可选参数，请在参数名称后添加问号，如下所示：

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

请注意，可选参数必须最后定义。您不能将第一个参数设为可选，而将第二个参数设为必需，因为编译器将无法确定实际提供了哪个值。

为参数分配默认值

您可以按如下所示为参数分配默认值：

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

与可选参数类似，默认初始化的参数也必须放在参数列表的末尾。

剩余参数

你已经看到了 TypeScript 它处理必填参数、可选参数和默认值参数。现在我们来看看剩余参数。剩余参数是一组用三个参数一起定义的可选参数。 點（…） 后面跟着参数名称，参数名称是一个数组。

Rest 参数的语法：

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

如上所示，剩余参数是一个以三个点开头的数组。该数组将保存传递给函数的所有剩余参数。

计费示例：

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

箭头函数

箭头函数是 ES6 中发布的重要特性之一，它可用于 TypeScript 而且，它的语法中有一个粗箭头，这也是它名称的由来。

箭头函数语法：

var nameoffunction = (params) => {
 // code here
}

箭头函数有什么用途？

让我们来看一个例子来了解箭头函数的用法。

计费示例：

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

您创建了一个函数，其中包含一个名为 score 的属性，其初始值为 0。该函数还有一个 getScore 方法，该方法内部使用了 setTimeout，并在 1 秒后记录 this.score。尽管 this.score 已定义并初始化，但记录的值却是 undefined。问题出在…… Free Introduction 关键字。setTimeout 函数内部有自己的 this 属性，由于 score 未在其中定义，因此结果未定义。

同样的操作也可以使用箭头函数来处理，如下所示：

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

箭头函数没有自己的 Free Introduction而是共享父作用域中的变量，因此在外部声明的变量可以在箭头函数中使用 `this` 访问。它们的优点在于语法更简洁，并且适用于回调函数、事件处理程序和计时函数。

TypeScript 枚举

A TypeScript 枚举是一个对象，它保存着一组相关的值。 Java脚本本身并不原生支持枚举类型。大多数编程语言，例如…… Java, C, 和 C++ 支持枚举，以及 TypeScript 也使它们可用。枚举类型使用 enum 关键字定义。

如何声明一个枚举？

语法：

enum NameofEnum {
   value1,
   value2,
    ..
}

示例：枚举

enum Directions {
    North,
    South,
    East,
    West
}

在上面的例子中，你定义了一个名为 Directions 的枚举，其值包括 North、South、East 和 West。这些值从 0 开始编号，第一个值代表方向，后续每个值递增 1。

声明一个具有数值的枚举值

默认情况下，如果枚举成员没有被赋予值，则它采用从 0 开始的数字。以下示例显示了一个具有明确数值的枚举。

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

您还可以指定一个起始值，后续成员的值将递增。例如：

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

现在北面从 5 开始，所以南面是 6，东面是 7，西面是 8。

您也可以使用自定义值代替默认值。例如：

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

如何访问枚举？

以下示例展示了如何在代码中使用枚举：

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

汇编 Java脚本如下：

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

建立 Java脚本不支持枚举类型，编译器会将枚举类型转换为自调用函数，如上所示。双重赋值正是创建反向映射的原因。ping 从号码倒序到姓名。

声明一个值为字符串的枚举类型

您可以根据需要赋值字符串，如下例所示。

计费示例：

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

汇编 Java脚本如下：

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

⚠️警告： 字符串枚举没有反向映射ping比较上面两个编译后的输出：数值枚举存储了双向值，而字符串枚举只存储了名称到值的对应关系。这就是为什么 Directions[0] 对于字符串枚举类型，返回 undefined。

模块是什么 TypeScript?

创建的文件 TypeScript 全局访问意味着在一个文件中声明的变量可以在另一个文件中访问。这种全局性可能会导致代码冲突和运行时问题。导出和导入模块功能可以用来避免全局变量和函数冲突。此功能于 [此处应填写版本信息] 中引入。 Java该脚本采用 ES6 版本，并且也受支持。 TypeScript.

为什么需要模块 TypeScript?

以下示例展示了不使用模块时出现的问题。

例 test1.ts

let age : number = 25;

您已经在 test1.ts 中定义了一个数字类型的变量 age。

例 test2.ts

在 test2.ts 中，您可以访问该变量年龄在 test1.ts 中定义并对其进行修改，如下所示：

age = 30; // changed from 25 to 30.
let _new_age = age;

这可能会造成很多问题，因为这些变量是全局可用的，可以从任何地方进行修改。

与模块所编写的代码仅限于该文件内部，无法从外部访问。要共享文件中的任何内容，必须使用 export 关键字将其导出。 导出模板 当您希望在另一个文件中使用变量、类、函数或接口时，可以使用此方法。 导入模板 当您需要访问已导出的项目时，可以使用此方法。这样做可以保持文件内的代码完整，即使您定义了相同的变量名，它们也不会混淆。

使用导出和导入

导出和导入的方法有很多种。我们将讨论最常用的语法。

导入导出1的语法：

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

这是一个使用导出和导入的工作示例。

测试1.ts

export let age: number = 25;

export关键字用于将年龄变量共享到另一个文件。

测试2.ts

import { age } from "./test1"
let new_age :number = age;

import 关键字用于访问年龄变量，并且您需要指定文件位置，如上所示。

导入和导出语法 2：

还有另一种导出和导入方法，语法如下所示：

export = classname;

import classname = require("file path of modulename")

使用时 出口 = 要导出您的模块，导入时必须使用 require(“模块名的文件路径”)。

以下是一个展示这种情况的实际示例。

客户.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

测试客户.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

模块加载器

模块无法独立运行，因此需要模块加载器来查找导入依赖项，如以下所示： TypeScript 以上是示例。可用的模块加载器包括用于 Node.js 的 CommonJS 和用于浏览器的 Require.js。

要使用 CommonJS 模块格式编译代码，请使用以下命令：

tsc --module commonjs testCustomer.ts

要使用 Requirejs 模块格式编译代码，请使用以下命令：

tsc --module amd testCustomer.ts

使用上述命令，依赖文件将转换为js文件。

示例：使用 Requirejs 将 testCustomer.ts 转换为 testCustomer.js

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

使用 Requirejs 将 Customer.ts 转换为 Customer.js 的示例

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

要使用 require.js 进行测试，您需要创建一个名为 main.js 的文件，并按如下所示引用依赖项。

文件夹结构如下：

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

主文件

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

测试.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

命名空间 TypeScript

命名空间将类、接口、变量和函数集合在一个文件中。

命名空间语法

namespace name{

export class {
}

export interface {
}

export const constname;

}

相关代码位于同一个命名空间下。

命名空间工作示例：testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

命名空间的名称是 学生设置您添加了接口 StudDetails、函数 addSpace 和名为 Student 的类。

访问命名空间

以下是使用命名空间的代码。 学生设置.

测试学生设置.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

命名空间内的类、接口或函数必须使用命名空间名称来引用，例如： 学生设置.添加空间 访问该功能和 学生设置.学生 访问课程。

您可以将这两个文件编译成一个js文件，如下所示：

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

请使用以下命令在命令提示符中检查输出：

node namespace.js

输出：

The name is :H a r r y

环境声明 TypeScript

TypeScript 允许您使用第三方 Java使用环境声明的脚本文件。此功能的优势在于，您无需重写库，即可使用其所有功能并进行类型检查。 TypeScript.

环境语法

声明一个环境模块：

declare module moduleName {
   //code here
}

环境文件必须保存为：

filename.d.ts

使用文件 文件名.d.ts 在你的 .ts 文件中，你需要这样引用它：

/// <reference path="filename.d.ts"/>

环境类型声明 TypeScript 它引用第三方库，并使用它们自己的类型重新声明所需的函数。例如，考虑以下小型库： Java下面显示的是脚本库。

Third Party (第三方) Java脚本文件：testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

你有一个名为 StringChecks 的对象，它具有 isString、convertToUpperCase、convertToLowerCase 和 convertToStringBold 等函数。

在创建环境模块中 TypeScript

现在我们将创建一个引用该模块的环境模块 Java上述脚本功能会根据需要添加类型检查。

文件名：tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

您定义了一个名为 TestString 的模块，并导出接口 StringsFunc。每个签名都说明了函数接受什么参数以及返回什么参数：

isString（str：string）：布尔值 – 接受一个字符串参数并返回一个布尔值。传递数字或任何其他类型都会导致编译时错误。
convertToUpperCase(str: string): string – 接受一个字符串并返回一个字符串。
convertToLowerCase(str: string): string – 接受一个字符串并返回一个字符串。
convertToStringBold（str：字符串）：字符串 – 接受一个字符串并返回一个字符串。

由于 Java脚本文件中暴露了对象名称 StringChecks，我们最终在 .d.ts 文件中引用了相同的名称：

declare var StringChecks: TestString.StringsFunc;

使用 Ambient 模块 TypeScript

这是 test.ts 文件，它使用了环境文件 tstring.d.ts。

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

使用 tsc test.ts 编译生成 test.js：

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

现在你可以在 HTML 文件中同时使用 test.js 和库文件 testString.js。

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

输出：

true
HELLO WORLD
hello
<b>Hello World</b>

💡提示： 对于常用的库，你很少需要自己编写 .d.ts 文件。例如，可以改用社区维护的类型定义库。 npm install --save-dev @types/lodash编译器会自动识别它们。

接下来，直接比较这两种语言。 TypeScript vs Java脚本重访 Java脚本数组方法对于此处使用的非类型化等效项，请研究循环 Java脚本和内部和外部 Java脚本浏览器基础架构是编译输出所依赖的。

常见问题

不。浏览器会执行。 Java仅脚本文件，因此必须先使用 tsc 或打包工具编译 .ts 文件。类型注解会在编译过程中被清除，不会产生运行时开销。

是的。在 tsconfig.json 中启用 allowJs，然后逐个重命名文件。因为每个 Java脚本文件已有效 TypeScript项目在整个迁移过程中持续编译。

接口可以重新打开和扩展，通常是对象类型的首选。类型别名还可以涵盖接口无法表达的联合体、元组和基本类型。

使用导出和导入功能来管理模块。命名空间早于 ES 模块出现，主要用于声明文件和较旧的基于脚本的代码库。

是的，可以量化地衡量。编译器会立即拒绝虚构的属性和错误的参数类型，因此生成的代码片段要么进行类型检查，要么准确地报告错误之处。

编辑器集成会将周围的类型和 .d.ts 文件传递到模型上下文中。因此，更丰富的注解比弱类型代码能产生更准确的代码补全。

什么是 TypeScript?

为什么使用 TypeScript?

TypeScript 历史

谁使用 TypeScript?

如何下载和安装 TypeScript

汇编 TypeScript 编码为 Javascript

演练： Javascript 使用 Nodejs

演练： Java浏览器中的脚本

汇编 TypeScript 编码为 Javascript 使用 EcmaScript 版本

相关文章

变量在 TypeScript

使用 var 声明变量

使用 let 声明变量

使用 const 声明变量

类型 TypeScript

联系电话

串

布尔

任何

空间

TypeScript 排列

声明并初始化数组

访问数组元素的不同方法

运用 TypeScript for循环

输出：

使用 for-in 循环

输出：

使用 for-of 循​​环

输出：

使用 forEach 循环

输出：

TypeScript 数组方法

长度属性示例

反向方法示例

排序方法示例

pop 方法示例

移位方法示例

推送方法示例

concat 方法示例

上课 TypeScript

定义一个类 TypeScript

示例：Class 上的一个工作示例

构造函数 TypeScript 增益级

内部的方法 TypeScript 增益级

创建类的实例 TypeScript

编译 TypeScript 班级 Java脚本

类继承

类继承语法：

访问修饰符 TypeScript

接口输入 TypeScript

接口的语法 TypeScript

在函数中使用接口作为返回类型

接口作为函数参数

实现接口的类

函数在 TypeScript

调用函数：add

函数的可选参数

为参数分配默认值

剩余参数

箭头函数

箭头函数有什么用途？

TypeScript 枚举

如何声明一个枚举？

声明一个具有数值的枚举值

如何访问枚举？

声明一个值为字符串的枚举类型

模块是什么 TypeScript?

为什么需要模块 TypeScript?

使用导出和导入

导入导出1的语法：

导入和导出语法 2：

模块加载器

示例：使用 Requirejs 将 testCustomer.ts 转换为 testCustomer.js

使用 Requirejs 将 Customer.ts 转换为 Customer.js 的示例

命名空间 TypeScript

命名空间语法

访问命名空间

输出：

环境声明 TypeScript

环境语法

使用 for-of 循环