前言
TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集,添加了静态类型、类、接口和泛型等特性。这些特性使得TypeScript在大型项目中具有更好的可维护性和可扩展性。本文将对TypeScript的基础语法进行详细讲解,帮助读者快速入门。
变量与类型
TypeScript的核心特性之一就是静态类型系统。这意味着在声明变量时,我们可以为其指定一个类型,这样TypeScript编译器就可以在编译时检查类型错误。
例如:let msg:string=‘hello world’ 其中:let为声明变量的关键字,const则代表常量, msg为变量名,是自定义的 string是变量的数据类型
常见的类型有:
string
:字符串,可以用单引号或者双引号
let greeting: string = "Hello, World!";
let quote: string = 'To be or not to be, that is the question.';
number
:数值、整数、浮点数都可以
let age: number = 30;
let price: number = 19.99;
any
:不确定类型,可以是任意类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
- union
:联合类型,可以是多个指定类型中的一种
let greet: string | number;
greet = "Hello"; // OK
greet = 42; // OK
// greet = true; // Error, boolean is not string or number
Object
:对象(注意:在TypeScript中,使用 {} 来表示一个空对象类型,而 Object 实际上指向的是非原始类型)
let person: object = {
name: "Alice",
age: 25
};
Array
:数组、元素可以是任意其他类型
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["red", "green", "blue"];
let mixed: (number | string)[] = [1, "two", 3, "four"];
注意,对于 object 类型,实际上在TypeScript中,使用 {} 来定义一个空对象类型可能更加精确,因为它不会接受原始值(如 string、number 等)。而 Object 类型在TypeScript中是一个特殊的类型,它是所有类型的超类型,包括原始类型。因此,使用 Object 类型作为变量类型时,可以为其分配任何类型的值。
在定义数组时,我们通常使用类型后跟方括号的语法,例如 number[] 表示数字数组。如果需要数组中的元素可以是多种类型,可以使用联合类型,例如 (number | string)[] 表示数组中的元素可以是数字或字符串。
函数
在TypeScript中,我们可以为函数参数和返回值指定类型。这有助于我们在编写函数时明确函数的输入和输出,从而提高代码的可读性和可维护性。 如下,我们定义了一个名为greeter的函数,它接受一个string类型的参数person,并返回一个string类型的结果。然后,我们调用这个函数并传入一个字符串变量user作为参数。 注意:在TypeScript中,空字符串、数字0、null、undefined都被认为是false,其它值则为true。
代码语言:javascript复制function greeter(person: string): string {
return "Hello, " person;
}
let user = "Jane";
console.log(greeter(user));
类与接口
在 TypeScript 中,类和接口是面向对象编程的两个核心概念。类(Class)是一种用户自定义的数据类型,它包含属性和方法,可以用来创建对象。接口(Interface)定义了一个对象的结构,它规定了一个对象应该有哪些属性和方法,但不提供具体的实现。
类(Class)
在这个 Animal 类中: name 是一个属性,用来存储动物的名字。 constructor 是类的构造函数,用于创建类的实例,并初始化 name 属性。 move 是一个方法,用于描述动物移动的行为。注意,move 方法有一个默认参数 distanceInMeters,其默认值为 0。
代码语言:javascript复制class Animal {
name: string; // 类的属性
constructor(theName: string) { // 类的构造函数
this.name = theName; // 在构造函数中初始化属性
}
move(distanceInMeters: number = 0) { // 类的方法
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
接口(Interface)
Person 接口定义了一个对象应该具有 firstName 和 lastName 两个属性,并且这两个属性都是字符串类型。
代码语言:javascript复制interface Person {
firstName: string; // 接口的属性
lastName: string; // 接口的属性
}
函数与接口的使用
greeter 函数接受一个参数 person,该参数的类型是 Person 接口。这意味着任何传递给 greeter 函数的对象都必须具有 firstName 和 lastName 属性。
代码语言:javascript复制function greeter(person: Person) { // 函数接受一个符合Person接口的对象
return "Hello, " person.firstName " " person.lastName; // 使用接口的属性
}
对象的创建与函数的使用
这里创建了一个对象 user,它符合 Person 接口的规范(即具有 firstName 和 lastName 属性)。然后,我们将 user 对象传递给 greeter 函数,并打印返回的问候字符串。
代码语言:javascript复制let user = { firstName: "Jane", lastName: "User" }; // 创建一个符合Person接口的对象
console.log(greeter(user)); // 调用greeter函数并打印结果
泛型
在 TypeScript 中,泛型(Generics)是一种创建可重用组件的方式,这些组件可以处理多种数据类型,而不是单一的数据类型。泛型允许我们定义函数、接口或类,其中的类型参数可以在使用这些组件时指定。这使得代码更加灵活和可维护,因为我们可以编写一次代码,然后在多种数据类型上重复使用。
如下例子:identity 函数是一个泛型函数,它接受一个类型为 T 的参数,并返回相同类型的值。这里的 T 是一个类型参数,它代表了在函数被调用时可以指定的任意类型。 让我们详细分析一下这个代码:
代码语言:javascript复制function identity<T>(arg: T): T {
return arg;
}
在上面的代码中:
< T>
:定义了类型参数 T。这告诉 TypeScript,我们打算在函数中使用一个或多个类型作为参数。
arg: T
:函数参数 arg 的类型被指定为 T,意味着它可以是任何类型。
return arg;
:函数返回与参数相同的值,其类型也是 T。
接着,创建了一个 myIdentity 变量,并将 identity 函数赋值给它。这里使用了另一种语法来指定泛型类型参数。
let myIdentity: <T>(arg: T) => T = identity;
这里,myIdentity 的类型被定义为接受一个类型为 T 的参数并返回相同类型的函数。它实际上是对 identity 函数的一个引用,因此我们可以通过 myIdentity 来调用 identity 函数。 最后使用 myIdentity 函数来处理不同类型的值:
代码语言:javascript复制console.log(myIdentity<string>("hello")); // 输出 "hello"
console.log(myIdentity<number>(42)); // 输出 42
myIdentity< string>(“hello”):在这里,显式地指定了 T 为 string 类型,并传递了一个字符串 “hello” 作为参数。函数返回这个字符串,并输出到控制台。 myIdentity< number>(42):类似地,指定了 T 为 number 类型,并传递了一个数字 42。函数返回这个数字,并输出到控制台。
总结
今日之学习篇章已然落笔,愿诸君有所收获。