TS是由微软开发的编程语言,本质上是为JS语言增加的一些静态类型和面向类的一些面向编程相关能力。
TypeScript vs JavaScript
TS类型是一个强类型的,支持动态和静态类型的一个检测,可以结合一些工具在编译过程中可以发现一些错误;JS是弱类型的语言。
总的来说TS是JS的一个扩展,同时TS也能编译成JS运行,TS可以在编译环节就可以发现一些问题,支持静态代码检测,支持后端语言中的一些相关特性。
TS基础
1.boolean、number、string
2.枚举enum
3.any、unknown、void
4.never:更多的会在防御式编程中使用
5.数组类型[]
6.元组类型tuple
函数类型
定义:TS定义函数类型时要定义输入参数类型和输出类型
输入参数:参数支持可选参数和默认参数
输出参数:输出可以自动推断,没有返回值时,默认为void类型
函数重载:名称相同但参数不同,可以通过重载支持多种类型
TS进阶-泛型-基本使用
基本定义:
1.泛型的语法是<>里面写类型参数,一般用T表示;
2.使用时有两种方法指定类型:
1.定义要使用的类型
2.通过TS类型推断,自动推导类型
3.泛型的作用是临时占位,之后通过传来的类型进行推导;
泛型的使用方法和场景:
1. 函数中的泛型
泛型常用于函数,帮助处理多种数据类型。例如:
typescript
function identity<T>(value: T): T {
return value;
}
console.log(identity(42)); // number
console.log(identity('hello')); // string
通过<T>,我们定义了一个通用的类型参数,T代表任意类型,函数返回值的类型与输入参数的类型一致。
2. 类中的泛型
在类中使用泛型可以使类能够处理不同类型的数据:
typescript
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
const numberBox = new Box(10);
console.log(numberBox.getValue()); // number
const stringBox = new Box('hello');
console.log(stringBox.getValue()); // string
Box<T>是一个泛型类,它能容纳任何类型的值,并且getValue返回与传入值相同类型的值。
3. 接口中的泛型
在接口中使用泛型可以使接口具有灵活性:
typescript
interface Pair<T, U> {
first: T;
second: U;
}
const pair: Pair<string, number> = { first: 'hello', second: 42 };
这里定义了一个Pair接口,它包含两个泛型参数T和U,分别表示两个属性的类型。
4. 泛型约束
泛型约束可以确保泛型类型具备特定的属性或方法,从而提高代码的类型安全性。
typescript
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(item: T): void {
console.log(item.length);
}
logLength([1, 2, 3]); // 数组有length属性
logLength('hello'); // 字符串有length属性
// logLength(42); // 错误: number没有length属性
T extends Lengthwise是一个约束,确保传入的类型T包含length属性。
5. 联合类型与泛型
泛型可以与联合类型结合使用,提供更灵活的类型选择:
typescript
function wrap<T>(value: T): T | null {
return value ? value : null;
}
console.log(wrap('hello')); // 'hello'
console.log(wrap(42)); // 42
console.log(wrap(null)); // null
这个例子中,wrap函数可以接受任何类型的值,并返回该值或null,通过使用T | null联合类型,使得返回类型既能满足原类型也能处理null。
6. 使用泛型约束提高安全性
我们可以为泛型类型定义更严格的约束,以确保类型的正确性:
typescript
class DataStore<T extends string | number> {
private data: T[] = [];
add(item: T): void {
this.data.push(item);
}
getAll(): T[] {
return this.data;
}
}
const store = new DataStore<number>();
store.add(1);
store.add(2);
console.log(store.getAll()); // [1, 2]
// const invalidStore = new DataStore<boolean>(); // 错误: boolean不符合约束
T extends string | number确保DataStore只能存储string或number类型的数据,提高了代码的灵活性和安全性。
总结
通过泛型,TypeScript能在提供灵活性的同时,保持类型的严格检查。泛型约束进一步增强了代码的安全性,确保了类型的正确性。通过合理使用泛型,代码不仅能适应多种类型的变化,还能避免潜在的类型错误。