TypeScript基础知识详解
本文详细介绍了TypeScript基础知识，包括类型系统、语法、数据类型、函数和类等核心概念。此外，文章还涵盖了接口、类型别名以及实用技巧等内容，帮助读者全面掌握TypeScript的使用。通过本文的学习，读者可以理解并应用TypeScript的各种高级特性，提升开发效率和代码质量。
TypeScript简介与安装TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集，也就是说，任何有效的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 增加了一些功能，如静态类型检查和面向对象的编程特性，使开发更加高效和可靠。
TypeScript安装TypeScript 可以通过多种方式进行安装，包括使用 npm（Node.js 包管理器）或直接下载最新版本。以下是使用 npm 安装 TypeScript 的步骤：
- 安装 Node.js 和 npm（如果尚未安装，请访问 Node.js 官方网站 并下载最新版本）。
- 打开命令行工具（如 Windows 的命令提示符、macOS 或 Linux 的终端）。
- 运行以下命令安装 TypeScript：
npm install -g typescript安装完成后，可以通过以下命令验证安装是否成功：
tsc -v它将输出你安装的 TypeScript 版本号。
创建TypeScript项目- 创建一个新的文件夹用于存放你的 TypeScript 项目文件：
mkdir my-ts-project cd my-ts-project - 在项目文件夹内创建一个
tsconfig.json文件，用于配置 TypeScript 编译器：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./node_modules"
]
}- 在
my-ts-project文件夹内创建一个src文件夹，并在其中添加一个名为index.ts的文件：
console.log("Hello, TypeScript!");- 编译 TypeScript 代码：
tsc这会将 src/index.ts 文件编译到 dist/index.js 文件，编译后的 JavaScript 文件将被放置在 dist 文件夹中。可以使用 Node.js 运行该文件：
node dist/index.jsTypeScript 语言的基本语法与 JavaScript 类似，但在类型系统方面有显著的差异。TypeScript 提供了各种内置数据类型，这些类型有助于编写更清晰、更可靠的代码。
变量与类型TypeScript 中有两种主要的变量声明方式：let 和 const。let 用于声明可修改的变量，const 用于声明不可修改的变量。为了确保类型安全，TypeScript 要求在声明变量时指定其类型。
基本类型
TypeScript 提供了以下基本类型：
number：表示数字类型，可以是整数或浮点数。string：表示字符串类型，用于存储文本。boolean：表示布尔类型，只有true和false两个值。null和undefined：分别表示空值和未定义值。void：表示没有返回值的函数。never：表示永远不会返回的函数或无法到达的表达式。any：表示类型是任意的，可以用于临时处理未定义类型的变量。
声明变量
在 TypeScript 中，可以通过 : 符号指定变量的类型。
let age: number = 25;
const name: string = "Alice";
let isStudent: boolean = true;
let noValue: null = null;
let undefinedValue: undefined = undefined;
let result: void = undefined; // 使用 void 类型时，通常将值设为 undefined
// 使用 any 类型
let flexibleValue: any = 42;
flexibleValue = "hello";在 TypeScript 中，可以指定数组中元素的类型。有两种方式声明数组类型：
- 使用
Array<T>：let numbers: Array<number> = [1, 2, 3]; - 使用
T[]：let strings: string[] = ["a", "b", "c"];
还可以使用泛型来声明数组类型，例如：
let arr: Array<number> = [1, 2, 3];
let arr2: number[] = [1, 2, 3];
// 使用泛型
function getArray<T>(items: T[]): T[] {
return items;
}
let numbers = getArray<number>([1, 2, 3]);
let strings = getArray<string>(["a", "b", "c"]);可以使用对象字面量和接口来指定对象的类型。以下是一个简单的示例：
interface Person {
name: string;
age: number;
}
let person: Person = {
name: "Alice",
age: 25
};联合类型
联合类型允许一个变量同时拥有多种类型。例如：
let value: number | string;
value = 42;
value = "Hello";类型推断
TypeScript 可以通过上下文推断变量类型。例如：
let value = "Hello"; // TypeScript 推断 value 为 string 类型TypeScript 中的函数可以具有类型注解，以便清晰地指定参数和返回值的类型。
函数定义函数定义的基本形式如下：
function add(a: number, b: number): number {
return a + b;
}TypeScript 支持可选参数和默认参数值。例如：
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}`;
}
console.log(greet("Alice")); // 输出 "Hello, Alice"
console.log(greet("Bob", "Hi")); // 输出 "Hi, Bob"剩余参数允许你传递任意数量的参数，这些参数会以数组的形式存在。
function sum(...numbers: number[]): number {
return numbers.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出 10函数重载允许你在同一个函数名称下定义多个函数签名。这在需要处理不同类型输入的情况下非常有用。
function printLength<T>(value: T): number;
function printLength(value: string[]): void;
function printLength<T>(value: T): number | void {
if (Array.isArray(value)) {
console.log(value.length);
} else {
return value.length;
}
}
console.log(printLength("Hello")); // 输出 5
printLength(["a", "b", "c"]); // 输出 3TypeScript 中的类支持面向对象编程的关键特性，如构造函数、属性、方法以及继承。
定义类定义一个类的基本形式如下：
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet(): string {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}TypeScript 支持类的继承。子类可以继承父类的属性和方法，并可以覆盖父类的方法。
class Student extends Person {
grade: number;
constructor(name: string, age: number, grade: number) {
super(name, age);
this.grade = grade;
}
greet(): string {
return `${super.greet()} I am in grade ${this.grade}.`;
}
}
let alice = new Student("Alice", 25, 10);
console.log(alice.greet()); // 输出 "Hello, my name is Alice and I am 25 years old. I am in grade 10."抽象类是一种不能被实例化的类，它用于定义其他类的通用结构。抽象类中的抽象方法必须在子类中实现。
abstract class Animal {
abstract makeSound(): void;
}
class Dog extends Animal {
makeSound(): void {
console.log("Woof!");
}
}
let dog = new Dog();
dog.makeSound(); // 输出 "Woof!"接口和类型别名是 TypeScript 中定义数据结构的重要工具。接口用于定义对象的结构，而类型别名则用于创建类型别名。
接口定义接口定义对象的结构。例如：
interface Person {
name: string;
age: number;
}
let alice: Person = {
name: "Alice",
age: 25
};接口还可以用于定义函数的形状：
interface AddFunction {
(a: number, b: number): number;
}
let add: AddFunction = function (a: number, b: number): number {
return a + b;
};类可以实现接口，确保类符合接口定义的结构：
interface Person {
name: string;
age: number;
greet(): string;
}
class Student implements Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet(): string {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
let alice = new Student("Alice", 25);
console.log(alice.greet()); // 输出 "Hello, my name is Alice and I am 25 years old."类型别名允许你为一个类型定义一个新名称：
type Name = string;
let name: Name = "Alice";
type Options = { verbose: boolean };
let options: Options = { verbose: true };装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数。装饰器使用 @ 符号，并且可以接受一个参数。
类装饰器用于修改或增强类的行为：
function logClass(target: Function) {
console.log(`Class ${target.name} is being created.`);
}
@logClass
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}
// 输出 "Class Person is being created."方法装饰器用于修改或增强方法的行为：
function logMethod(target: any, name: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${name} with`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
class Person {
@logMethod
greet(name: string) {
console.log(`Hello, ${name}`);
}
}
let alice = new Person();
alice.greet("Bob"); // 输出 "Calling greet with" 和 "Hello, Bob"属性装饰器用于修改或增强属性的行为：
function readonly(target: any, name: string) {
let value = target[name];
let descriptor: PropertyDescriptor = {
get() {
return value;
},
set(newValue: any) {
throw new Error("Can't modify a readonly property");
}
};
Object.defineProperty(target, name, descriptor);
}
class Person {
@readonly
name: string;
constructor(name: string) {
this.name = name;
}
}
let alice = new Person("Alice");
console.log(alice.name); // 输出 "Alice"
alice.name = "Bob"; // 抛出错误 "Can't modify a readonly property"类型断言
类型断言允许你手动指定一个值的类型，即使这个值的实际类型可能不符合这个类型。这在需要向后兼容现有代码或者需要临时忽略类型检查时很有用。
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;泛型
泛型提供了编写可重用代码的能力，允许函数或类在定义时使用类型参数，而在使用时指定具体的类型。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // 输出 "myString"接口合并
可以将多个接口合并为一个接口，这有助于代码的组织和重用：
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square = {} as Square;
square.color = "blue";
square.sideLength = 10;模块系统
TypeScript 支持多种模块系统，包括 CommonJS 和 ES6 模块。可以在 tsconfig.json 文件中指定模块系统。
{
"compilerOptions": {
"module": "commonjs",
"target": "ES6",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./node_modules"
]
}TypeScript 是一种强大的编程语言，它在 JavaScript 的基础上增加了静态类型检查和面向对象的编程特性。通过本文的介绍，你应该已经掌握了 TypeScript 的基本语法和一些高级特性。为了进一步提高你的 TypeScript 技能，建议继续学习 TypeScript 的其他高级特性，例如泛型、装饰器和模块系统，并在实际项目中应用这些知识。
如果你在学习过程中遇到任何问题，可以参考 TypeScript 的官方文档或加入相关社区寻求帮助。此外，你可以在 慕课网 上找到更多关于 TypeScript 的教程和示例项目。
// 示例：使用泛型定义函数
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // 输出 "myString"共同学习，写下你的评论
评论加载中...
作者其他优质文章
