首页手记初学者指南：轻松入门TS编程

初学者指南：轻松入门TS编程

标签：

Typescript

概述

TypeScript（简称TS）是一种由微软开发的开源编程语言，它是JavaScript的超集并提供了额外的功能，如静态类型检查和高级类型系统。本文将详细介绍TS的安装步骤、环境配置、基础语法、类与接口、泛型、编译与调试，并通过实战演练帮助读者掌握TS的使用。

TS简介与安装

什么是TS

TypeScript（简称TS）是由微软开发的一款开源编程语言。它是JavaScript的超集，任何有效的JavaScript代码也是有效的TypeScript代码。然而，TypeScript提供了额外的功能，如静态类型检查和高级类型系统，这些功能可以让开发者更好地组织和管理代码。

TypeScript的主要目标是为大型项目提供更好的工具支持，提高开发效率和代码质量。它支持ES6+的许多新特性，并允许开发者提前发现潜在的错误。

TS安装步骤

安装Node.js

首先，您需要安装Node.js。Node.js包含了一个包管理器npm，它可以帮助您安装TypeScript。

访问Node.js官方网站（https://nodejs.org/）并下载最新版本的LTS版本。
安装完成后，打开命令行工具，检验安装是否成功。输入以下命令：

node -v
npm -v

确保两个命令都能正常输出版本信息。

安装TypeScript

使用Node.js的包管理器npm安装TypeScript。打开命令行工具，在命令行中输入以下命令：

npm install -g typescript

安装完成后，可以通过以下命令来检验是否安装成功：

tsc -v

如果安装成功，将会显示TypeScript的版本号。

TS环境配置

创建项目

创建一个新的文件夹，用于存放您的TypeScript项目。例如：

mkdir my-ts-project
cd my-ts-project

在项目文件夹内，使用以下命令初始化一个新的npm项目：

npm init -y

这将会创建一个package.json文件，并配置一些默认设置。

安装TypeScript依赖

在项目根目录下，使用npm安装TypeScript作为项目依赖：

npm install typescript

还需要安装一些编译工具，例如ts-node，它允许直接运行TypeScript文件。

npm install ts-node --save-dev

配置tsconfig.json

在项目根目录下创建一个tsconfig.json文件，该文件用于配置TypeScript编译器的选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

在tsconfig.json文件中，您可以配置输出目标、模块类型、是否启用严格模式等选项。

创建文件结构

在项目根目录下创建一个src文件夹，并在其中创建一个index.ts文件。您的项目结构应该如下所示：

my-ts-project/
│
├── src/
│   └── index.ts
├── package.json
├── tsconfig.json
└── node_modules/

TS基础语法

数据类型

TypeScript支持多种内置数据类型，包括基本类型和复合类型。以下是一些常见的基本类型：

number：表示数字。
string：表示字符串。
boolean：表示布尔值。
symbol：表示唯一的、不可变的值。
undefined 和 null：表示未定义和空值。
any：表示任何类型。
void：表示没有返回值。

下面是一个示例代码，展示了如何声明不同类型的数据：

let num: number = 42;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let sym: symbol = Symbol("unique");
let undef: undefined = undefined;
let nullVal: null = null;
let anyVal: any = "Hello";
let noReturn: void = undefined;

变量与常量

变量声明

使用 let 关键字声明变量，变量的值可以在运行时修改。

let message: string = "Hello, TS!";
message = "Hello, TypeScript!";

常量声明

使用 const 关键字声明常量，常量的值一旦初始化就不能改变。

const PI: number = 3.14;
// PI = 3.15; // Error: Cannot assign to 'PI' because it is a constant or a read-only property.

提前声明

有时您可能想要在代码的其他部分之前使用某个变量。可以使用 declare 关键字进行提前声明。

declare let message: string;

message = "Hello, TS!";

函数定义

函数声明

函数可以使用 function 关键字进行声明。语法如下：

function addNumbers(a: number, b: number): number {
    return a + b;
}

函数表达式

函数也可以作为表达式：

let addNumbers = function(a: number, b: number): number {
    return a + b;
};

可选参数

您可以使用 ? 符号声明可选参数。

function greet(name: string, message?: string) {
    console.log(`Hello, ${name}!`);
    if (message) {
        console.log(`Message: ${message}`);
    }
}

greet("Alice");
greet("Bob", "How are you?");

默认参数

您可以为函数参数提供默认值。

function greet(name: string, message: string = "Nice to meet you") {
    console.log(`Hello, ${name}!`);
    console.log(`Message: ${message}`);
}

greet("Alice");
greet("Bob", "How are you?");

返回类型

函数可以有返回类型，也可以没有返回类型（即返回 void）。

function add(a: number, b: number): number {
    return a + b;
}

function logMessage(message: string): void {
    console.log(message);
}

严格模式

TypeScript有严格模式，确保代码是类型安全的。在 tsconfig.json 中启用严格模式：

{
  "compilerOptions": {
    "strict": true
  }
}

类型推断

TypeScript可以自动推断变量类型：

let num = 42;
let str = "Hello, TS!";
let bool = true;

类与接口

类的定义与使用

定义类

使用 class 关键字定义类。类可以有属性和方法。

class Person {
    name: string;
    age: number;

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

实例化类

创建类的实例，通过类名后跟括号传递参数。

let person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice and I'm 25 years old.

静态属性和方法

在类中使用 static 关键字定义静态属性和方法。

class MathUtil {
    static PI = 3.14;

    static square(value: number) {
        return value * value;
    }
}

console.log(MathUtil.PI); // 输出: 3.14
console.log(MathUtil.square(5)); // 输出: 25

接口的定义与使用

定义接口

使用 interface 关键字定义接口。接口可以有属性和方法。

interface Person {
    name: string;
    age: number;
    greet(): void;
}

实现接口

通过实现接口来定义类或对象。

class Employee implements Person {
    name: string;
    age: number;

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

let employee = new Employee("Bob", 35);
employee.greet(); // 输出: Hello, my name is Bob and I'm 35 years old.

可选属性

在接口中使用 ? 符号声明可选属性。

interface Person {
    name: string;
    age?: number;
}

let person: Person = { name: "Alice" };
console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: undefined

读取属性

使用 readonly 关键字声明只读属性。

interface Person {
    readonly name: string;
}

let person: Person = { name: "Alice" };
person.name = "Bob"; // Error: Cannot assign to 'name' because it is a constant or a read-only property.

属性类型

在接口中可以声明属性类型。

interface Person {
    name: string;
    age: number;
    job?: string;
}

let person: Person = { name: "Alice", age: 25, job: "Engineer" };
console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25
console.log(person.job); // 输出: Engineer

方法类型

接口中可以声明方法的返回类型和参数类型。

interface Person {
    name: string;
    age: number;
    greet(): string;
}

class Employee 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'm ${this.age} years old.`;
    }
}

let employee = new Employee("Bob", 35);
console.log(employee.greet()); // 输出: Hello, my name is Bob and I'm 35 years old.

属性初始化

在接口中可以声明属性的初始化值。

interface Person {
    name: string;
    age: number;
    job: string;
}

let person: Person = { name: "Alice", age: 25, job: "Engineer" };
console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25
console.log(person.job); // 输出: Engineer

接口扩展

使用 extends 关键字扩展接口。

interface Employee extends Person {
    salary: number;
}

let employee: Employee = { name: "Bob", age: 35, job: "Engineer", salary: 50000 };
console.log(employee.name); // 输出: Bob
console.log(employee.age); // 输出: 35
console.log(employee.job); // 输出: Engineer
console.log(employee.salary); // 输出: 50000

函数类型

接口中可以定义函数的返回类型和参数类型。

interface SquareConfig {
    color?: string;
    width?: number;
    draw: (config: SquareConfig) => void;
}

let squareConfig: SquareConfig = {
    color: "blue",
    width: 10,
    draw: (config: SquareConfig) => {
        console.log(`Drawing a square with color ${config.color} and width ${config.width}.`);
    }
};

squareConfig.draw(squareConfig); // 输出: Drawing a square with color blue and width 10.

接口与类

接口可以用于描述类的结构。

interface Person {
    name: string;
    age: number;
    greet(): string;
}

class Employee 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'm ${this.age} years old.`;
    }
}

let employee: Person = new Employee("Bob", 35);
console.log(employee.greet()); // 输出: Hello, my name is Bob and I'm 35 years old.

接口与函数

接口也可以用来定义函数的类型。

interface SquareConfig {
    color?: string;
    width?: number;
}

function drawSquare(config: SquareConfig): void {
    console.log(`Drawing a square with color ${config.color} and width ${config.width}.`);
}

drawSquare({ color: "blue", width: 10 }); // 输出: Drawing a square with color blue and width 10.

接口与类的属性

在接口中可以定义类的属性。

interface Person {
    name: string;
    age: number;
}

class Employee implements Person {
    name: string;
    age: number;

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

let employee: Person = new Employee("Bob", 35);
console.log(employee.name); // 输出: Bob
console.log(employee.age); // 输出: 35

接口与类的方法

在接口中可以定义类的方法。

interface Person {
    name: string;
    age: number;
    greet(): string;
}

class Employee 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'm ${this.age} years old.`;
    }
}

let employee: Person = new Employee("Bob", 35);
console.log(employee.greet()); // 输出: Hello, my name is Bob and I'm 35 years old.

接口与函数的参数类型

在接口中可以定义函数的参数类型。

interface SquareConfig {
    color?: string;
    width?: number;
}

function drawSquare(config: SquareConfig): void {
    console.log(`Drawing a square with color ${config.color} and width ${config.width}.`);
}

drawSquare({ color: "blue", width: 10 }); // 输出: Drawing a square with color blue and width 10.

接口与函数的返回类型

在接口中可以定义函数的返回类型。

interface SquareConfig {
    color?: string;
    width?: number;
}

function drawSquare(config: SquareConfig): string {
    return `Drawing a square with color ${config.color} and width ${config.width}.`;
}

console.log(drawSquare({ color: "blue", width: 10 })); // 输出: Drawing a square with color blue and width 10.

泛型

泛型的概念

泛型是一种编程技术，允许您在定义函数、接口或类时使用类型参数。这可以让代码更加灵活和复用。以下是泛型的一些关键概念：

类型参数：在定义泛型时使用的占位符类型。
类型参数化：使用类型参数来声明函数、接口或类。
类型参数的约束：限制类型参数可以接受的类型范围。

定义泛型类型

在定义泛型类型时，使用 <T> 这样的类型参数。

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Hello, TS!");
console.log(output); // 输出: Hello, TS!

通配符类型

使用通配符类型来接受任何类型的值。

function process<T>(arg: T[]): void {
    console.log(arg.length); // 输出数组长度
}

process(["Hello", "TS"]);
process([1, 2, 3]);

类型参数约束

可以为类型参数添加约束，指定类型参数必须满足的条件。

interface Lengthwise {
    length: number;
}

function process<T extends Lengthwise>(arg: T): number {
    return arg.length;
}

console.log(process("Hello, TS!")); // 输出: 11
console.log(process(["Hello", "TS"])); // 输出: 2

泛型的应用实例

泛型函数

定义一个函数，可以接受任何类型的参数。

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Hello, TS!");
console.log(output); // 输出: Hello, TS!

泛型类

定义一个泛型类，可以处理任何类型的参数。

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;

    constructor(zeroValue: T, add: (x: T, y: T) => T) {
        this.zeroValue = zeroValue;
        this.add = add;
    }
}

let numbers = new GenericNumber<number>(0, (x, y) => x + y);
console.log(numbers.add(2, 3)); // 输出: 5

let strings = new GenericNumber<string>("", (x, y) => x + y);
console.log(strings.add("Hello, ", "TS!")); // 输出: Hello, TS!

泛型接口

定义一个泛型接口，可以处理任何类型的参数。

interface GenericIdentityFn<T> {
    (arg: T): T;
}

let identity: GenericIdentityFn<number> = (n: number) => n;

console.log(identity(123)); // 输出: 123

泛型类型别名

定义一个泛型类型别名，可以处理任何类型的参数。

type GenericIdentityFn<T> = (arg: T) => T;

let identity: GenericIdentityFn<number> = (n: number) => n;

console.log(identity(123)); // 输出: 123

泛型约束

定义一个泛型接口，限制类型参数必须具有特定的方法。

interface Lengthwise {
    length: number;
}

function process<T extends Lengthwise>(arg: T): number {
    return arg.length;
}

console.log(process("Hello, TS!")); // 输出: 11
console.log(process(["Hello", "TS"])); // 输出: 2

泛型与类的约束

定义一个泛型类，限制类型参数必须具有特定的方法。

class GenericNumber<T extends Lengthwise> {
    zeroValue: T;
    add: (x: T, y: T) => T;

    constructor(zeroValue: T, add: (x: T, y: T) => T) {
        this.zeroValue = zeroValue;
        this.add = add;
    }
}

let numbers = new GenericNumber<number>(0, (x, y) => x + y);
console.log(numbers.add(2, 3)); // 输出: 5

let strings = new GenericNumber<string>("", (x, y) => x + y);
console.log(strings.add("Hello, ", "TS!")); // 输出: Hello, TS!

泛型与函数的约束

定义一个泛型函数，限制类型参数必须具有特定的方法。

function process<T extends Lengthwise>(arg: T): number {
    return arg.length;
}

console.log(process("Hello, TS!")); // 输出: 11
console.log(process(["Hello", "TS"])); // 输出: 2

TS编译与调试

编译TS代码

使用命令行编译

在命令行中，使用 tsc 命令编译TypeScript文件。tsc是TypeScript编译器的命令行工具。

在项目根目录下，创建一个src文件夹，并在其中创建一个index.ts文件。

console.log("Hello, TypeScript!");

编译index.ts文件。

tsc

这将编译index.ts文件，并生成相应的JavaScript文件index.js。

使用`tsconfig.json`配置编译

您可以在tsconfig.json文件中配置编译选项，例如目标版本、模块类型等。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

使用`ts-node`运行TypeScript文件

使用ts-node直接运行TypeScript文件，无需编译。

npm install ts-node --save-dev

在项目根目录下创建一个tsconfig.json文件，指定ts-node配置。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES6",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

运行TypeScript文件。

ts-node src/index.ts

常见错误及调试方法

未定义的类型错误

如果未定义变量或类型，将会报错。

function add(a: number, b: number): number {
    return a + b;
}

let result = add(1, "2"); // Error: Type 'string' is not assignable to type 'number'.

常见错误示例

function addNumbers(a: number, b: number): number {
    return a + b;
}

let result = addNumbers(1, "2"); // Error: Type 'string' is not assignable to type 'number'.

异常处理

使用try...catch语句捕获异常。

function div(a: number, b: number): number {
    try {
        if (b === 0) {
            throw new Error("Cannot divide by zero.");
        }
        return a / b;
    } catch (error) {
        console.error(error);
        return 0;
    }
}

console.log(div(10, 0)); // 输出: Cannot divide by zero.

调试技巧

使用编译错误信息：TypeScript编译器会提供详细的错误信息，帮助您定位问题。
使用调试工具：在JavaScript文件上使用调试工具，如Chrome DevTools。
使用断点：在代码中设置断点，逐步执行代码，查看变量的值。
使用日志输出：在代码中添加console.log语句，输出变量的值。

示例代码

function addNumbers(a: number, b: number): number {
    return a + b;
}

let result = addNumbers(1, 2); // 输出: 3

实战演练

小项目实战

让我们通过一个简单的项目来实践我们所学的内容。这个项目将实现一个简单的任务管理应用。

项目结构

my-ts-project/
│
├── src/
│   ├── app.ts
│   └── task.ts
├── package.json
├── tsconfig.json
└── node_modules/

定义Task类

在src/task.ts文件中定义一个Task类。

export class Task {
    id: number;
    title: string;
    completed: boolean;

    constructor(id: number, title: string) {
        this.id = id;
        this.title = title;
        this.completed = false;
    }

    toggleCompletion() {
        this.completed = !this.completed;
    }
}

定义Application类

在src/app.ts文件中定义一个Application类，管理任务列表。

import { Task } from "./task";

export class Application {
    private tasks: Task[] = [];

    addTask(title: string): void {
        let id = this.tasks.length + 1;
        let newTask = new Task(id, title);
        this.tasks.push(newTask);
    }

    listTasks(): void {
        this.tasks.forEach(task => {
            console.log(`${task.id}: ${task.title} - ${task.completed ? "Completed" : "Not Completed"}`);
        });
    }

    completeTask(id: number): void {
        let task = this.tasks.find(task => task.id === id);
        if (task) {
            task.toggleCompletion();
        } else {
            console.error(`Task with id ${id} not found.`);
        }
    }
}

编写入口文件

在src/app.ts文件中编写入口文件。

import { Application } from "./app";

let app = new Application();

app.addTask("Learn TypeScript");
app.addTask("Finish project");

app.listTasks();
// 输出:
// 1: Learn TypeScript - Not Completed
// 2: Finish project - Not Completed

app.completeTask(1);
app.listTasks();
// 输出:
// 1: Learn TypeScript - Completed
// 2: Finish project - Not Completed

编译并运行

使用tsc编译TypeScript文件。

tsc

运行生成的JavaScript文件。

node dist/index.js

项目代码

以下是完整的项目代码：

task.ts

export class Task {
    id: number;
    title: string;
    completed: boolean;

    constructor(id: number, title: string) {
        this.id = id;
        this.title = title;
        this.completed = false;
    }

    toggleCompletion() {
        this.completed = !this.completed;
    }
}

app.ts

import { Task } from "./task";

export class Application {
    private tasks: Task[] = [];

    addTask(title: string): void {
        let id = this.tasks.length + 1;
        let newTask = new Task(id, title);
        this.tasks.push(newTask);
    }

    listTasks(): void {
        this.tasks.forEach(task => {
            console.log(`${task.id}: ${task.title} - ${task.completed ? "Completed" : "Not Completed"}`);
        });
    }

    completeTask(id: number): void {
        let task = this.tasks.find(task => task.id === id);
        if (task) {
            task.toggleCompletion();
        } else {
            console.error(`Task with id ${id} not found.`);
        }
    }
}

index.ts

import { Application } from "./app";

let app = new Application();

app.addTask("Learn TypeScript");
app.addTask("Finish project");

app.listTasks();
// 输出:
// 1: Learn TypeScript - Not Completed
// 2: Finish project - Not Completed

app.completeTask(1);
app.listTasks();
// 输出:
// 1: Learn TypeScript - Completed
// 2: Finish project - Not Completed

TS代码规范与最佳实践

编写清晰的代码

命名规范：使用有意义的名字描述变量、函数和类。
注释：编写清晰的注释，解释代码的意图和逻辑。
代码结构：组织代码结构，使其易于阅读和维护。

// 命名规范
class TaskManager {
    private tasks: Task[] = [];

    addTask(task: Task): void {
        this.tasks.push(task);
    }

    listTasks(): void {
        this.tasks.forEach(task => {
            console.log(task);
        });
    }
}

// 注释
/**
 * Task class represents a single task with an id, title, and completion status.
 */
export class Task {
    id: number;
    title: string;
    completed: boolean;

    constructor(id: number, title: string) {
        this.id = id;
        this.title = title;
        this.completed = false;
    }

    toggleCompletion(): void {
        this.completed = !this.completed;
    }
}

// 代码结构
import { Task } from "./task";

class TaskManager {
    private tasks: Task[] = [];

    addTask(task: Task): void {
        this.tasks.push(task);
    }

    listTasks(): void {
        this.tasks.forEach(task => {
            console.log(task);
        });
    }
}

代码审查

代码审查：定期进行代码审查，确保代码质量。
代码规范：遵循一定的代码规范，如Prettier、ESLint等。
单元测试：编写单元测试，确保代码的正确性。

代码工具

Linting：使用ESLint进行代码检查。
Formatting：使用Prettier自动格式化代码。
TypeScript编译器：使用TypeScript编译器进行类型检查和编译。

通过以上内容的学习与实践，您已经掌握了TypeScript的基础到高级用法，并能够编写和维护高质量的TypeScript代码。希望这些内容能够帮助您更好地理解和运用TypeScript，在开发过程中获得更多的便利和效率。如果您希望进一步深入学习TypeScript，可以参考官方文档或参加在线课程，如慕课网提供的TypeScript课程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕森卡

手记
篇

粉丝

120

获赞与收藏

527

关注作者，订阅最新文章

相关文章推荐

Web前端入门指南一

Joomla别名的初学者指南

Web前端入门指南三

Java入门难？推荐这门小课带你轻松入门限时1元！

Java工程师学习指南（入门篇）

阅读免费教程

TypeScript 入门教程

38个小节 92549 663

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空