以下都是我的ChartGpt老师教学的内容哦,(若想知道怎么用ChartGpt学习,或者想知道我的问答方式,可以点这个查看我的学习记录)
----------------------------------------------------------------------------分割线----------------------------------------------------------------------
一:TypeScript 的基本数据类型
TypeScript 支持 JavaScript 的基本数据类型,包括 number、string、boolean、null、undefined 和 symbol。其中,number 表示数字类型,string 表示字符串类型,boolean 表示布尔类型,null 和 undefined 分别表示空值和未定义值,symbol 表示一种独一无二的值。
除了这些基本数据类型,TypeScript 还支持一些新的类型,如 any、void、never 等。
any 表示任意类型,可以接受任何值,不进行类型检查,通常用于需要动态类型的场合。
void 表示没有返回值的函数,通常用于返回 undefined 的函数。
never 表示永远不会返回值的函数,通常用于抛出异常或死循环等场合。
在 TypeScript 中,变量的类型可以通过类型注解或类型推断来确定。类型注解是指在变量声明时显式地指定变量的类型,例如:
let num: number = 123;
而类型推断是指编译器可以根据上下文自动推断出变量的类型,例如:
let str = 'hello'; // str 推断为 string 类型
二:TypeScript 中的变量声明
在 TypeScript 中,有三种声明变量的方式:var、let 和 const。
var 是传统的声明变量的方式,它的作用域是函数作用域或全局作用域,可以被重新赋值。
let 和 const 是 ES6 引入的声明变量的方式,它们有更好的作用域控制和类型检查。
let 声明的变量的作用域是块作用域,可以被重新赋值。
const 声明的变量的作用域也是块作用域,但是不能被重新赋值,常用于声明常量或不可变的值。
例如:
let num: number = 123;
const str: string = 'hello';
三:TypeScript 中的函数
在 TypeScript 中,函数可以有参数和返回值,可以使用类型注解来指定参数和返回值的类型。
例如:
function add(x: number, y: number): number {
return x + y;
}
这个函数的参数 x 和 y 都是 number 类型,返回值也是 number 类型。
另外,函数还可以有可选参数和默认参数,可选参数使用问号(?)来标记,而默认参数使用等号(=)来标记。
例如:
function sayHello(name?: string): void {
if (name) {
console.log('Hello, ' + name);
} else {
console.log('Hello');
}
}
function multiply(x: number, y = 2): number {
return x * y;
}
这两个函数中,sayHello 函数有一个可选参数 name,如果不传入参数,则输出 Hello;multiply 函数有一个默认参数 y,如果不传入参数,则默认为 2。
当你调用这两个函数时,可以像下面这样:
console.log(add(1, 2)); // 输出 3
sayHello(); // 输出 Hello
sayHello('John'); // 输出 Hello, John
console.log(multiply(3)); // 输出 6
console.log(multiply(3, 4)); // 输出 12
这里我们先调用了 add 函数,传入两个参数 1 和 2,输出结果为 3。
然后调用了 sayHello 函数,第一次没有传入参数,输出结果为 Hello;第二次传入参数 'John',输出结果为 Hello, John。
最后调用了 multiply 函数,第一次只传入一个参数 3,此时默认使用第二个参数为 2,输出结果为 6;第二次传入两个参数 3 和 4,输出结果为 12。
四:TypeScript 中的类
在 TypeScript 中,类可以用来定义对象的结构和行为。类包含属性和方法,可以使用类型注解来指定属性和方法的类型。
例如:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
}
这个类定义了一个名为 Person 的对象,有两个属性 name 和 age,以及一个构造函数 constructor 和一个方法 sayHello。
构造函数 constructor 用来创建对象,并初始化对象的属性值。在上面的例子中,构造函数接受两个参数 name 和 age,将它们分别赋值给对象的属性 name 和 age。
方法 sayHello 用来输出对象的信息,使用模板字符串来拼接输出的字符串。
另外,类还可以继承其他类,并且可以实现接口来定义对象的结构和行为。这些内容我们将在后续的学习中详细介绍。
接下来,你可以尝试定义一个类,并创建对象,并调用其方法来输出信息。
// 定义一个类 Animal class Animal { name: string; // 属性 name 的类型为 string constructor(name: string) { // 构造函数接收一个参数 name,将其赋值给属性 name this.name = name; } move(distance: number = 0) { // 定义一个方法 move,接收一个参数 distance,默认值为 0 console.log(`${this.name} moved ${distance}m.`); // 输出对象的名称和移动的距离 } } // 定义一个类 Snake,继承自 Animal class Snake extends Animal { constructor(name: string) { super(name); } // 调用父类的构造函数来创建对象 move(distance: number = 5) { // 重写父类的方法 move,将默认值改为 5 console.log(`${this.name} slithered ${distance}m.`); // 输出对象的名称和移动的距离 } } // 定义一个类 Horse,继承自 Animal class Horse extends Animal { constructor(name: string) { super(name); } // 调用父类的构造函数来创建对象 move(distance: number = 45) { // 重写父类的方法 move,将默认值改为 45 console.log(`${this.name} galloped ${distance}m.`); // 输出对象的名称和移动的距离 } } // 创建一个 Snake 的对象 sam let sam = new Snake("Sammy the Python"); sam.move(); // 调用对象的方法 move,输出 "Sammy the Python slithered 5m." // 创建一个 Horse 的对象 tom let tom: Animal = new Horse("Tommy the Palomino"); tom.move(34); // 调用对象的方法 move,输出 "Tommy the Palomino galloped 34m."
以上是一个基本的 TypeScript 类的示例代码,其中类 Animal 定义了一个基本的动物,包含属性 name 和方法 move。类 Snake 和类 Horse 继承自类 Animal,并重写了其方法 move。
在主程序中,我们创建了一个 Snake 的对象 sam 和一个 Animal 类型的 Horse 对象 tom,分别调用其方法 move 来输出信息。
五:TypeScript 中的接口
// 定义一个接口 Person,包含两个属性 name 和 age interface Person { name: string; age: number; } // 定义一个函数 greet,接收一个参数 person,类型为 Person 接口 function greet(person: Person) { return `Hello, ${person.name}! You are ${person.age} years old.`; } // 定义一个对象 alice,包含属性 name 和 age let alice = { name: "Alice", age: 30 }; // 调用函数 greet,输出 "Hello, Alice! You are 30 years old." console.log(greet(alice));
以上是一个简单的 TypeScript 接口示例代码,其中接口 Person 定义了一个基本的人员信息,包含属性 name 和 age。函数 greet 接收一个参数 person,类型为 Person 接口,并返回一段问候语。对象 alice 包含属性 name 和 age,符合 Person 接口的定义,所以可以传入函数 greet 中。最后输出问候语。
接口是 TypeScript 中一种非常重要的概念,它定义了一组属性和方法的规范,用于约束对象的形状和行为。可以使用接口来规范函数的参数类型、返回值类型和对象的类型等。
六: TypeScript 中的泛型
// 定义一个泛型函数 identity,接收一个参数 value,类型为泛型 T function identity<T>(value: T): T { return value; } // 调用函数 identity,传入参数为字符串 "hello",返回值为字符串 "hello" let result1 = identity<string>("hello"); console.log(result1); // 调用函数 identity,传入参数为数字 123,返回值为数字 123 let result2 = identity<number>(123); console.log(result2);
以上是一个简单的 TypeScript 泛型示例代码,其中函数 identity 是一个泛型函数,接收一个参数 value,类型为泛型 T,并返回该参数。在调用函数 identity 时,可以指定 T 的具体类型,也可以让 TypeScript 自动推断 T 的类型。示例中分别传入字符串和数字作为参数,并输出结果。
泛型是 TypeScript 中非常重要的概念,它可以用于提高代码的灵活性和可复用性,同时也是许多高级特性的基础。可以使用泛型来规范函数的参数类型、返回值类型和类的属性类型等。
七: TypeScript 中的枚举
在 TypeScript 中,枚举是一种特殊的数据类型,它用于定义一组有限的命名常量。枚举可以用于代替硬编码的数字或字符串,提高代码的可读性和可维护性。
下面是一个简单的枚举示例:
enum Color { Red, Green, Blue } let color: Color = Color.Green; console.log(color); // 输出 1
在这个示例中,我们定义了一个名为 Color
的枚举类型,它包含了三个常量:Red
、Green
和 Blue
。当我们将 Color.Green
赋值给变量 color
时,它的值为 1,这是因为枚举默认从 0 开始给每个常量赋值。我们也可以手动指定常量的值:
enum Color { Red = 1, Green = 2, Blue = 4 }
在这个示例中,Red
的值为 1,Green
的值为 2,Blue
的值为 4。我们也可以通过枚举的值来获取其名称:
enum Color { Red = 1, Green, Blue } let colorName: string = Color[2]; console.log(colorName); // 输出 'Green'
在这个示例中,我们将 Color[2]
赋值给变量 colorName
,它的值为 'Green'
,因为 Green
的值为 2。
除了默认从 0 开始赋值和手动指定值,枚举还支持常量表达式。常量表达式是指可以在编译期间计算出结果的表达式,例如:
enum Color { Red = 1, Green = 1 << 1, Blue = 1 << 2 }
注:enum
是 TypeScript 中的一个关键字,用于定义一组有限的命名值。它是一个枚举类型,可以将一些相关的常量组合在一起,从而增强代码的可读性和可维护性。例如,在一个游戏中,我们可以使用 enum
来定义不同的角色类型,如战士、法师、牧师等,然后在代码中使用这些类型来表示不同的角色。在 TypeScript 中,enum
可以包含数字或字符串值,也可以包含计算值。如果不指定枚举值,则 TypeScript 会自动为它们赋值。
八: TypeScript 中的类型判断
在 TypeScript 中,可以使用类型判断来判断一个变量的类型是否为某个特定的类型。这种类型判断可以通过三种: typeof
、instanceof
、类型断言等方式来实现。
1,typeof
可以用来判断一个变量的基本类型,如字符串、数字、布尔值等,例如:
let str: string = "hello"; if (typeof str === "string") { console.log("str is a string"); }
2. instanceof
则可以用来判断一个变量是否为某个类的实例,例如:
class Person { name: string; constructor(name: string) { this.name = name; } } let person = new Person("Tom"); if (person instanceof Person) { console.log("person is an instance of Person"); }
3.使用类型断言来手动指定一个变量的类型,例如:
let someValue: any = "hello";
let strLength: number = (someValue as string).length;
以上是 TypeScript 中的三种基本的类型判断方法,可以帮助我们更好地进行类型检查和类型转换。
九: TypeScript 中的类型断言
类型断言是 TypeScript 中用来手动指定一个变量的类型的方法。在 TypeScript 中,有两种类型断言的方式,分别是“尖括号”语法和“as”语法。
- “尖括号”语法
使用“尖括号”语法可以将一个变量断言为某个特定的类型。例如:
let someValue: any = "hello";
let strLength: number = (<string>someValue).length;
在上面的例子中,我们将变量someValue
断言为字符串类型,并将其赋值给strLength
变量。
- “as”语法
使用“as”语法也可以将一个变量断言为某个特定的类型。例如:
let someValue: any = "hello";
let strLength: number = (someValue as string).length;
在上面的例子中,我们将变量someValue
断言为字符串类型,并将其赋值给strLength
变量。与“尖括号”语法相比,“as”语法更加简洁明了。
需要注意的是,类型断言并不是类型转换。在进行类型断言时,如果断言的类型与实际类型不匹配,就会发生运行时错误。因此,在进行类型断言时,应该确保变量的实际类型与所断言的类型是一致的。