TypeScript是微软开发的一个开源的编程语言通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码可运行在任何浏览器任何操作系统浏览器是无法识别TS文件的如果你在html比如script中引入ts话浏览器报错。安装npm install -g typescript这里的-g就是--global的缩写表示全局安装。安装完成后再验证一下tsc -v个人经验分享在实际的大型项目中我更推荐把TypeScript作为项目依赖本地安装而不是全局安装。因为不同项目可能依赖不同版本的TypeScript全局安装容易导致版本冲突。但作为初学者全局安装可以让你在任意位置快速测试代码学习效率更高。等以后做项目了再切换到本地安装。运行TStsc hello.ts 运行后 多一个js文件通过node hello.js可以运行这个js文件注意如果生成的js只有use strict; // 只有一行原因分析当 TypeScript 文件没有 export 或 import 时它会被视为 全局脚本 。在某些情况下特别是没有 tsconfig.json 时编译器可能会跳过变量声明导致生成的 JS 文件内容不完整。解决方案在文件末尾添加 export {} 将文件转换为模块。实时监听TS变动tsc hello.ts -wctr s保存tsjs文件自动更新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模块系统浏览器用ESNextNode.js 用CommonJSoutDirJS 输出目录./dist或./buildrootDirTS 源码根目录./srcstrict严格模式含所有子选项true强烈推荐esModuleInterop兼容 CommonJStrue解决import React from react报错skipLibCheck跳过类型声明检查true加快编译速度jsxJSX 处理方式React 用react-jsxVue 用preservedeclaration生成.d.ts类型文件库项目用true应用项目用falsesourceMap生成.map调试文件true方便调试2.include和excludejson{ include: [src/**/*], // 编译 src 下所有文件 exclude: [node_modules, dist, **/*.test.ts] // 排除测试文件 }3.extends继承配置适合大型项目把通用配置抽离出来不同环境继承它json{ extends: ./tsconfig.base.json, // 继承基础配置 compilerOptions: { outDir: ./dist // 覆盖部分配置 } }