尧图网站建设 
TypeScript学习与实践下TypeScript学习与实践上https://blog.csdn.net/cnds123/article/details/164074853本文紧接着上文介绍。TypeScript的编程工具TypeScript的编程工具推荐Visual Studio CodeVS Code 内置 TypeScript 语言支持。对 TypeScript 有智能提示、自动补全、类型检查、重构等功能无需额外配置。注意VS Code 仅内置了 TypeScript 语言服务用于编辑器智能功能但不包含可独立运行的 tsc 命令行编译工具。进一步说VS Code 确实内置了 TypeScript 语言支持——VS Code 是一个出色的 TypeScript 编辑器它指的是编辑器层面的智能功能而不是编译 TypeScript 代码的能力——如果需要将 .ts 文件转译为可运行的 JavaScript仍然需要安装 Node.js、TypeScript 包并配置项目来编译运行代码。下面介绍如何用 VS Code 新建 TypeScript 项目及其运行。第一阶段准备工作安装基础运行环境Visual Studio Code安装及其相关配置确保电脑上安装①、VS Code 其安装见 VS Code新手快速使用入门 https://blog.csdn.net/cnds123/article/details/162912843②、Node.js建议 LTS 长期支持版其安装见前面。③、安装 TypeScript虽然可以全局安装但为了项目版本一致性建议在项目内安装在终端【注这里所说的在终端输入指在VS Code 内置终端输入打开 VS Code 内置终端快捷键Ctrl ~ 或 Ctrl 】输入npm install -D typescript types/node tsx其中-D 参数 等价于--save-dev意思是把包安装为 开发依赖devDependencies。三个包的作用typescript是TypeScript 官方的编译器。types/node是Node.js 的 TypeScript 类型定义文件。tsx是一个基于 esbuild 的 TypeScript 执行器。VS Code可以安装以下扩展打开 VS Code在左侧扩展商店CtrlShiftX搜索并安装·Prettier - Code formatter代码格式化。装完扩展后在设置里搜 format on save 打勾即可零配置可用建议第一个就装它。· Error Lens直接在代码行尾高亮显示 TS 报错和类型提示不用悬停鼠标学习 TS 时的“神仙插件”。第二阶段新建并初始化 TS 项目1.在电脑合适位置新建一个文件夹例如learn-typescript并在 VS Code 中打开该文件夹。2.初始化package.json在终端【VS Code 内置终端】输入npm init -y这会在根目录生成一个package.json文件Node.js 项目清单。【提示若在VS Code 的内置终端直接敲 npm / tsc 遇到报红字禁止运行脚本怎么办VS Code 的内置终端默认使用的是 PowerShell。Windows 系统为了防止恶意脚本自动运行默认将 PowerShell 的“脚本执行策略Execution Policy”设为了受限的Restricted。方案一修改 PowerShell 脚本执行权限推荐点击 Windows 【开始】菜单搜索PowerShell。在搜索结果的“Windows PowerShell”上 点击鼠标右键选择【以管理员身份运行】。在弹出的蓝色管理员窗口中输入以下命令并回车Set-ExecutionPolicy RemoteSigned -Scope CurrentUser终端会提示是否确认更改输入Y或A全部然后按回车。参见下图方案二把 VS Code 默认终端切为 CMDCMD传统命令提示符不受 PowerShell 执行策略的限制。在 VS Code 内置终端面板的右上角找到那个 下拉箭头v在号旁边。点击下拉箭头在上方弹出的列表中选择 “Command Prompt” (CMD)。点击右上角的号新建一个终端此时会显示为cmd这个新终端生效。】3.安装 TypeScript 及极速运行工具在终端【VS Code 内置终端】输入npm install -D typescript types/node tsx4.生成 TypeScript 配置文件tsconfig.json在终端【VS Code 内置终端】输入npx tsc --init执行后会在根目录生成tsconfig.json。这个文件包含了所有 TS 编译选项大部分被注释掉了。在 VS Code左侧文件列表里双击tsconfig.json 打开它建议将tsconfig.json的内容替换为以下精简且严格的最佳学习配置并保存{compilerOptions: {target: ES2022, /* 编译输出的 JS 目标版本 */module: NodeNext, /* 模块规范 */moduleResolution: NodeNext,rootDir: ./src, /* TS 源码目录 */outDir: ./dist, /* 编译生成的 JS 输出目录 */strict: true, /* 开启所有严格类型检查学 TS 必须开启 */esModuleInterop: true, /* 允许默认导入 CommonJS 模块 */skipLibCheck: true, /* 跳过第三方声明文件的类型检查 */forceConsistentCasingInFileNames: true /* 区分文件名大小写 */},include: [src/**/*]}第三阶段配置工程目录与快捷运行脚本1. 建立源码目录和源码文件在项目根目录下新建src文件夹并在其内部新建入口文件index.ts在 VS Code 左侧的资源管理器中右键点击空白处选择 新建文件夹命名为 src。右键点击 src 文件夹选择 新建文件命名为 index.ts 或hello.ts——文件名扩展名为.ts即可。在 index.ts 中输入以下代码let username: string 张三; let age: number 18; let isStudent: boolean true; // TS 会自动推断类型为 string[] let hobbies [编程, 数学, 音乐]; // hobbies.push(123); // ❌ 取消注释会报错类型“number”的参数不能赋给类型“string”的参数 console.log( 用户: ${username}, 年龄: ${age}, 爱好: ${hobbies.join(, )});写完代码并按下Ctrl S保存。2.编译tsc 把 TS 变成 JS在终端里输入tsc3.运行编译出的JS在终端输入node dist/ index.js参见下图一些常见TypeScript示例最后给出一些常见TypeScript示例例01基础类型与类型推断// 显式声明类型 let age: number 18; let userName: string 小明; let isStudent: boolean true; let scores: number[] [90, 85, 92]; // 类型推断不写类型TS 自动推断 let city 杭州; // 推断为 string // city 123; // 【试验】取消注释 → 立刻红波浪线number 不能赋给 string // 元组固定长度和顺序 let point: [number, number] [3, 4]; // any 会关闭类型检查尽量少用 let anything: any hello; anything 123; // any 不报错但失去了类型保护 console.log(name${userName} age${age} isStudent${isStudent}); console.log(scores${scores.join(,)} point(${point[0]},${point[1]}) city${city});编译运行输出name小明 age18 isStudenttruescores90,85,92 point(3,4) city杭州例02常见类型错误集锦逐行取消注释对照观察 VS Code 的报错信息// 错 1 TS2322把字符串赋给 number // let n1: number 5; // 错 2 TS2345往 string 数组里塞 number // const a2: string[] []; // a2.push(1); // 错 3 TS2339访问对象上不存在的属性 // const o3 { a: 1 }; // console.log(o3.b); // 错 4 TS7006函数参数没有类型隐式 anystrict 下禁止 // function f4(x) { // return x; // } // 错 5 TS18048变量可能是 undefined直接取属性 // let s5: string | undefined x; // console.log(s5.length); // 错 6 TS2322字面量超出联合类型范围 // const v6: a | b c; // 错 7 TS2339as const 后数组变只读不能 push // const c7 [1, 2] as const; // c7.push(3); console.log(把上面的注释逐行打开看看红色波浪线和错误码再读报错文字。);例03 函数类型与泛型入门// 普通函数标注参数与返回值类型 function add(a: number, b: number): number { return a b; } // 带默认值的参数 function greet(name: string, greeting 你好): string { return ${greeting}${name}; } // 泛型 T类型在调用时才确定 function firstT(arr: T[]): T | undefined { return arr[0]; } const n first([10, 20]); // T 推断为 number const s first([a, b]); // T 推断为 string console.log(add(1, 2), greet(小明)); console.log(first number${n} first string${s}); // console.log(add(1, 2)); // 【试验】取消注释 → 红string 不能赋给 number你可以编译运行看看输出什么。OK TypeScript学习与实践（下）
TypeScript学习与实践下TypeScript学习与实践上https://blog.csdn.net/cnds123/article/details/164074853本文紧接着上文介绍。TypeScript的编程工具TypeScript的编程工具推荐Visual Studio CodeVS Code 内置 TypeScript 语言支持。对 TypeScript 有智能提示、自动补全、类型检查、重构等功能无需额外配置。注意VS Code 仅内置了 TypeScript 语言服务用于编辑器智能功能但不包含可独立运行的 tsc 命令行编译工具。进一步说VS Code 确实内置了 TypeScript 语言支持——VS Code 是一个出色的 TypeScript 编辑器它指的是编辑器层面的智能功能而不是编译 TypeScript 代码的能力——如果需要将 .ts 文件转译为可运行的 JavaScript仍然需要安装 Node.js、TypeScript 包并配置项目来编译运行代码。下面介绍如何用 VS Code 新建 TypeScript 项目及其运行。第一阶段准备工作安装基础运行环境Visual Studio Code安装及其相关配置确保电脑上安装①、VS Code 其安装见 VS Code新手快速使用入门 https://blog.csdn.net/cnds123/article/details/162912843②、Node.js建议 LTS 长期支持版其安装见前面。③、安装 TypeScript虽然可以全局安装但为了项目版本一致性建议在项目内安装在终端【注这里所说的在终端输入指在VS Code 内置终端输入打开 VS Code 内置终端快捷键Ctrl ~ 或 Ctrl 】输入npm install -D typescript types/node tsx其中-D 参数 等价于--save-dev意思是把包安装为 开发依赖devDependencies。三个包的作用typescript是TypeScript 官方的编译器。types/node是Node.js 的 TypeScript 类型定义文件。tsx是一个基于 esbuild 的 TypeScript 执行器。VS Code可以安装以下扩展打开 VS Code在左侧扩展商店CtrlShiftX搜索并安装·Prettier - Code formatter代码格式化。装完扩展后在设置里搜 format on save 打勾即可零配置可用建议第一个就装它。· Error Lens直接在代码行尾高亮显示 TS 报错和类型提示不用悬停鼠标学习 TS 时的“神仙插件”。第二阶段新建并初始化 TS 项目1.在电脑合适位置新建一个文件夹例如learn-typescript并在 VS Code 中打开该文件夹。2.初始化package.json在终端【VS Code 内置终端】输入npm init -y这会在根目录生成一个package.json文件Node.js 项目清单。【提示若在VS Code 的内置终端直接敲 npm / tsc 遇到报红字禁止运行脚本怎么办VS Code 的内置终端默认使用的是 PowerShell。Windows 系统为了防止恶意脚本自动运行默认将 PowerShell 的“脚本执行策略Execution Policy”设为了受限的Restricted。方案一修改 PowerShell 脚本执行权限推荐点击 Windows 【开始】菜单搜索PowerShell。在搜索结果的“Windows PowerShell”上 点击鼠标右键选择【以管理员身份运行】。在弹出的蓝色管理员窗口中输入以下命令并回车Set-ExecutionPolicy RemoteSigned -Scope CurrentUser终端会提示是否确认更改输入Y或A全部然后按回车。参见下图方案二把 VS Code 默认终端切为 CMDCMD传统命令提示符不受 PowerShell 执行策略的限制。在 VS Code 内置终端面板的右上角找到那个 下拉箭头v在号旁边。点击下拉箭头在上方弹出的列表中选择 “Command Prompt” (CMD)。点击右上角的号新建一个终端此时会显示为cmd这个新终端生效。】3.安装 TypeScript 及极速运行工具在终端【VS Code 内置终端】输入npm install -D typescript types/node tsx4.生成 TypeScript 配置文件tsconfig.json在终端【VS Code 内置终端】输入npx tsc --init执行后会在根目录生成tsconfig.json。这个文件包含了所有 TS 编译选项大部分被注释掉了。在 VS Code左侧文件列表里双击tsconfig.json 打开它建议将tsconfig.json的内容替换为以下精简且严格的最佳学习配置并保存{compilerOptions: {target: ES2022, /* 编译输出的 JS 目标版本 */module: NodeNext, /* 模块规范 */moduleResolution: NodeNext,rootDir: ./src, /* TS 源码目录 */outDir: ./dist, /* 编译生成的 JS 输出目录 */strict: true, /* 开启所有严格类型检查学 TS 必须开启 */esModuleInterop: true, /* 允许默认导入 CommonJS 模块 */skipLibCheck: true, /* 跳过第三方声明文件的类型检查 */forceConsistentCasingInFileNames: true /* 区分文件名大小写 */},include: [src/**/*]}第三阶段配置工程目录与快捷运行脚本1. 建立源码目录和源码文件在项目根目录下新建src文件夹并在其内部新建入口文件index.ts在 VS Code 左侧的资源管理器中右键点击空白处选择 新建文件夹命名为 src。右键点击 src 文件夹选择 新建文件命名为 index.ts 或hello.ts——文件名扩展名为.ts即可。在 index.ts 中输入以下代码let username: string 张三; let age: number 18; let isStudent: boolean true; // TS 会自动推断类型为 string[] let hobbies [编程, 数学, 音乐]; // hobbies.push(123); // ❌ 取消注释会报错类型“number”的参数不能赋给类型“string”的参数 console.log( 用户: ${username}, 年龄: ${age}, 爱好: ${hobbies.join(, )});写完代码并按下Ctrl S保存。2.编译tsc 把 TS 变成 JS在终端里输入tsc3.运行编译出的JS在终端输入node dist/ index.js参见下图一些常见TypeScript示例最后给出一些常见TypeScript示例例01基础类型与类型推断// 显式声明类型 let age: number 18; let userName: string 小明; let isStudent: boolean true; let scores: number[] [90, 85, 92]; // 类型推断不写类型TS 自动推断 let city 杭州; // 推断为 string // city 123; // 【试验】取消注释 → 立刻红波浪线number 不能赋给 string // 元组固定长度和顺序 let point: [number, number] [3, 4]; // any 会关闭类型检查尽量少用 let anything: any hello; anything 123; // any 不报错但失去了类型保护 console.log(name${userName} age${age} isStudent${isStudent}); console.log(scores${scores.join(,)} point(${point[0]},${point[1]}) city${city});编译运行输出name小明 age18 isStudenttruescores90,85,92 point(3,4) city杭州例02常见类型错误集锦逐行取消注释对照观察 VS Code 的报错信息// 错 1 TS2322把字符串赋给 number // let n1: number 5; // 错 2 TS2345往 string 数组里塞 number // const a2: string[] []; // a2.push(1); // 错 3 TS2339访问对象上不存在的属性 // const o3 { a: 1 }; // console.log(o3.b); // 错 4 TS7006函数参数没有类型隐式 anystrict 下禁止 // function f4(x) { // return x; // } // 错 5 TS18048变量可能是 undefined直接取属性 // let s5: string | undefined x; // console.log(s5.length); // 错 6 TS2322字面量超出联合类型范围 // const v6: a | b c; // 错 7 TS2339as const 后数组变只读不能 push // const c7 [1, 2] as const; // c7.push(3); console.log(把上面的注释逐行打开看看红色波浪线和错误码再读报错文字。);例03 函数类型与泛型入门// 普通函数标注参数与返回值类型 function add(a: number, b: number): number { return a b; } // 带默认值的参数 function greet(name: string, greeting 你好): string { return ${greeting}${name}; } // 泛型 T类型在调用时才确定 function firstT(arr: T[]): T | undefined { return arr[0]; } const n first([10, 20]); // T 推断为 number const s first([a, b]); // T 推断为 string console.log(add(1, 2), greet(小明)); console.log(first number${n} first string${s}); // console.log(add(1, 2)); // 【试验】取消注释 → 红string 不能赋给 number你可以编译运行看看输出什么。OK