目录
一、简介
TypeScript 是一种由微软开发的开源编程语言,是 JavaScript 的超集。js本身是弱类型语言,我们在使用过程中会更方便灵活,但在大型项目的开发中,这种特性可能会让我们出现一些小错误。而ts添加了静态类型和一些面向对象的特性,让我们在开发大型应用程序更容易维护和管理。
二、安装和使用
1. 我们可以直接使用npm工具直接全局安装ts。
npm install -g typescript
2.也可以在Typescript官网的演练场中进行测试。
左边是我们编写的ts代码,也可以进行调节配置、切换版本的操作,右边的控制台可以看到运行效果等。这种方式更适合我们练习语法。
三、语法
1、类型推断
TypeScript 的类型推断是一项强大的功能,它允许编译器在你不显式指定类型的情况下,自动推断出变量、函数参数和返回值的类型。这样可以减少冗余的类型注解,同时保持代码的安全性和可读性。
let str='nihao'
str=1//赋值为1会报错
代码中出现报错的原因是ts的类型推断判断str为一个字符串,那么以后这个变量将只能够存放字符串,和进行一些字符串相关的操作。这种方式不太推荐,因为虽然类型推断对变量有约束效果,但是不够直观。更推荐使用下面的类型注解。
2、类型注解
let str:string='nihao'
str=1//赋值为1会报错
通过冒号加类型的方式限定了这个变量只能是某一类型的变量。
3、类型断言
let numArr=[1,2,3]
const result = numArr.find(item => item>2)
result * 5//报错
这里我们编写了一个对数组进行查找后乘5的操作,我们可以知道筛选后的结果一定只有3,但是对于程序来说,程序会认为这个result可能是一个undefined,这样子乘5后的结果将是NAN,这时ts就会报错。当我们明确知道某个语句执行的结果一定是某个类型时,我们可以这样进行使用:
let numArr=[1,2,3]
const result = numArr.find(item => item>2) as number
result * 5
我们使用了as+类型,代表断言这句语句的执行结果一定是number。类型断言只有我们在明确知道语句执行结果只有某一类型时才可以使用,否则可能会出现一些错误。
4、联合类型
联合类型允许定义一个变量可以是多种类型中的一种。用 | 符号来表示。
let value: string | number; // value 可以是 string 或 number
value = "Hello"; // 有效
value = 100; // 也有效
我们也可以直接用来限定具体值:
let value: 1| 2;
value = 1; // 有效
value = 2; // 也有效
value = 3; // 报错
5、数组
基本数组定义
使用类型注解直接限制数组中的元素类型:
let numbers: number[] = [1, 2, 3, 4, 5]; // 数字数组
let fruits: string[] = ["apple", "banana", "cherry"]; // 字符串数组
Array泛型
let bools: Array<boolean> = [true, false, true]; // 布尔值数组
let mixed: Array<number | string> = [1, "two", 3, "four"]; // 数字和字符串的数组
6、元组
元组(Tuple)是 TypeScript 中一种特殊类型的数组,它允许你在一个数组中存储不同类型的固定数量的元素。
定义
let person: [string, number] = ["Alice", 30]; // 第一个元素是字符串,第二个元素是数字
元组的修改、访问、添加与数组基本一致,但在修改时不能将已限定类型的值赋值为其他类型的值。
可选元素
可以在元组中定义可选元素,使用 ? 来表示。例如:
let employee: [string, number?] = ["Bob"]; // 第二个元素是可选的
employee[1] = 25; // 也可以后续进行赋值
7、枚举
在 TypeScript 中,枚举(enum)是一种特殊的类型,用于定义一组命名的常量。这可以使代码更加清晰和易于管理,尤其是在需要使用一组相关的值时,比如状态码、方向、颜色等。
定义
enum Direction {
Up,
Down,
Left,
Right,
}
在这个例子中,该枚举包含四个方向。默认情况下,枚举成员的值从 0 开始递增:up、down、left、right分别对应0、1、2、3。
自定义枚举的值
enum Direction {
Up = 1,
Down = 2,
Left = 3,
Right = 4,
}
使用
let move: Direction = Direction.Up;
console.log(move); // 1
对于数字枚举,ts会自动生成反向映射,使得你可以通过值获取枚举成员的名称:
console.log(Direction[1]); // "Up"
8、函数
定义
function add(x: number, y: number): number {
return x + y;
}
let sum = add(5, 10); // sum 的值是 15
可以像在 JavaScript 中一样定义函数,但可以为参数和返回值指定类型
可选参数
function greet(name: string, greeting?: string): string {
return greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Bob", "Hi")); // "Hi, Bob!"
一般来说可选参数要放在右边
默认参数
function multiply(x: number, y: number = 1): number {
return x * y;
}
console.log(multiply(5)); // 5
console.log(multiply(5, 2)); // 10
可以为参数指定默认值,如果调用时没有提供该参数,默认值将被使用
9、接口
在 TypeScript 中,接口(interface)是一种强大的工具,用于定义对象的结构和类型。接口可以指定对象中应该包含哪些属性、方法以及它们的类型,从而增强代码的可读性和可维护性。
定义
可以使用interface关键字定义一个接口
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 30
};
可选属性
接口中的属性可以是可选的,使用 ? 来表示某个属性是可选的:
interface Person {
name: string;
age?: number; // age 是可选属性
}
const person1: Person = { name: "Bob" }; // 有效
const person2: Person = { name: "Alice", age: 25 }; // 也有效
只读属性
可以定义只读属性,使用 readonly 修饰符来确保这些属性不能被修改:
interface Person {
readonly id: number;
name: string;
}
const person: Person = { id: 1, name: "Alice" };
// person.id = 2; // 错误:不能修改只读属性
10、类型别名
在 TypeScript 中,类型别名(type alias)是一种用于给特定类型创建一个新名称的机制。通过类型别名,你可以简化复杂类型的使用,增加代码的可读性和可维护性。
定义
type StringOrNumber = string | number;
let value: StringOrNumber;
value = "Hello"; // 有效
value = 42; // 也有效
11、泛型
泛型允许你在编写代码时使用类型变量,提供更加灵活和可重用的组件。泛型使得函数、类和接口可以操作多种类型,而不需要事先确定具体的类型。
泛型函数
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello"); // 输出类型为 string
let output2 = identity<number>(42); // 输出类型为 number
泛型接口
interface GenericIdentityFn<T> {
(arg: T): T;
}
const myIdentity: GenericIdentityFn<number> = (arg) => arg;
console.log(myIdentity(10)); // 10
四、总结
TypeScript 的主要优势在于提供了强大的类型系统,使得代码更安全、更可维护,适合大型应用程序的开发。通过类型检查、接口和泛型等特性,开发者可以更有效地捕获错误,减少代码中的潜在问题。