TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统

浏览器是无法识别TS文件的，如果你在html比如<script>中引入ts话，浏览器报错。

安装

npm install -g typescript

这里的 -g 就是 --global 的缩写，表示全局安装。安装完成后，再验证一下：

tsc -v

💡 个人经验分享：在实际的大型项目中，我更推荐把TypeScript作为项目依赖（本地安装），而不是全局安装。因为不同项目可能依赖不同版本的TypeScript，全局安装容易导致版本冲突。但作为初学者，全局安装可以让你在任意位置快速测试代码，学习效率更高。等以后做项目了，再切换到本地安装。

运行TS

tsc hello.ts   运行后 多一个js文件

通过node hello.js可以运行这个js文件

注意

如果生成的js只有"use strict";  // 只有一行

原因分析：
当 TypeScript 文件没有 export 或 import 时，它会被视为 全局脚本 。在某些情况下（特别是没有 tsconfig.json 时），编译器可能会跳过变量声明，导致生成的 JS 文件内容不完整。

解决方案：
在文件末尾添加 export {} ，将文件转换为模块。

实时监听TS变动

tsc hello.ts -w

ctr + s保存ts，js文件自动更新

Export 模块化

没有export的时候，一个文件中的ts可以直接使用其他文件的变量。但是运行时你会报错

因为两个文件都是 全局脚本 （没有 export {} ），变量被放到全局作用域。

实际运行（node.js运行）报错：

为什么编译不报错，但运行报错？
TypeScript 编译 不报错 因为两个文件都是 全局脚本 （没有 export {} ），变量被放到全局作用域 JavaScript 运行 报错 每个 JS 文件是独立模块， mo 只在 world.js 中定义。

export 是 ES Module（模块系统）的“出口”语法。它的作用就是把一个文件（模块）里的变量、函数、类等，主动暴露出来，让其他文件可以使用。

你可以把每个 .ts 或 .js 文件想象成一个带有安全锁的盒子。
在文件里定义的变量，默认情况下是私有的（外部无法访问）。只有用 export 关键字把它们“送出去”，别的文件才能通过 import “拿进来”。

编译配置文件tsconfig.json

用 tsc --init 可以自动生成一个包含所有选项（大部分被注释）的 tsconfig.json。

比如.ts 和 .js 混在一起，我们可指定 outDir，将编译后的js放到这个指定目录下，干净分离。

执行tsc --init默认生成以下配置文件

{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    // "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

有很多配置我们是不需要的，可以简单用

{
    "compilerOptions": {
        "target": "ES6",
        "module": "CommonJS",
        "lib": ["ES2018", "DOM"],
        "strict": true,
        "isolatedModules": true
    },
    "include": ["*.ts"]
}

直接tsc， 就会编译该文件夹下所有ts文件，放到dist目录下。

核心配置项详解

1. compilerOptions（最常用）

配置项	作用	推荐值
target	编译后的 JS 版本	"ES2015" 或 "ES2020"（浏览器支持好）
module	模块系统	浏览器用 "ESNext"，Node.js 用 "CommonJS"
outDir	JS 输出目录	"./dist" 或 "./build"
rootDir	TS 源码根目录	"./src"
strict	严格模式（含所有子选项）	true（强烈推荐）
esModuleInterop	兼容 CommonJS	true（解决 import React from 'react' 报错）
skipLibCheck	跳过类型声明检查	true（加快编译速度）
jsx	JSX 处理方式	React 用 "react-jsx"，Vue 用 "preserve"
declaration	生成 .d.ts 类型文件	库项目用 true，应用项目用 false
sourceMap	生成 .map 调试文件	true（方便调试）

2. include 和 exclude

json

{
  "include": ["src/**/*"],      // 编译 src 下所有文件
  "exclude": ["node_modules", "dist", "**/*.test.ts"]  // 排除测试文件
}

3. extends（继承配置）

适合大型项目，把通用配置抽离出来，不同环境继承它：

json

{
  "extends": "./tsconfig.base.json",  // 继承基础配置
  "compilerOptions": {
    "outDir": "./dist"               // 覆盖部分配置
  }
}