TypeScript学习笔记

TypeScript

---

---

一、TypeScript是什么？

1.TypeScript简介

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过为JavaScript添加静态类型和其他特性，提供了更好的代码可读性、可维护性和可扩展性。

下面是一些关于TypeScript的要点：

1. 静态类型：TypeScript引入了静态类型系统，允许开发者在代码中显式地声明变量、函数参数和返回值的类型。这样可以在编译时捕获类型错误，提前发现潜在的bug，并提供更好的代码智能感知和自动完成功能。

2. 类型推断：TypeScript可以根据上下文自动推断变量的类型，减少了冗余的类型注解，同时仍然提供了类型安全性。

3. ES6+支持：TypeScript支持ECMAScript 6及以上版本的语法和特性，包括箭头函数、解构赋值、模块化等。这使得开发者可以使用最新的JavaScript特性，而无需等待浏览器的支持。

4. 类和接口：TypeScript支持面向对象编程的概念，可以使用类和接口来定义对象和抽象数据类型。这使得代码更加模块化、可维护和可扩展。

5. 编译时类型检查：TypeScript在编译时进行类型检查，可以捕获一些常见的错误，如类型不匹配、未定义的变量等。这有助于提高代码质量和可靠性。

6. 工具和生态系统：TypeScript拥有丰富的工具和生态系统支持，包括编辑器插件、开发工具、第三方库等。这些工具可以提供更好的开发体验和工作流程。

总之，TypeScript是一种强类型的JavaScript超集，它通过添加静态类型和其他特性，提供了更好的代码可读性、可维护性和可扩展性。它是现代Web开发中的一种重要选择，被广泛应用于大型项目和框架，如Angular、React等。

2.TypeScript与JavaScript区别

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
• TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

---

二、TypeScript基本语法

下面是TypeScript的一些基本语法：

1. 变量声明

使用关键字let或const声明变量，let用于声明可变的变量，const用于声明不可变的常量。

let num: number = 10;
const name: string = "John";

2. 类型注解

可以为变量、函数参数和返回值指定类型。类型注解可以帮助编译器检查代码的类型错误。

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

3. 接口

接口用于定义对象的结构和类型。它可以描述对象的属性、方法和其他成员。

interface Person {
  name: string;
  age: number;
}

function greet(person: Person): void {
  console.log(`Hello, ${person.name}!`);
}

4. 类

类是面向对象编程的基本构建块。它可以包含属性、方法和构造函数。

class Animal {
  name: string;

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

  speak(): void {
    console.log(`${this.name} is speaking.`);
  }
}

const dog = new Animal("Dog");
dog.speak(); // 输出 "Dog is speaking."

5. 模块

使用export关键字将代码导出为模块，使用import关键字引入其他模块的代码。

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
import { add } from "./math";
console.log(add(2, 3)); // 输出 5

6. 注释

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

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

编译器会忽略注释。
TypeScript 支持两种类型的注释

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

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

注释实例：

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

7.TypeScript 与面向对象

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

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

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

• 对象：对象是类的一个实例（对象不是找个女朋友），有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。

• 类：类是一个模板，它描述一类对象的行为和状态。

• 方法：方法是类的操作的实现步骤。

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 代码，输出结果如下:

Runoob

---

三、TypeScript基础类型

在TypeScript中，有一些基本类型可用于声明变量、函数参数和返回值的类型。下面是TypeScript的基础类型：

1. number：表示数字类型，包括整数和浮点数。

   let num: number = 10;
   

2. string：表示字符串类型。

   let name: string = "John";
   

3. boolean：表示布尔类型，只有两个值：true和false。

   let isDone: boolean = false;
   

4. array：表示数组类型，可以在元素类型后面加上[]，或使用泛型Array<元素类型>。

   let numbers: number[] = [1, 2, 3];
   let names: Array<string> = ["John", "Jane"];
   

5. tuple：表示元组类型，用于表示固定长度和类型的数组。

   let person: [string, number] = ["John", 25];
   

6. enum：表示枚举类型，用于定义一组命名的常量值。

   enum Color {
     Red,
     Green,
     Blue,
   }
   
   let color: Color = Color.Red;
   

7. any：表示任意类型，可以赋予任何值，取消类型检查。

   let value: any = 10;
   value = "Hello";
   

8. void：表示没有返回值的类型。

   function logMessage(): void {
     console.log("Hello");
   }
   

9. null和undefined：表示null和undefined两个特殊类型。
   在 JavaScript 中 null 表示 “什么都没有”。
   undefined 是一个没有设置值的变量。

   let n: null = null;
   let u: undefined = undefined;
   

10. never：never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

    function throwError(): never {
      throw new Error("Error occurred");
    }
    

这些是TypeScript的基础类型，它们可以用于声明变量、函数参数和返回值的类型。还有其他高级类型，如联合类型、交叉类型、类型别名等。

---

四、TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

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

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

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

在TypeScript中，变量声明可以使用关键字let、const和var。这些关键字用于声明变量，并指定其类型。

1. 使用let关键字声明变量：

   let age: number = 25;
   let name: string = "John";
   let isStudent: boolean = true;
   

2. 使用const关键字声明常量：

   const PI: number = 3.14;
   const MAX_SIZE: number = 100;
   

3. 使用var关键字声明变量（不推荐使用）：

   var count: number = 10;
   

在TypeScript中，变量的类型可以显式地指定，也可以通过类型推断自动推导出来。例如，下面的代码中，变量age的类型被推断为number，变量name的类型被推断为string：

let age = 25;
let name = "John";

此外，TypeScript还支持使用联合类型、数组类型、元组类型、枚举类型等更复杂的变量声明方式。例如，下面的代码展示了一些其他类型的变量声明：

let id: number | string = 123; // 联合类型
let numbers: number[] = [1, 2, 3, 4]; // 数组类型
let person: [string, number] = ["John", 25]; // 元组类型
enum Color { Red, Green, Blue }; // 枚举类型
let color: Color = Color.Red;

---

五、TypeScript 运算符

1.常见的TypeScript运算符

TypeScript继承了JavaScript的运算符，同时还引入了一些新的运算符和语法糖。下面是一些常见的TypeScript运算符的详细介绍：

1. 算术运算符：

   • +：加法运算符，用于两个数值相加或字符串拼接。
   • -：减法运算符，用于两个数值相减。
   • *：乘法运算符，用于两个数值相乘。
   • /：除法运算符，用于两个数值相除。
   • %：取模运算符，返回两个数值相除的余数。

2. 关系运算符：

   • ==：相等运算符，检查两个值是否相等。
   • !=：不等运算符，检查两个值是否不相等。
   • >：大于运算符，检查左侧的值是否大于右侧的值。
   • <：小于运算符，检查左侧的值是否小于右侧的值。
   • >=：大于等于运算符，检查左侧的值是否大于或等于右侧的值。
   • <=：小于等于运算符，检查左侧的值是否小于或等于右侧的值。

3. 逻辑运算符：

   • &&：逻辑与运算符，用于判断多个条件是否同时为真。
   • ||：逻辑或运算符，用于判断多个条件是否至少有一个为真。
   • !：逻辑非运算符，用于取反一个条件的值。

4. 赋值运算符：

   • =：简单赋值运算符，将右侧的值赋给左侧的变量。
   • +=：加法赋值运算符，将右侧的值加到左侧的变量上。
   • -=：减法赋值运算符，将右侧的值减去左侧的变量。
   • *=：乘法赋值运算符，将右侧的值乘到左侧的变量上。
   • /=：除法赋值运算符，将左侧的变量除以右侧的值。
   • %=：取模赋值运算符，将左侧的变量取模右侧的值。

5. 其他运算符：

   • ?:：条件运算符，根据条件的真假返回不同的值。
   • typeof：类型运算符，返回操作数的类型。
   • instanceof：类型判断运算符，检查一个对象是否属于某个类。

此外，TypeScript还支持位运算符、三元运算符、nullish合并运算符（??）等其他运算符。这些运算符的使用方式和JavaScript基本相同。

2.运算符实例

1. 算术运算符

let num1: number = 10;
let num2: number = 5;
let result1: number = num1 + num2; // 加法运算符
let result2: number = num1 - num2; // 减法运算符
let result3: number = num1 * num2; // 乘法运算符
let result4: number = num1 / num2; // 除法运算符
let result5: number = num1 % num2; // 取模运算符

2. 关系运算符

let age: number = 25;
let isAdult: boolean = age >= 18; // 大于等于运算符
let isTeenager: boolean = age < 20; // 小于运算符
let isEqual: boolean = age == 25; // 相等运算符
let isNotEqual: boolean = age != 30; // 不等运算符

3. 逻辑运算符

let isStudent: boolean = true;
let hasJob: boolean = false;
let canApply: boolean = isStudent && !hasJob; // 逻辑与运算符和逻辑非运算符
let canEnroll: boolean = isStudent || hasJob; // 逻辑或运算符

4. 赋值运算符

let count: number = 10;
count += 5; // 加法赋值运算符，等同于 count = count + 5;
count -= 3; // 减法赋值运算符，等同于 count = count - 3;
count *= 2; // 乘法赋值运算符，等同于 count = count * 2;
count /= 4; // 除法赋值运算符，等同于 count = count / 4;
count %= 3; // 取模赋值运算符，等同于 count = count % 3;

5. 其他运算符

let num: number = 10;
let result: string = num > 5 ? "大于5" : "小于等于5"; // 条件运算符
let type: string = typeof num; // 类型运算符
let isString: boolean = num instanceof String; // 类型判断运算符

---

六、TypeScript接口

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

1.接口定义

TypeScript 接口定义如下：

interface interface_name { 
}

接口可以包含属性、方法和索引签名。下面是一个简单的接口示例：

interface Person {
  name: string;
  age: number;
  greet: () => void;
}

上面的接口定义了一个Person接口，它有三个属性：name和age是字符串和数字类型的属性，greet是一个没有参数和返回值的函数。

2.联合类型和接口

以下实例演示了如何在接口中使用联合类型：

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.接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

设置元素为字符串类型：

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

如果使用了其他类型会报错：
实例

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
// var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
var list2:namelist = ["John",1,"Bran"]

执行后报错如下，显示类型不一致：

test.ts:8:30 - error TS2322: Type ‘number’ is not assignable to type ‘string’.
8 var list2:namelist = [“John”,1,“Bran”]
~
test.ts:2:4
2 [index:number]:string
~~~~~~~~~~~~~~~~~~~~~
The expected type comes from this index signature.
Found 1 error.

TypeScript

interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
 // 类型正确 
agelist["runoob"] = 15  
 
// 类型错误，输出  error TS2322: Type '"google"' is not assignable to type 'number'.
// agelist[2] = "google"

接口还可以用于描述函数类型、可索引类型和类类型。它们提供了更多灵活的方式来定义对象的结构和行为。