TypeScript学习与实践（上）

TypeScript学习与实践上TypeScriptTS概述TS(TypeScript) 不是一门全新的语言而是 JavaScript 的 超集核心是在 JavaScript 的基础上加了一套 类型系统或者说TypeScript JavaScript 类型系统。让代码在运行之前就能发现错误。它是微软开发的 JS 超集——任何合法的 JS 代码都是合法的 TS 代码TS 代码用 tsc 编译成普通 JS 后跑在所有 JS 能跑的地方浏览器、Node。JavaScript 是动态类型变量能随便变类型、对象属性写错也不报错误往往要到运行时才炸。TS 把这些错误类型错误、拼错的属性名、漏传的参数保存前就标红提前到了写代码的那一刻。简单示例对比JavaScript动态类型运行时才报错const user { name: Alice, age: 25 };console.log(user.email.toUpperCase()); // 运行时错误Cannot read properties of undefinedTypeScript静态类型编译时发现错误interface User {name: string;age: number;email?: string; // 可选属性}const user: User { name: Alice, age: 25 };console.log(user.email.toUpperCase()); // 编译错误对象可能为“未定义”TypeScript官网https://www.typescriptlang.org/TypeScript 中文手册 https://typescript.bootcss.com/环境搭建Windows10中环境搭建安装 Node.js 和 TypeScript 编译器 (npm install -g typescript)。创建 tsconfig.json 文件来配置编译选项。官方也提供了TypeScript Playground在线环境可以快速尝试代码。下面在Windows10中介绍具体环境搭建3 步1. 装 Node.js访问 Node.js 官网 Node.js — 在任何地方运行 JavaScript 下载最新的 LTS长期支持版本Windows 直接下 .msi 安装包一路下一步。验证终端执行 node -v 和 npm -v 都有版本号即可。2.装 TypeScript在终端cmd中执行以下命令即可在全局范围内安装TypeScript编译器tscnpm install -g typescript其中参数-g表示全局安装 TypeScript目前最新稳定版是 7.02026 年 7 月发布Go 重写编译器、提速约 10 倍。验证tsc -v参见图片3.创建TypeScript项目并运行①建项目文件夹D:\ts-demo并切换到此文件夹mkdir D:\ts-democd D:\ts-demo②初始化项目npm init -ytsc --init生成 package.json 和 tsconfig.json 两个文件终端显示 Created a new tsconfig.json。参见下图默认生成的 tsconfig.json 包含大量注释和可选配置可以根据需要修改。③用记事本打开 tsconfig.json找到这两行// rootDir: ./src,// outDir: ./dist,把行首的 // 删掉变成rootDir: ./src,outDir: ./dist,参见下图保存。含义src 放你写的 TS 源码dist 放编译出的 JS。其余默认项不用动。④建立源文件文件夹src并记事本notepad 在其中写名为“index.ts”的 TS 文件mkdir srcnotepad src\index.ts其中index.ts内容如下// src/index.ts function greet(name: string): string { return 你好${name}TypeScript 环境已经跑通了。; } const message greet(同学); console.log(message);⑤用tsc编译并用node 运行tscnode dist\index.js编译后会在 dist 目录生成 index.js。用 Node.js 运行。参见下图预期输出你好同学TypeScript 环境已经跑通了。看到这行字就说明环境、配置、编译、运行全链路都通了。日常怎么用改完代码后先 tsc 编译再 node dist\index.js 运行。如果代码有类型错误tsc 会直接报错并指出文件名和行号编译不会产出——这正是 TypeScript 的价值。