TypeScript 教程：什么是接口、枚举、数组（附示例）

什么是 TypeScript?

TypeScript 是一个超集 Java脚本。 TypeScript 是纯面向对象的编程语言，支持类、接口等。它是由 Microsoft 静态编译代码为 Java脚本。它可以轻松在浏览器或Nodejs中运行。

ECMAScript 发布的所有最新功能均受支持 TypeScript 此外 TypeScript 有自己的面向对象特性，如接口、环境声明、类继承等，这有助于开发大型应用程序，否则很难在 JavaScript.

如何下载和安装 TypeScript

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

步骤 1）下载并安装 Nodejs

进入nodejs官方网站： https://nodejs.org/en/download/ 并根据您的操作系统下载并安装 nodejs。有关如何下载 nodejs 的详细说明请参见此处： https://www.guru99.com/download-install-node-js.html

步骤 2）检查 Nodejs 和 npm 版本

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

因此您已经安装了 nodejs v10 和 npm 6。

步骤3） TypeScript 安装

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

npm init

步骤 4）开始安装

现在，我们将创建包 .json 来存储我们项目的依赖项。

完成安装后 TypeScript 如下：

npm -g install typescript

上述命令将负责安装 TypeScript. 在 npm install 中添加“-g”将安装 TypeScript 全局。使用 -g 的优点是，你将能够使用 TypeScript TSC 命令可以从任何目录安装，因为它是全局安装的。如果您不想安装 TypeScript 全局使用以下命令：

npm --save install 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 如图所示：

node_modules/typescript/bin/tsc test.ts

上述命令将创建一个 test.js 文件并将代码编译为 javascript。

例如：test.js

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

演练： Javascript 使用 Nodejs

该 TypeScript 教程中，我们将在 nodejs 中执行 test.js，如下所示：

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

test.js 执行时显示 consoled 的值

演练： Java浏览器中的脚本

计费示例：

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

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

TypeScript 支持所有已发布的 Ecmascript 功能，开发人员可以在编码时使用这些功能。但并非所有新功能都支持旧版浏览器，因此您需要将 javascript 编译为旧版 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 TypeScript 教程作为目标：

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);

因此在这里，粗箭头被改为普通的匿名函数。

变量在 TypeScript

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

变量不能在未定义的情况下在代码中使用。要声明变量，您可以使用

VAR 关键词，

让关键词

常量关键词

使用变量 TypeScript 与 javascript 类似，熟悉 javascript 的用户会发现它非常简单。只有像让以及常量相比之下，使用并不多 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

使用 let 声明变量

此 TypeScript let 的语法如下：

语法：

let name="Roy";

的工作让变量几乎与 VAR，但有一点不同，并且会理解使用 TypeScript 例。

计费示例：

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

以上 TypeScript 示例会抛出一个错误，但如果使用 VAR 关键字。变量使用让在声明的块范围内可用，例如，变量 t 仅在 if 块内可用，而不是整个函数内可用。

另外如果你碰巧在任何函数、for 循环、while 循环中声明了一个变量， TypeScript switch 块，它将只在该块内可用，而块外没有对它的引用，并且如果在块外使用该变量，它将引发错误。这是 var 和 let 关键字声明变量之间的主要区别。

使用 const 声明变量

Const 表示常量变量。它们与 let 变量类似，唯一的区别是一旦赋值就不能改变。

语法：

const name;

计费示例：

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

因此，仅当用户知道不必更改分配给它的值时，他们才可以使用 const 变量。

类型 TypeScript

TypeScript 是一种强类型语言，而 javascript 不是。将一个值定义为字符串的变量更改为数字，不会出现任何问题 Javascript. 不允许发生同样的事情 TypeScript。在 TypeScript，变量的类型仅在开始时定义，并且在执行过程中，它必须保持相同的类型，对它的任何更改都将在编译为 javascript 时导致编译时错误。

以下是类型：

联系电话
串
布尔
任何
空间

联系电话

仅接受整数、浮点数、分数等。

语法：

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

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

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

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

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

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

示例：使用所有 String 方法

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";

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

分裂() – 此方法将字符串拆分为一个数组。
字符() – 此方法将给出给定索引的第一个字符。
指数() – 此方法将给出所给值的第一次出现的位置。
更换 () – 此方法需要 2 个字符串，首先是在字符串中搜索的值，如果存在则用第二个字符串替换它并返回一个新字符串。
修剪 () – 此方法将删除字符串两侧的空格。
子字符串() – 此方法将给出字符串的一部分，该部分取决于给定的开始和结束位置。
子串() – 此方法将给出字符串的一部分，该部分取决于给定的开始和结束位置。结束位置的字符将被排除。
到大写() - 将字符串转换为大写
降低大小写() – 将字符串转换为小写。

计费示例：

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 is the value does not exist in the string.
_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、0 和 1。

语法：

let bflag :boolean = 1;
let status :boolean = true;

任何

语法：

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

使用以下方式声明的变量任何类型可以将变量作为字符串、数字、数组、布尔值或 void。 TypeScript 不会引发任何编译时错误；这类似于在 Java脚本。仅当您不确定与该变量关联的值的类型时才使用任何类型的变量。

空间

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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

访问数组元素的不同方法

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

计费示例：

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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]);
}
Output:
2016
2017
2018
2019

使用 for-in 循环

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

Output:
2016
2017
2018
2019

使用 for-of 循环

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

使用 foreach 循环

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

TypeScript 数组方法

TypeScript 数组对象具有许多属性和方法，可帮助开发人员轻松高效地处理数组。您可以通过指定 arrayname.property 获取属性的值，并通过指定 array name.method() 获取方法的输出。

长度属性

=> 如果想知道数组中元素的数量，可以使用 length 属性。

Rev反向方法

=> 您可以使用反向方法反转数组中项目的顺序。

排序方法

=> 您可以使用排序方法对数组中的项目进行排序。

Pop 方法

=> 您可以使用 pop 方法删除数组的最后一项。

Shift 方法

=> 您可以使用 shift 方法删除数组的第一个项目。

推送方式

=> 您可以将值添加为数组的最后一项。

concat 方法

=> 您可以将两个数组合并为一个数组元素。

长度属性示例

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

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

反向方法示例

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

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

排序方法示例

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

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

pop 方法示例

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

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

移位方法示例

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

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

推送方法示例

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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 以后添加的新功能，因此在 Java脚本类类型功能已尝试使用具有原型功能的函数来重用代码。使用类，您可以使我们的代码几乎接近 java、c#、python 等语言，其中代码可以重用。借助类的功能 TypeScript/Java脚本，它使得语言变得非常强大。

定义一个类 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 访问 age 属性，this.roll_no 访问 roll_no 等。您还可以有一个默认构造函数，如下所示：

constructor () {}

内部的方法 TypeScript 增益级

学生类示例中定义了一些方法，例如 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 命令来编译为 Javascript.

Command: tsc  Students.ts

输出 Javascript 编译后的代码如下：

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 Javascript，该类被转换成一个自调用函数。

类继承

可以使用以下方式继承类延长关键字输入 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);
    }
    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 将执行扩展类的构造函数。

访问修饰符 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 的接口，它具有属性宽度和高度，并且都具有字符串类型。

现在这个接口可以通过变量、函数或类来实现。下面是实现接口 Dimension 的变量的示例。

计费示例：

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

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

接口 Dimension 的签名有宽度和高度，两者都是必需的。如果在实现接口时遗漏了任何属性，或者更改了类型，则在将代码编译为 javascript 时会出现编译时错误。

上述代码编译为 JavaScript 后如下所示：

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() 上实现为返回类型。getDimension() 的返回类型必须与接口 Dimension 中提到的属性和类型相匹配。

编译后的代码 Javascript 将如下所示：

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"}); // will get "300px-250px"

因此，在上面的例子中，您已将接口维度用作函数 getDimension() 的参数。调用该函数时，您需要确保传递给它的参数与定义的接口规则相匹配。

编译后的代码 Javascript 将如下所示：

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() 的方法，该方法的返回值也是字符串。

编译后的代码 Javascript 将如下所示：

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

函数在 TypeScript

功能是执行任务的一组指令。在 Javascript中，大部分代码都是以函数的形式编写的，并起着主要作用。在 TypeScript，您有类、接口、模块、命名空间，但函数仍然起着重要作用。 JavaScript 和 TypeScript 函数的返回类型可用 TypeScript 功能。

Java脚本功能：

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

TypeScript 功能：

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

在上面的函数中，添加了函数的名称，参数是 a1和 b1 两者都具有数字类型，返回类型也是数字。如果你恰好将字符串传递给函数，它会在将其编译为 Java脚本。

调用函数：添加

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

参数 a1 以及 b1 是强制参数，如果不以此方式接收，则会抛出错误。此外，参数类型和返回类型非常重要，一旦定义就不能更改。

函数的可选参数

在 javascript 中，函数的所有参数都是可选的，如果未传递，则视为未定义。但情况并非如此 TypeScript，一旦您定义了参数，您也需要发送它们，但是如果您想保留任何参数为可选，您可以通过对参数名称使用？来实现，如下所示：

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

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

请注意，可选参数只能在函数的最后定义，不能将第一个参数设为可选参数，而将第二个参数设为强制参数。当使用一个参数调用函数时，编译器会抛出错误。因此，必须将可选参数放在最后。

为参数分配默认值

您可以为 params 分配默认值，如下所示：

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("");
}

如上所示，其余参数使用 (…param-name) 定义；其余参数是一个以三个点为前缀的数组。该数组将包含传递给它的所有参数。您可以调用该函数，如下例所示：

计费示例：

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as 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();

您创建了一个匿名函数，该函数具有一个属性 this.Score 初始化为 0，以及一个内部具有 setTimeout 的方法 getScore，并在 1 秒内控制台 this.score。尽管您已定义并初始化了 this.score，但控制台值仍为 undefined。这里的问题在于is 关键字。setTimeout 内部的函数有自己的 this，它尝试在内部引用分数，由于它未定义，因此给出 undefined。

可以使用箭头函数实现相同的效果，如下所示：

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

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

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

您已将 setTimeout 内部的函数更改为箭头函数，如下所示：

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

箭头函数没有自己的 Free Introduction 已定义并且共享其父代 Free Introduction，因此在箭头函数内部使用 this 可以轻松访问在外部声明的变量。它们非常有用，因为语法更短，并且适用于回调、事件处理程序、内部计时函数等。

TypeScript 枚举

TypeScript 枚举是将相关值的集合存储在一起的对象。 Javascript 不支持枚举。大多数编程语言喜欢 Java， C， C++ 支持 TypeScript 枚举，它也可以用于 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
}

现在枚举值 North 从 5 开始，因此 South 将获得 6 的值，East = 7 并且 West = 8。

您也可以指定自己选择的值，而不是采用默认值。例如：

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

如何访问枚举？

以下示例显示如何在代码中使用 Enum：

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

编译成javascript的代码如下：

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]);

建立 Javascript 不支持枚举，它将枚举转换为自调用函数，如上所示。

声明一个具有字符串值的枚举

您可以分配您选择的字符串值，如下例所示：

计费示例：

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 North

编译成javascript的代码如下：

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]);

模块是什么 TypeScript?

在中创建的文件 TypeScript 具有全局访问权限，这意味着在一个文件中声明的变量很容易在另一个文件中访问。这种全局特性可能会导致代码冲突，并可能导致运行时执行问题。您可以使用导出和导入模块功能来避免全局变量、函数冲突。此功能在 JavaES6 版本的脚本也支持 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 关键字将其导出。 It 当您想要在另一个文件中使用变量，类，函数或接口时使用。 导入模板 当您想要访问导出的变量、类、接口或函数时，可以使用。这样，编写的代码在文件中保持完整，即使您定义了相同的变量名，它们也不会混淆，并且只在声明它们的文件中起作用。

使用导出和导入

导出和导入的方法有很多种。因此，这里将讨论最常用的语法。

导入导出1的语法：

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable 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 如上所示示例。可用的模块加载器是用于 nodejs 的 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 允许您使用环境声明来使用第三方 javascript 文件。此功能的优点是您不必重写，但仍可以使用库中的所有功能 TypeScript.

环境语法

声明环境模块：

declare module moduleName {
   //code here
}

环境文件必须保存为：

filename.d.ts

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

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

环境类型声明 TypeScript 将引用第三方库，并使用其自身类型重新声明所需的函数。例如，假设您有一个小型 javascript 库，如下所示：

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

示例：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 和 converToStringBold 等功能。

在中创建环境模块 TypeScript

现在将创建一个环境模块，它将引用上述 js 函数，并根据我们的要求添加类型检查。

文件名：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）：布尔值

=> 这将以字符串形式接收参数，返回类型为布尔值。在 .ts 文件中使用时，如果您将参数传递为数字或字符串以外的任何内容，则会出现编译类型错误。

convertToUpperCase（str：string）：字符串

=> 这将以字符串形式接受参数并返回一个字符串。同样适用于 转换为小写（str：字符串）
：字符串；和 convertToStringBold（str：字符串）：字符串
;

由于在 javascript 文件中对象名称为 StringChecks，最后我们需要在 .d.ts 文件中引用它，具体操作如下：

declare var StringChecks: TestString.StringsFunc;

使用 Ambient 模块 TypeScript

现在这里是 test.ts 文件，其中将使用环境文件 tstring.d.ts

例如：test.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);

汇编 TypeScript 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="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

这是在控制台中看到的输出：

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

TypeScript 历史

让我们看看历史上的重要地标 TypeScript:

经过两年的内部开发 Microsoft. TypeScript 0.9，2013年发布
对泛型的额外支持 TypeScript 1.0 于 Build 2014 发布
2014 年 XNUMX 月，新 TypeScript 编译器比以前的版本快了五倍。
2015年6月，支持ESXNUMX模块、命名空间关键字、for、of支持、装饰器。
2016 年 XNUMX 月，添加了类似映射类型的键和查找类型以及其他功能。
27 年 2018 月 XNUMX 日，在条件类型中添加了改进的交叉类型键支持 TypeScript.

为什么使用 TypeScript?

以下是使用 TypeScript

大型复杂项目 Java脚本难以编码和维护。
TypeScript 对代码组织有很大帮助，并且在编译期间消除了大多数错误。
TypeScript 支持 JS 库和 API 文档
它是可选类型的脚本语言
TypeScript 代码可以转换成纯文本 Java脚本代码
更好的代码结构和面向对象的编程技术
提供更好的开发时间工具支持
它可以将语言扩展到标准装饰器、async/await 之外

谁使用 TypeScript?

以下是一些最常见的应用 TypeScript:

angular 团队使用 TypeScript.
NodeJS 和 NPM 安装
TypeScript 安装
汇编 TypeScript 编码为 Javascript
使用 Nodejs 执行代码
演练： Javascript 在浏览器中
汇编 TypeScript 编码为 Javascript 使用 EcmaScript 版本
您可以轻松地编译用以下代码编写的代码 TypeScript 至 Java使用 NodeJS 的脚本。
因此， TypeScript 您首先需要下载并安装 NodeJS。

结语

TypeScript 是一个超集 Java脚本。 TypeScript 是纯面向对象的编程语言，支持类、接口等。
TypeScript 支持所有已发布的 Ecmascript 功能，开发人员可以在编码时使用相同的功能。
变量用于存储值，值可以是字符串、数字、布尔值或表达式。
In TypeScript，变量的类型仅在开始时定义，并且在执行过程中，它必须保持相同的类型，对它的任何更改都将在编译为 javascript 时导致编译时错误。
数组 TypeScript 是一种可以存储多个值的数据类型。
Class 是 ES6 以后添加的新功能，因此在 Java脚本类类型功能已尝试使用具有原型功能的函数来重用代码。
TypeScript 支持对您的方法和属性使用公共、私有和受保护的访问修饰符。
的核心功能之一 TypeScript 是接口。接口是定义的一组规则，需要使用它的实体实现这些规则。
功能是执行某项任务而执行的一组指令。
TypeScript 枚举是将相关值的集合存储在一起的对象。

什么是 TypeScript?

如何下载和安装 TypeScript

汇编 TypeScript 编码为 Javascript

演练： Javascript 使用 Nodejs

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

相关文章

变量在 TypeScript

使用 var 声明变量

使用 let 声明变量

使用 const 声明变量

类型 TypeScript

联系电话

串

布尔

任何

空间

TypeScript 排列

声明并初始化数组

访问数组元素的不同方法

运用 TypeScript for循环

使用 for-in 循环

使用 for-of 循​​环

使用 foreach 循环

TypeScript 数组方法

长度属性

Rev反向方法

排序方法

Pop 方法

Shift 方法

推送方式

concat 方法

长度属性示例

反向方法示例

排序方法示例

pop 方法示例

移位方法示例

推送方法示例

concat 方法示例

上课 TypeScript

定义一个类 TypeScript

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

构造函数 TypeScript 增益级

内部的方法 TypeScript 增益级

在中创建类的实例 TypeScript

编译中 TypeScript 班级 Java脚本

类继承

类继承语法：

访问修饰符 TypeScript

接口输入 TypeScript

接口的语法 TypeScript

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

接口作为函数参数

实现接口的类

函数在 TypeScript

调用函数：添加

函数的可选参数

为参数分配默认值

剩余参数

箭头函数

箭头函数有什么用途？

TypeScript 枚举

如何声明一个枚举？

声明一个具有数值的枚举

如何访问枚举？

声明一个具有字符串值的枚举

模块是什么 TypeScript?

为什么需要模块 TypeScript?

使用导出和导入

导入导出1的语法：

导入导出2的语法：

模块加载器

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

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

命名空间 TypeScript

命名空间语法

访问命名空间

环境声明 TypeScript

环境语法

声明环境模块：

环境文件必须保存为：

使用 for-of 循环