什么是 TypeScript
定义和背景
TypeScript 是由微软开发并维护的一种开源编程语言。它被称为 JavaScript 的超集，这意味着所有合法的 JavaScript 代码在 TypeScript 中同样合法。TypeScript 增加了静态类型、类和接口等特性，旨在提高代码的可维护性和可读性，特别是在大型项目中。TypeScript 的设计目标是让开发者能够在编写代码时发现潜在的错误，并且在使用现代 JavaScript 特性的同时能够更好地组织和管理代码。
安装和基本设置步骤
安装 TypeScript 很简单，只需使用 npm（Node 包管理器）即可。
-
安装 Node.js 和 npm 首先，需要确保你已经安装了 Node.js 和 npm。你可以从 Node.js 官方网站下载并安装。
-
安装 TypeScript 编译器 在命令行中运行以下命令来全局安装 TypeScript 编译器：
复制代码npm install -g typescript -
创建一个 TypeScript 文件 新建一个名为
hello.ts的文件，并添加以下代码：javascript复制代码function greet(name: string) { return `Hello, ${name}!`; } console.log(greet("World")); -
编译 TypeScript 文件 使用 TypeScript 编译器将
hello.ts编译为 JavaScript 文件：复制代码tsc hello.ts这将在同一目录下生成一个
hello.js文件，内容如下：javascript复制代码function greet(name) { return "Hello, " + name + "!"; } console.log(greet("World"));
TypeScript 的主要特性
静态类型检查
TypeScript 的核心特性之一是静态类型检查。与 JavaScript 不同，TypeScript 可以在编译时检测类型错误，这有助于在早期发现并修复潜在的问题。
ini
复制代码
let isDone: boolean = false;
let age: number = 25;
let userName: string = "John";
基本类型、接口和类型别名
TypeScript 提供了多种基本类型以及定义复杂类型的机制。
-
基本类型
ini复制代码let isDone: boolean = false; let age: number = 25; let userName: string = "John"; -
接口 接口用于定义对象的结构。
css复制代码interface Person { firstName: string; lastName: string; age: number; } let user: Person = { firstName: "John", lastName: "Doe", age: 30 }; -
类型别名 类型别名用于给类型起一个新名字。
ini复制代码type StringOrNumber = string | number; let sample: StringOrNumber; sample = "Hello"; sample = 123;
类和对象
TypeScript 支持面向对象编程，包括类和继承等特性。
typescript
复制代码
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance} meters.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog("Rex");
dog.bark();
dog.move(10);
模块和命名空间
模块和命名空间用于组织和封装代码。
-
模块 模块是外部的，可以导入和导出。
typescript复制代码// utils.ts export function add(a: number, b: number): number { return a + b; } // main.ts import { add } from './utils'; console.log(add(2, 3)); -
命名空间 命名空间是内部的，用于逻辑分组。
arduino复制代码namespace Utility { export function log(message: string) { console.log(message); } } Utility.log("Hello, TypeScript!");
泛型
泛型用于创建可复用的组件。
ini
复制代码
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("myString");
let output2 = identity<number>(100);
异步编程支持
TypeScript 支持现代 JavaScript 的异步编程模式，包括 async/await 语法。
javascript
复制代码
function delay(ms: number) {
return new Promise<void>(resolve => setTimeout(resolve, ms));
}
async function asyncCall() {
console.log("Waiting...");
await delay(1000);
console.log("Done!");
}
asyncCall();
TypeScript 与 JavaScript 的区别
主要区别和优劣势对比
TypeScript 和 JavaScript 的主要区别在于类型系统。TypeScript 是强类型或静态类型的，而 JavaScript 是弱类型或动态类型的。
-
静态类型： TypeScript 在编译时检查类型，发现错误。
ini复制代码let isDone: boolean = false; // isDone = 123; // Error: Type 'number' is not assignable to type 'boolean' -
动态类型： JavaScript 只有在运行时才会发现类型错误。
ini复制代码let isDone = false; isDone = 123; // No error until runtime
迁移 JavaScript 代码到 TypeScript 的方法和注意事项
将现有的 JavaScript 项目迁移到 TypeScript 可以逐步进行：
-
重命名文件： 将
.js文件重命名为.ts文件。 -
添加类型注解： 在代码中逐步添加类型注解。
javascript复制代码function greet(name: string) { return `Hello, ${name}!`; } -
配置 TypeScript 编译器： 创建一个
tsconfig.json文件，配置 TypeScript 编译选项。json复制代码{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "esModuleInterop": true } } -
逐步引入类型检查： 使用
any类型逐步进行迁移，减少初期的编译错误。ini复制代码let someValue: any = "this is a string";
编译器的工作原理和选项
TypeScript 编译器 (tsc) 将 TypeScript 代码编译为 JavaScript 代码，并支持多种编译选项。
-
基本编译命令：
复制代码tsc filename.ts -
配置文件 (
tsconfig.json) ： 配置文件用于指定编译选项。json复制代码{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "outDir": "./dist" }, "include": ["src/**/*"] }
与常见框架和库的集成
TypeScript 与流行的 JavaScript 框架和库（如 React, Vue）紧密集成。
-
React： 使用
create-react-app创建 TypeScript 项目。lua复制代码npx create-react-app my-app --template typescript -
Vue： Vue CLI 支持创建 TypeScript 项目。
lua复制代码vue create my-vue-app
如有侵权请联系站点删除！
