TypeScript入门介绍

typescript · 浏览次数 : 0

小编点评

## TypeScript入门介绍 **1.1 TypeScript 是什么？** TypeScript 是 JavaScript 的一个超集，它提供静态类型检查，使 JavaScript 代码更易于理解和维护。 **1.2 TypeScript 的历史和发展** * 2012年，Anders Hejlsberg 在微软开发 TypeScript。 * TypeScript 最初用于内部项目开发，后来逐渐向前端开发领域扩展。 **1.3 TypeScript 与 JavaScript 的关系** * TypeScript 是 JavaScript 的超集，这意味着所有 JavaScript 代码都可以运行在 TypeScript 中。 * TypeScript 还提供了额外的语法和功能，例如类型注释、接口等。 **1.4 为什么选择 TypeScript？** * 静态类型检查可以帮助发现代码中的语法错误和逻辑错误，提高代码质量。 * 更好的代码提示和自动补全可以提高开发效率。 * 更好的代码组织和维护性可以使代码更易于维护。 **1.5 TypeScript 的优势与劣势** **优势：** * 静态类型检查 * 更好的代码提示和自动补全 * 更好的代码组织和维护性 **劣势：** * 学习曲线较陡 * 需要安装 Node.js **1.6 TypeScript 的应用场景** * Web 应用 * Node.js 应用 * 移动应用 * 桌面应用 **1.7 项目开发工具环境依赖** * Node.js * VS Code * Webpack * Rollup * Vite **2. 构建工具/工程化步骤汇总** 1. 安装 vs code 2. npm install -g typescript 3. 运行 `tsc hello.ts` 或自动编译任务 4. 添加调试 `ts-node` 和 `ts-debug` 扩展 5. 创建 `tsconfig.json` 配置文件 6. 在 VS 中运行 `ts` 命令监控编译过程 **3. 示例代码** **01hello.ts** ```typescript function sayHello(person: string): string { return `hello ${person}`; } let user: string = 'Tom'; let r = sayHello(user); console.log(r); ```

正文

TypeScript入门介绍

TypeScript入门介绍

什么是 TypeScript？

1.1 TypeScript 是由微软开发的一种开源的编程语言。它是 JavaScript 的一个超集，通过为 JavaScript 提供静态类型检查，增加了代码的可读性和可维护性

发展历史

1.2 TypeScript 的历史和发展

TypeScript 最初由 Anders Hejlsberg 在微软开发，并于2012年首次发布。它的发展一直得到社区的积极支持，逐渐成为前端开发的主流选择。

1.3 TypeScript 与 JavaScript 的关系
TypeScript 是 JavaScript 的超集，意味着所有的 JavaScript 代码都可以在 TypeScript 中运行，同时 TypeScript 还提供了额外的语法和功能。

优缺点

1.4 为什么选择 TypeScript？

选择 TypeScript 的主要原因包括：静态类型检查、更好的代码提示和自动补全、更好的代码组织和维护性、更好的开发体验等。

1.5 TypeScript 的优势与劣势
TypeScript 的优势包括类型安全、智能代码提示、更好的代码组织结构等；劣势可能包括学习曲线较陡等。

应用场景

1.6 TypeScript 的应用领域

TypeScript 可以用于开发各种类型的应用程序，包括 Web 应用、Node.js 应用、移动应用、桌面应用等

开发工具

环境依赖

Node.js: TypeScript 编译器是基于 Node.js 构建的，因此需要先安装 Node.js。你可以从 Node.js 官方网站 https://nodejs.org/ 下载并安装适合你操作系统的 Node.js 版本。

npm install -g typescript

编程IDE

多种主流编辑器如Visual Studio Code、Sublime Text、Atom等都对 TypeScript 提供了良好的支持。

vs调试

launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ts-node",
            "type": "node",
            "request": "launch",
            "args": [
                "${relativeFile}"
            ],
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

构建工具/工程化

构建工具: 在实际项目中，通常会使用一些构建工具来处理 TypeScript 代码，比如 Webpack、Rollup、Vite 等。这些工具可以帮助你自动化构建过程、优化代码等。你可以根据项目需求选择合适的构建工具，并在项目中使用 npm 进行安装和管理。

步骤汇总

1.安装vs code

2.npm install -g typescript

3.运行tsc hello.ts。将ts编译为js文件

4.调试 npm install -D ts-node ，安装vs扩展 TS Debug。添加调试launch.json文件配置如下

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ts-node",
            "type": "node",
            "request": "launch",
            "args": [
                "${relativeFile}"
            ],
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

5.事实编译：在vs code中选择终端→运行任务输入ts 选中tsc:监控，将对ts生成js文件进行实时监控。

第一个项目

在vs中创建01hello.ts,代码如下

function sayHello(person:string){
   return `hello ${person}`;
}

let user:string = 'Tom';
let r= sayHello(user);
console.log(r);

2.编译成JS 手动编译tsc 01hello.ts或自动编译运行任务tsc:监控。将生成01hello.js文件。

3.可以将01hello.js 拿到其他web页面使用。注：实际开发过程中，可能使用到构建工具如Webpack、Rollup、Vite 等，就不用运行步骤2和3了。