Typescript的基础类型及进阶教程
Typescript基础类型
在Typescript中,有几种常见的基础类型,包括:
1. number
:表示数字类型,可以是整数或浮点数。
let age: number = 25;
let height: number = 1.75;
2. string
:表示字符串类型,可以包含文本和字符。
let name: string = "Alice";
let message: string = "Hello, TypeScript!";
3. boolean
:表示布尔类型,只能为true
或false
。
let isDone: boolean = false;
let hasError: boolean = true;
4. array
:表示数组类型,可以存储多个相同类型的值。
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
在这个例子中,我们声明了一个numbers
数组,它的元素类型是number
,并赋予了一些数字。同样,我们声明了一个names
数组,元素类型为string
,并赋予了一些字符串。
5. tuple
:表示元组类型,是一个固定长度和类型顺序的数组。
let person: [string, number] = ["Alice", 25];
在这个例子中,我们定义了一个person
元组,它包含一个string
类型的姓名和一个number
类型的年龄。
6. enum
:表示枚举类型,用于定义一组具名的常量。
enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;
在这个例子中,我们定义了一个Color
枚举,它包含Red
、Green
和Blue
三个值。我们将color
变量赋值为Color.Red
,它实际上是枚举中的第一个值,对应的数值是0。
7. any
:表示任意类型,可以赋予任何值,与普通的JavaScript类型兼容。
let value: any = "Hello";
value = 42;
value = true;
8. void
:表示空类型,常用于函数没有返回值的情况。
function sayHello(): void {
console.log("Hello!");
}
sayHello(); // 输出:Hello!
在这个例子中,我们定义了一个sayHello
函数,它没有返回值(即void
类型)。函数内部只是简单地打印一条问候语。我们调用这个函数,它会输出"Hello!"。
9. null
和undefined
:表示空值和未定义值。
let myVariable: null = null;
let myVariable2: undefined = undefined;
在这个例子中,我们声明了一个value1
变量,它的类型是null
,并将其赋值为null。同样,我们声明了一个value2
变量,类型为undefined
,并将其赋值为undefined。
10. object
:表示非原始类型,即除了number
、string
、boolean
、symbol
、null
和undefined
之外的类型。
let person: object = { name: "Alice", age: 25 };
11. unknown
:表示未知类型,类似于any
类型,但更加安全。在使用unknown
类型的变量时,需要进行类型检查或类型断言。
let value: unknown = "Hello";
if (typeof value === "string") {
console.log(value.toUpperCase());
}
12. never
:表示永远不会发生的类型,常用于表示抛出异常或无法正常返回的函数。
function throwError(): never {
throw new Error("Something went wrong");
}
function infiniteLoop(): never {
while (true) {
// 无限循环
}
}
在这个例子中,throwError
函数会抛出一个异常,所以它的返回类型是never
。而infiniteLoop
函数则是一个无限循环,它永远不会结束,因此也返回never
类型。
13. symbol
:表示唯一的标识符,通常用作对象属性的键。
let id: symbol = Symbol("id");
let obj = {
[id]: "12345"
};
console.log(obj[id]); // 输出:12345
14. bigint
:表示任意精度的整数,可以处理超出number
类型表示范围的整数。
let bigNumber: bigint = 9007199254740991n;
以上是Typescript中的一些基础类型。使用这些类型可以为变量、函数参数和函数返回值等提供明确的类型注解,使代码更加可读和可维护。
Typescript类型推断
类型推断: Typescript还支持根据变量的初始值自动推断类型,即类型推断。当我们没有显式指定变量的类型时,Typescript会根据赋值的表达式推断出变量的类型。
let number = 42; // number的类型被推断为number
let message = "Hello"; // message的类型被推断为string
这样,我们可以更简洁地声明变量,而无需显式指定类型。
Typescript类型断言
类型断言: 有时候我们可能需要告诉Typescript一个变量的具体类型,即进行类型断言。通过类型断言,我们可以绕过类型检查器,将一个变量指定为特定类型。
let value: any = "Hello, TypeScript!";
let length: number = (value as string).length;
console.log(length); // 输出:18
在这个例子中,我们将value
变量声明为any
类型,但是我们知道它实际上是一个字符串。通过类型断言(value as string)
,我们告诉Typescript将value
视为字符串类型,然后获取其长度。
Typescript字面量类型
字面量类型: Typescript还支持字面量类型,即限制变量只能取特定的字面量值。
let direction: "left" | "right" | "up" | "down";
direction = "up"; // 合法
direction = "center"; // 非法,只能取限定的字面量值
在这个例子中,我们使用联合类型和字面量类型定义了一个变量direction
,它只能取"left"
、"right"
、"up"
或"down"
这几个字面量值之一。
Typescript类型别名
类型别名: Typescript允许我们为类型定义别名,以便在复杂的类型或重复使用的类型上提高可读性。
type Point = {
x: number;
y: number;
};
let p: Point = {
x: 10,
y: 20
};
在这个例子中,我们使用type
关键字创建了一个类型别名Point
,它表示一个具有x
和y
属性的点。然后我们使用Point
类型别名声明了变量p
。
Readonly
修饰符
readonly
修饰符: Typescript提供了readonly
修饰符,用于将属性设置为只读,即只能在初始化时进行赋值,后续无法修改。
type Person = {
readonly name: string;
age: number;
};
let p: Person = {
name: "Alice",
age: 25
};
p.age = 30; // 合法
p.name = "Bob"; // 非法,name是只读属性
在这个例子中,我们定义了一个Person
类型,其中name
属性被标记为只读。当我们创建一个Person
对象后,name
属性的值不能再进行修改。
进阶知识
1. 类型推断: Typescript具有类型推断的能力,它可以根据变量的赋值推断出变量的类型。
let name = "Alice"; // 类型推断为string
let age = 25; // 类型推断为number
console.log(name); // 输出:Alice
console.log(age); // 输出:25
在这个例子中,我们声明了name
和age
变量,并分别赋予了字符串和数字。Typescript根据赋值的类型推断出了变量的类型。
2. 类型守卫: 类型守卫是一种在代码中进行类型检查的方式,它可以帮助我们缩小变量的类型范围。
function printLength(value: string | number) {
if (typeof value === "string") {
console.log(value.length); // value被推断为string类型
} else {
console.log(value.toFixed(2)); // value被推断为number类型
}
}
printLength("Hello"); // 输出:5
printLength(3.14159); // 输出:3.14
在这个例子中,printLength
函数接受一个string
或number
类型的参数value
。通过使用typeof
关键字进行类型检查,我们可以在代码块中针对不同的类型执行不同的逻辑。
3. 字面量类型: 字面量类型允许我们指定变量只能取特定的值。
let direction: "up" | "down" | "left" | "right" = "up";
function move(dir: "up" | "down" | "left" | "right") {
// 执行移动逻辑
}
move("left"); // 调用move函数,并传入参数"left"
在这个例子中,我们声明了一个direction
变量,它只能取"up"
、"down"
、"left"
或"right"
这几个字面量值中的一个。我们还定义了一个move
函数,它的参数dir
也只能是这几个字面量值之一。
4. 函数类型: Typescript可以定义函数的参数类型和返回值类型。
function add(x: number, y: number): number {
return x + y;
}
let result: number = add(5, 3);
console.log(result); // 输出:8
在这个例子中,我们定义了一个函数add
,它接受两个参数x
和y
,它们的类型都是number
,并且返回值也是number
类型。我们调用add
函数并将结果赋值给result
变量,然后打印出结果。
5. 可选参数和默认参数: 函数的参数可以标记为可选或设置默认值。
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}
console.log(greet("Alice")); // 输出:Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出:Hi, Bob!
在这个例子中,我们定义了一个函数greet
,它接受一个必需的参数name
和一个可选的参数greeting
。如果提供了greeting
参数,函数将使用它作为问候语,否则将使用默认的问候语。我们可以根据需要调用greet
函数。
6. 剩余参数: Typescript支持剩余参数(rest parameters),允许我们将多个参数收集到一个数组中。
function sum(...numbers: number[]): number {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3, 4)); // 输出:10
console.log(sum(5, 6)); // 输出:11
在这个例子中,我们定义了一个函数sum
,使用剩余参数...numbers
将传入的所有参数收集到一个名为numbers
的数组中。然后,我们遍历这个数组并求和返回结果。
这些是Typescript基础类型的一些进一步讲解和相关特性。通过掌握这些基础类型,你可以更好地理解和应用Typescript语言的特性。