首页手记 TypeScript教程：从入门到初级实战

TypeScript教程：从入门到初级实战

标签：

Typescript

这篇文章全面介绍了TypeScript教程，涵盖了从安装和配置开发环境到基础语法和高级特性的详细讲解。此外，文章还提供了项目实战、常见问题的解决方案，并推荐了进阶学习资源。对于想要学习TypeScript的开发者来说，这是一份非常实用的TypeScript教程。

TypeScript简介与安装

什么是TypeScript

TypeScript是一种由微软开发、开源的编程语言，是JavaScript的超集，任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript增加了静态类型检查，以便在编译阶段发现一些常见的编程错误，提高代码的可维护性和团队协作效率。TypeScript支持更多的现代JavaScript特性，如类、接口、泛型、装饰器等，同时也为未来的JavaScript语言发展做好了准备。

安装TypeScript

安装TypeScript可以通过npm（Node Package Manager）来完成。首先需要安装Node.js。Node.js的安装可以访问Node.js官方网站进行下载和安装。Node.js安装完成后，可以通过命令行安装TypeScript。

打开命令行工具（如Windows的命令提示符或Linux/MacOS的终端）。
输入以下命令安装TypeScript。

npm install -g typescript

此命令会全局安装TypeScript，安装完成后，可以通过tsc -v命令检查TypeScript版本。

tsc -v

配置开发环境

开发TypeScript需要一个合适的开发环境，这里推荐使用Visual Studio Code（VS Code），它是一个免费且功能强大的代码编辑器，支持TypeScript开发。

安装Visual Studio Code

访问VS Code官方网站下载对应的版本。
安装VS Code。
打开VS Code，安装TypeScript插件。

打开VS Code后，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
在搜索框中输入TypeScript，找到由Microsoft提供的TypeScript插件，点击“安装”按钮进行安装。
安装完成后，重启VS Code。

配置VS Code的TypeScript环境

创建一个新的文件夹，用于存放你的TypeScript项目。
在文件夹中创建一个文件tsconfig.json，该文件用于配置TypeScript的编译选项。在VS Code中，打开命令面板（Ctrl+Shift+P），输入TypeScript: Create New tsconfig.json命令，选择命令执行，会自动生成一个tsconfig.json文件。

tsconfig.json的基本配置如下：

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

target: 指定编译的目标JavaScript版本。
module: 指定模块代码的输出格式。
strict: 启用所有严格类型检查选项。
esModuleInterop: 允许从ES模块导入任何导出。
outDir: 指定输出文件的目录。
rootDir: 指定源文件的根目录。
include: 指定要包含的文件路径。
exclude: 指定要排除的文件路径。

创建项目结构如下：

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

现在，你的开发环境已经配置完成，可以开始编写TypeScript代码了。

TypeScript基础语法

数据类型

在TypeScript中，变量可以显式地指定类型，也可以使用类型推断。TypeScript的数据类型与JavaScript的数据类型非常相似，主要有以下几种：

number: 用于表示数字，可以是整数或浮点数。
string: 用于表示字符串。
boolean: 用于表示布尔值，只有true和false两个值。
any: 可以表示任意类型。
undefined: 用来表示未定义的值。
null: 用来表示空值。
void: 用来表示函数没有返回值。
symbol: ES6引入的新的原始数据类型，表示一个唯一的、不可变的、可以被对象持有的标识符。
never: 用来表示永远不会出现的值，通常用于表示函数或类型永远都不会返回。

示例代码

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let value: any = 123;
let undefinedVariable: undefined = undefined;
let nullVariable: null = null;
let returnValue: void = undefined;
let uniqueSymbol: symbol = Symbol("unique");
let neverValue: never = (() => { throw new Error("This will never return."); })();

变量与常量

在TypeScript中，可以使用let、const和var关键字来声明变量。使用let关键字声明的变量可以重新赋值，而使用const关键字声明的常量在声明后不能重新赋值。var关键字声明的变量具有函数作用域或全局作用域，不推荐在TypeScript中使用。

示例代码

let age: number = 25;
age = 30; // 可以重新赋值

const name: string = "Alice";
// name = "Bob"; // 报错，不能重新赋值

var globalVariable: string = "Global";
// 在函数内部声明的变量具有函数作用域
function test() {
    var localVar: number = 123;
    localVar = 456; // 可以重新赋值
    console.log(localVar);
}
test();
console.log(globalVariable);

函数与方法

在TypeScript中，函数定义包括函数名、参数列表、返回类型。函数可以返回任意类型的数据，也可以返回void表示函数没有返回值。

函数定义

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

let result: number = add(1, 2);
console.log(result); // 输出 3

function printName(name: string): void {
    console.log(`Hello, ${name}`);
}

printName("Alice"); // 输出 Hello, Alice

方法定义

方法是类或对象中的函数，可以定义在类中。方法可以有参数，也可以有返回值。

class Person {
    name: string;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let person: Person = new Person("Alice");
person.greet(); // 输出 Hello, my name is Alice

接口与类型别名

接口是一种描述对象结构的抽象方式，它定义了一些属性和方法，但不提供具体实现。类型别名则是为已知类型定义一个新名字，可以简化代码，提高可读性。

接口定义

interface Point {
    x: number;
    y: number;
}

let point: Point = { x: 1, y: 2 };

类型别名定义

type PointType = { x: number; y: number };

let point: PointType = { x: 1, y: 2 };

示例代码

interface Animal {
    name: string;
    speak(): string;
}

class Dog implements Animal {
    name: string;

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

    speak(): string {
        return `Bow wow! My name is ${this.name}`;
    }
}

let dog: Animal = new Dog("Buddy");
console.log(dog.speak()); // 输出 Bow wow! My name is Buddy

TypeScript中级特性

类与继承

在TypeScript中，类是一种用于创建对象的模板。使用class关键字定义类，使用new关键字创建类的实例。类可以继承其他类，实现多态。

类定义

class Animal {
    name: string;

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

    speak(): string {
        return `My name is ${this.name}`;
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    bark(): string {
        return `Bow wow! My name is ${this.name}`;
    }
}

let dog: Animal = new Dog("Buddy");
console.log(dog.speak()); // 输出 My name is Buddy
console.log(dog.bark()); // 输出 Bow wow! My name is Buddy

泛型

泛型是一种在定义函数、接口或类时使用类型参数的方法，使得这些函数、接口或类在使用时可以支持多种数据类型。泛型模板使用尖括号包裹类型参数，如<T>。

泛型函数定义

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

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

泛型接口定义

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

let myIdentity: GenericIdentityFn<number> = (n: number) => n;
console.log(myIdentity(123)); // 输出 123

装饰器

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数上。装饰器使用@expression形式，expression在运行时应该返回一个函数，该函数会在运行时被调用，且装饰器的名字是这个函数的函数名。

装饰器定义

function readonly(target: any, key: string) {
    let value: any = target[key];

    let getter = function() {
        return value;
    };

    let setter = function(newValue: any) {
        value = newValue;
    };

    Object.defineProperty(target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

class Test {
    @readonly
    public name: string = "Alice";
}

let test: Test = new Test();
console.log(test.name); // 输出 Alice
test.name = "Bob"; // 报错，不能修改name属性

TypeScript项目实战

创建简单的TypeScript项目

创建一个新的文件夹，用于存放你的TypeScript项目。
在文件夹中创建一个文件tsconfig.json。打开命令面板（Ctrl+Shift+P），输入TypeScript: Create New tsconfig.json命令，选择命令执行，自动生成一个tsconfig.json文件。
在项目文件夹中创建一个文件夹src，用于存放源代码。
在src文件夹中创建一个文件index.ts，作为主入口文件。
在项目文件夹根目录下创建一个文件package.json，用于配置项目信息和构建脚本。
在package.json中添加scripts字段，配置构建脚本。

package.json的示例配置：

{
  "name": "my-ts-project",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc"
  }
}

示例代码

class Person {
    name: string;

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

    greet(): string {
        return `Hello, my name is ${this.name}`;
    }
}

let person: Person = new Person("Alice");
console.log(person.greet()); // 输出 Hello, my name is Alice

编写TypeScript代码与调试

在src文件夹中编辑index.ts文件，开始编写TypeScript代码。使用VS Code的调试功能，可以设置断点、查看变量值、单步执行等。首先需要配置launch.json文件，该文件用于设置调试器的启动参数。

打开命令面板（Ctrl+Shift+P），输入Debug: Open launch.json命令，选择命令执行。
在弹出的对话框中选择Create a launch.json file，然后选择Node.js。
在生成的launch.json文件中编辑，设置调试参数。

示例launch.json配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/index.ts"
        }
    ]
}

示例代码

class Person {
    name: string;

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

    greet(): string {
        return `Hello, my name is ${this.name}`;
    }
}

let person: Person = new Person("Alice");
console.log(person.greet()); // 输出 Hello, my name is Alice

项目构建与部署

使用tsc命令编译TypeScript代码，生成相应的JavaScript文件。在命令行中，导航到项目根目录，执行以下命令：

tsc

tsc命令会根据tsconfig.json文件中的配置编译src文件夹中的TypeScript文件，并将编译后的JavaScript文件输出到dist文件夹。

可以使用npm run build命令来执行构建任务，确保构建脚本在package.json中正确配置。

构建完成后，可以将项目部署到Web服务器或使用Node.js运行JavaScript文件。例如，可以在命令行中执行以下命令来运行生成的JavaScript文件：

node dist/index.js

常见问题与解决方案

常见错误及解决方法

类型错误

类型错误通常是在编译时检查到的，比如尝试将一个字符串赋值给一个数值类型的变量。可以通过检查变量类型或使用类型断言来解决。

示例代码

let num: number = "123"; // 报错，尝试将字符串赋值给数值类型变量
let str: string = "Hello"; // 正确

// 使用类型断言解决类型错误
let num: any = "123";
let numAsNumber: number = <number>num; // 将any类型断言为number类型

未定义的变量

使用未声明或未初始化的变量会导致编译错误。确保在使用变量之前已经声明并初始化了变量。

示例代码

let name;
console.log(name); // 报错，name未初始化
let name = undefined;
console.log(name); // 输出 undefined

TypeScript性能优化技巧

使用严格模式

启用strict模式可以确保编译器进行更严格的类型检查，有助于发现潜在的类型错误和运行时错误。

示例代码

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

合并多个配置文件

如果项目中有多个配置文件，可以将它们合并为一个配置文件，减少编译时间和文件数量。

示例代码

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

集成第三方库的方法

在TypeScript项目中集成第三方库通常需要安装库的npm包，然后在项目中导入和使用库。

示例代码

安装第三方库：

npm install lodash

在项目中导入和使用库：

import _ from "lodash";

let arr = [1, 2, 3, 4];
let sum = _.sum(arr);
console.log(sum); // 输出 10

资源推荐与进阶学习

推荐学习资源

社区与论坛

进阶学习方向与指南

深入学习TypeScript的高级特性，如高级类型、元编程。
学习如何使用TypeScript进行Web开发，包括前端框架（如Angular、React）和后端框架（如Express）。
学习如何使用TypeScript进行大型项目开发，了解项目结构、构建工具（如Webpack、Rollup）的使用。

通过持续学习和实践，你将能够更好地掌握TypeScript，提高代码质量和开发效率。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

一只名叫tom的猫

手记
篇

粉丝

62

获赞与收藏

330

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93062 666

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

TypeScript教程：从入门到初级实战

安装Visual Studio Code

配置VS Code的TypeScript环境

示例代码

示例代码

函数定义

方法定义

接口定义

类型别名定义

类定义

泛型函数定义

泛型接口定义

装饰器定义

示例代码

示例代码

类型错误

示例代码

未定义的变量

示例代码

使用严格模式

示例代码

合并多个配置文件

示例代码

示例代码

阅读免费教程