TypeScript 学习笔记(一):基础概述与类型系统

admin2024-06-01  21

1. 引言

TypeScript 是由微软开发的一种开源编程语言,旨在扩展 JavaScript 的功能。它增加了静态类型定义,从而提升代码的可读性、可维护性和开发效率。本系列学习笔记将带你从基础到高级逐步掌握 TypeScript 的核心概念和应用。

2. TypeScript 的安装与配置

2.1 安装 TypeScript

要开始使用 TypeScript,首先需要安装它。你可以通过 npm(Node Package Manager)来安装 TypeScript:

npm install -g typescript

安装完成后,可以通过 tsc 命令检查是否安装成功:

tsc --version

2.2 创建 TypeScript 项目

我们可以通过以下步骤创建一个简单的 TypeScript 项目:

  1. 创建一个项目文件夹:
mkdir typescript-demo
cd typescript-demo
  1. 初始化一个新的 package.json 文件:
npm init -y
  1. 安装 TypeScript 和 ts-node:
npm install typescript ts-node --save-dev
  1. 创建一个 tsconfig.json 文件用于配置 TypeScript 编译选项:
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}
  1. 在项目根目录创建 src 文件夹,并在其中创建第一个 TypeScript 文件 index.ts

3. TypeScript 基础

3.1 类型注解

TypeScript 的核心是类型系统。通过类型注解,我们可以在代码中明确地指定变量、函数参数和返回值的类型。

// 变量类型注解
let isDone: boolean = true;
let decimal: number = 6;
let color: string = "blue";

// 数组类型注解
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];

// 元组类型注解
let x: [string, number];
x = ["hello", 10];

// 枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 任意类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

// 空值类型
let unusable: void = undefined;

3.2 接口

接口用于定义对象的类型。它可以用来描述对象的结构,例如属性和方法。

interface Person {
    firstName: string;
    lastName: string;
    age?: number; // 可选属性
}

function greet(person: Person) {
    return `Hello, ${person.firstName} ${person.lastName}`;
}

let user = { firstName: "John", lastName: "Doe" };
console.log(greet(user));

3.3 类

TypeScript 提供了对类的支持,包括继承、封装和多态性。

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

let dog = new Dog("Buddy");
dog.bark();
dog.move(10);

3.4 函数

TypeScript 中的函数可以为参数和返回值定义类型。它还支持可选参数和默认参数。

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

let myAdd = function(x: number, y: number): number { return x + y; };

function buildName(firstName: string, lastName: string = "Smith"): string {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");

4. TypeScript 编译

TypeScript 文件需要编译成 JavaScript 才能在浏览器或 Node.js 环境中运行。使用 tsc 命令可以将 TypeScript 文件编译为 JavaScript 文件。

tsc src/index.ts

编译后,会生成一个与源文件同名的 JavaScript 文件(index.js),可以直接运行这个文件。

5. 总结

在本篇学习笔记中,我们了解了 TypeScript 的基本概念和一些核心功能。我们从安装 TypeScript 开始,逐步介绍了类型注解、接口、类和函数的使用。下一篇学习笔记将深入探讨更复杂的类型系统以及一些高级特性。

希望你能继续关注本系列的学习笔记,逐步掌握 TypeScript 的强大功能和最佳实践。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!