TypeScript 5分钟快速入门教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01057/article/details/148508402

TypeScript 5分钟快速入门教程

TypeScript-Handbook Deprecated, please use the TypeScript-Website repo instead 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Handbook

TypeScript作为JavaScript的超集，为大型应用开发提供了强大的类型系统支持。本教程将带你快速了解TypeScript的核心特性，让你在5分钟内掌握基本用法。

环境准备

TypeScript可以通过多种方式安装：

通过npm安装（推荐大多数开发者使用）：

npm install -g typescript

Visual Studio插件（适合Windows平台开发者）

安装完成后，可以通过tsc -v命令验证安装是否成功。

第一个TypeScript程序

创建一个名为greeter.ts的文件，输入以下代码：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

这段代码定义了一个简单的greeter函数，它接受一个字符串参数并返回拼接后的问候语。

编译TypeScript

使用以下命令编译TypeScript文件：

tsc greeter.ts

编译后会生成greeter.js文件，这是可以在浏览器中直接运行的JavaScript代码。

类型注解的优势

TypeScript的核心特性之一是类型注解。当我们为函数参数添加: string类型注解后：

function greeter(person: string) {
    return "Hello, " + person;
}

如果传入错误类型的参数，如数组：

let user = [0, 1, 2];
document.body.textContent = greeter(user);

编译器会立即报错：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

这种静态类型检查可以在开发阶段就发现潜在的类型错误，大大提高了代码的可靠性。

使用接口定义复杂类型

TypeScript的接口可以描述对象的形状：

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

接口确保了传入的对象必须包含指定的属性，否则编译器会报错。这种结构化的类型系统是TypeScript的一大特色。

类与面向对象编程

TypeScript全面支持ES6的类语法，并进行了扩展：

class Student {
    fullName: string;
    constructor(
        public firstName: string, 
        public middleInitial: string, 
        public lastName: string
    ) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

注意构造函数的参数使用了public修饰符，这是TypeScript的语法糖，它会自动创建对应的类属性。

运行TypeScript应用

创建一个HTML文件引入编译后的JS文件：

<!DOCTYPE html>
<html>
    <head><title>TypeScript示例</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

在浏览器中打开这个HTML文件，就能看到程序运行结果了。

开发工具支持

TypeScript在主流编辑器中都有很好的支持：

代码自动补全
类型提示
快速跳转到定义
重构支持

这些特性极大地提升了开发体验和效率。

总结

通过这个快速教程，我们了解了TypeScript的：

基本安装和使用方法
类型注解的作用
接口的使用
类的定义
开发工具集成

TypeScript通过静态类型检查增强了JavaScript的可维护性，特别适合大型项目开发。虽然本教程只展示了基础特性，但这些已经足以让你开始TypeScript之旅了。

TypeScript-Handbook Deprecated, please use the TypeScript-Website repo instead 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Handbook

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考