您现在的位置是：首页 >技术杂谈 >TypeScript学习总结（一）网站首页技术杂谈

typescript简介

TypeScript是 JavaScript 的超集，可以为 JavaScript 代码添加静态类型检查。TypeScript 提供了一些 JavaScript 所没有的特性，例如接口、枚举、类和命名空间等，并且能够通过类型注解来提高代码的可读性和可维护性。
TypeScript 的设计目标之一是提高大型应用程序的可维护性。因为在大型应用中，JavaScript 代码往往变得复杂，难以理解和修改。TypeScript 能够帮助开发者在开发过程中更早地发现潜在的错误，从而减少调试时间和成本。同时，TypeScript 还提供了完整的文档和工具支持，使得整个开发过程更加高效和优化。TypeScript 可以被编译成 JavaScript，因此它可以运行在任何支持 JavaScript 的环境中，包括浏览器和 Node.js 等平台。另外，TypeScript 还能够与各种 JavaScript 库和框架（如React、Angular 和 Vue.js 等）无缝集成，为开发者提供了更好的选择和灵活性。

优缺点

TypeScript 的优点与缺点：

优点：

1. 类型检查能力：TypeScript 提供了静态类型检查，可以在编译时捕获许多常见的错误，并提高代码质量与可维护性。
2. 更好的协作开发：TypeScript 可以帮助开发者更轻松地理解和阅读他人编写的代码，减少沟通成本。
3. 适用于大型项目：TypeScript 支持模块化编程和命名空间，可以规范化和简化庞大的项目开发，并提高代码可重用性。
4. 对旧版 JavaScript 的兼容性：TypeScript 能够编译成支持包括 ES3、ES5、ES6等不同版本的 JavaScript 代码，因此它也是现有 JavaScript 项目的一个很好的升级选择。

缺点：

1. 学习曲线：TypeScript 在一些方面比 JavaScript 更复杂，需要花费一定时间学习。
2. 编译时间较长：TypeScript 需要先编译成 JavaScript 才能运行，因此它的编译时间相对较长。
3. 额外的开销：TypeScript 需要消耗额外的计算资源来进行类型检查和语法分析，可能会导致运行速度变慢。
4. 可能需要更多的注释：TypeScript 需要在代码中显式地指定变量类型等信息，而这些信息并不会自动推导出来，因此开发者可能需要写更多的注释。

TypeScript 和 JavaScript 的区别

TypeScript 和 JavaScript 是两种不同的编程语言，虽然它们有很多相似之处，但也有一些重要的区别。

1. 类型系统：TypeScript 是一种静态类型语言，可以在编码期间检测出类型错误，而 JavaScript 是一种动态类型语言，只能在运行时发现类型错误。

2. 扩展功能：TypeScript 对 JavaScript 进行了扩展，包括类、接口、枚举、泛型等特性，这些特性使得 TypeScript 更适合大型项目的开发。

3. 编译：TypeScript 需要通过编译器将 TypeScript 代码转换为 JavaScript 代码，而 JavaScript 不需要编译。

4. 生态系统：JavaScript 拥有更广泛的生态系统和更多的第三方库和框架，但是 TypeScript 也可以使用这些库和框架，并且 TypeScript 自身也有很多优秀的库和框架。

5. 学习曲线：由于 TypeScript 引入了静态类型概念以及其他新特性，相对于 JavaScript 来说学习曲线较陡峭，需要花费更多的时间学习 TypeScript 的语法和概念。

基本类型和变量声明

TypeScript 中的基本类型

TypeScript 中的基本类型包括：

1. number：表示数值，可以是整数或浮点数。
2. string：表示字符串。
3. boolean：表示布尔值，只能是 true 或 false。
4. null 和 undefined：表示空值和未定义值。
5. any：表示任意类型，不进行类型检查，一般用于旧代码的迁移或与动态语言交互。
6. void：表示没有返回值的函数。
7. never：表示永远不存在的值的类型，例如抛出异常或无限循环的函数。

此外，TypeScript 还支持以下复合类型：

1. 数组类型：使用方括号 [] 表示，例如 number[] 表示由数字组成的数组。
2. 元组类型：表示固定长度和类型的数组，例如 [string, number] 表示由一个字符串和一个数字组成的数组。
3. 枚举类型：表示具名常量的集合，例如 enum Color { Red, Green, Blue } 表示颜色的枚举类型，其中 Red 的值为 0，Green 的值为 1，Blue 的值为 2。
4. 对象类型：表示具有特定属性和属性类型的对象，例如 { name: string, age: number } 表示具有 name 和 age 属性的对象，其中 name 的类型为字符串，age 的类型为数字。
5. 函数类型：表示函数的参数类型和返回值类型，例如 (a: number, b: number) => number 表示接受两个数字型参数并返回一个数字的函数。

TypeScript变量声明语法

TypeScript变量声明有如下语法：

1. 声明变量并指定类型：

let variableName: type;

例如：

let x: number;

2. 声明变量并初始化：

let variableName: type = value;

例如：

let x: number = 10;

3. 声明多个变量：

let variable1: type1, variable2: type2, ..., variablen: typen;

例如：

let x: number, y: string, z: boolean;

4. 声明常量：

const constantName: type = value;

例如：

const PI: number = 3.14;

5. 声明函数参数和返回值类型：

function functionName(parameterName: parameterType): returnType {
    // function body
}

例如：

function add(x: number, y: number): number {
    return x + y;
}

6. 类属性和方法参数声明：

class ClassName {
    propertyName: type;
    constructor(parameterName: parameterType) {
        this.propertyName = parameterName;
    }
    methodName(parameterName: parameterType): returnType {
        // method body
    }
}

例如：

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    introduce(): void {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

类型注解和类型推断

类型注解是在变量、函数、类等对象声明时直接指定其类型，例如：

let myString: string = "Hello World";
function add(a: number, b: number): number {
    return a + b;
}
class Person {
    name: string;
    age: number;
}

类型注解可以帮助开发者避免一些类型相关的错误，提高代码可读性和可维护性。但是当类型注解过于复杂或冗长时，代码可读性反而会下降。

类型推断是通过分析变量赋值、函数返回值等上下文信息自动推断出变量、函数、类等对象的类型，例如：

let myNumber = 42; // 推断类型为 number
const myArray = [1, 2, 3]; // 推断类型为 Array<number>
function multiply(a: number, b: number) {
    return a * b; // 推断返回值类型为 number
}

类型推断可以简化代码实现，减少手动类型注解的工作量，但是如果类型推断不准确或有歧义，可能会导致代码错误或不易理解。

在实践中，通常会结合使用类型注解和类型推断，以达到代码简洁、可读性高、类型安全的目标。

any 类型和 unknown 类型

any 类型和 unknown 类型都是 TypeScript 中的顶级类型，但它们有不同的用途和行为。

any 类型表示任何类型。如果将一个变量定义为 any 类型，则可以在该变量上执行任何操作，而不需要进行编译时检查或运行时检查。这使得 any 类型非常灵活，但也很危险，因为它可能导致类型错误和难以调试的代码。因此，在大多数情况下，应尽可能避免使用 any 类型。

unknown 类型表示未知类型。当您不确定变量的类型时，可以将其定义为 unknown 类型。与 any 类型不同，unknown 类型不能直接进行任何操作，因为编译器不知道它的确切类型。要在 unknown 类型上执行操作，您必须先将其显式转换为具体的类型。 这种强制转换保证了类型安全，并使代码更易于维护和理解。因此，unknown 类型在实现通用函数和库等需要处理各种类型的场景中非常有用。