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:表示布尔值,只能是 truefalse
  4. nullundefined:表示空值和未定义值。
  5. any:表示任意类型,不进行类型检查,一般用于旧代码的迁移或与动态语言交互。
  6. void:表示没有返回值的函数。
  7. never:表示永远不存在的值的类型,例如抛出异常或无限循环的函数。

此外,TypeScript 还支持以下复合类型:

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

TypeScript变量声明有如下语法:

  1. 声明变量并指定类型:
let variableName: type;

例如:

let x: number;
  1. 声明变量并初始化:
let variableName: type = value;

例如:

let x: number = 10;
  1. 声明多个变量:
let variable1: type1, variable2: type2, ..., variablen: typen;

例如:

let x: number, y: string, z: boolean;
  1. 声明常量:
const constantName: type = value;

例如:

const PI: number = 3.14;
  1. 声明函数参数和返回值类型:
function functionName(parameterName: parameterType): returnType {
    // function body
}

例如:

function add(x: number, y: number): number {
    return x + y;
}
  1. 类属性和方法参数声明:
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 类型在实现通用函数和库等需要处理各种类型的场景中非常有用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶落风尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值