从入门到实战：typescript教程，轻松掌握JavaScript超能力

TypeScript是一门由微软开发的开源编程语言，它在JavaScript的基础上增加了静态类型、类、接口等特性，旨在提升开发效率和代码可维护性。借助本教程，您将深入了解如何使用TypeScript进行开发。从基础数据类型与变量的运用开始，到配置环境和项目，直至掌握如何通过TypeScript提高大型应用的开发质量。

TypeScript是什么

TypeScript是JavaScript的超集，它添加了强大的类型安全性和代码可维护性。TypeScript旨在提高大型应用的开发效率，减少错误，并使其易于长期维护。开发者可以使用TypeScript编写可用于浏览器或Node.js环境的纯JavaScript代码，或者在编译后转换为JavaScript文件。

TypeScript与JavaScript的关系

TypeScript代码在编译前包含类型注释，这些注释在TypeScript编译时会被转换为纯JavaScript文件。因此，所有有效的TypeScript代码也都是有效的JavaScript代码。

安装与配置环境

为了开始使用TypeScript，请先安装Node.js。访问Node.js官方网站下载并安装最新版本的Node.js。安装完成后，通过输入node -v在命令行中检查是否正确安装，并显示当前安装的Node.js版本。

安装 TypeScript

借助Node.js的包管理器npm，轻松安装TypeScript：

npm install -g typescript

此命令全局安装TypeScript，使您可以在任意项目中使用它。

配置项目

在开发环境中创建TypeScript项目。使用任意文本编辑器或IDE（如VS Code，IntelliJ IDEA等），并在目录中创建包含tsconfig.json文件的结构。tsconfig.json文件是TypeScript项目的配置文件，用于指定编译目标、输出文件、类型定义等。

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

此配置文件包括以下设置：

• target: 指定生成的输出代码的ECMAScript版本。例如，“es5”生成适用于老版本浏览器的JavaScript代码。
• module: 指定使用的模块系统。"commonjs"在Node.js环境中生成模块。
• outDir: 指定编译后输出的目录。
• strict: 开启严格模式，提高类型检查的严格度。
• esModuleInterop: 允许在导入ES6模块时使用require而不使用import。
• skipLibCheck: 跳过lib目录下的类型定义的检查，加快编译速度。
• forceConsistentCasingInFileNames: 强制文件名遵循一致的大小写规则。

在项目根目录下创建src文件夹，用于存放TypeScript源代码文件。每个源代码文件应以.ts或.tsx扩展名结尾（对于TypeScript文件和JSX文件）。

TypeScript提供了丰富的数据类型，用于定义变量的类型。下面是一些基本数据类型及其使用方法：

let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = true;
let array: number[] = [1, 2, 3];

在TypeScript中，每个变量在声明时都必须指定其类型。这有助于在编译时捕捉类型错误，并在运行时提供更好的错误信息。

变量声明与初始化

变量可以一次性声明和初始化，或者在声明时直接赋值：

let numberOne: number = 10;
let numberTwo: number; // 定义变量但不初始化，将自动被初始化为 undefined

对于number，string，boolean等基本类型，TypeScript提供了相应的类型别名，并通过导入这些别名来使用它们：

import { number, string, boolean } from "some-utility-package";

let num: number = 20;
let str: string = "Hello";
let bool: boolean = false;

变量类型推断

TypeScript会自动推断变量的类型，即使不指定类型：

let someVar = "Hello";
// TypeScript推断someVar为string类型

任务1：类型检查与类型转换

实现一个函数，接收一个字符串参数，并将其转换为整数。如果转换失败，则返回一个错误信息。

function convertStringToInt(s: string): number | string {
  const num = parseInt(s);
  if (isNaN(num)) {
    return "转换失败：不是有效的整数";
  }
  return num;
}

console.log(convertStringToInt("42")); // 输出: 42
console.log(convertStringToInt("not a number")); // 输出: 转换失败：不是有效的整数

任务2：声明变量与类型断言

创建一个变量并使用类型断言强制其类型为number。即使在类型安全的情况下，类型断言也允许您显式地告诉TypeScript某个值的类型。

let rawInput: any = "10.5";
let numValue = rawInput as number;
console.log(numValue); // 输出: 10.5

// 注意：虽然类型断言在运行时有效，但在类型检查时会被忽略