公司的网站 优帮云百度产品大全首页

TS环境安装与基础

---

一、什么是TypeScript（微软开发的）

---

	TypeScript是微软开发的一个开源的编程语言，它起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript，使得其能够胜任大型项目的开发。 它通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。TypeScript添加了很多尚未正式发布的ECMAScript新特性（如装饰器）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新正式版本为TypeScript 5.2, 2023年8月发布。TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。 它是开源和跨平台的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行库的支持，如jQuery，MongoDB，Node.js 和 D3.js等。这些第三方库的类型定义本身也是开源的，所有开发者都能参与贡献。

二、TypeScript的特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。
● 类型批注和编译时类型检查
●类
●接口
●模块
●装饰器
TypeScript 与 JavaScript 的区别：TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

三、环境安装

运行TypeScript代码，则必须安装以下代码运行环境和工具：
Node.js和TypeScript代码编译器

node安装

步骤：1.在[node官网](https://nodejs.org/en)进行下载并安装2. cmd 执行命令： node-v 3. 查看mpm版本：npm -v4. 安装ts-node编译器： npm install -g ts-node --registry=http://registry.npmmirror.com解释：ts-node 是基于tsc编译器的一款运行时TypeScript编译器，它允许TypeScript代码在运行时通过Node.js环境直接执行5.查看ts-code版本：ts-node -v6.在安装完后，需要安装全局ts编辑器 ：  npm install -g typescript7.创建文件的话使用后缀为.ts， 当命令行执行：ts-node  **.ts文件正常则安装完成。8.在当前文件夹下执行生成配置文件   命令：tsc --init解释：执行此命令用于生成检查文件，并可以根据需要对文件数据 进行修改compilerOptions: 编译器选项，包含多个配置项，如目标JavaScript版本、模块系统、是否生成源映射文件等。	详细看 下面配置详解

配置详解（常用：outDir，strict ）

 "compilerOptions": { 编译器选项，包含多个配置项，如目标JavaScript版本、模块系统、是否生成源映射文件等。	"incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度"tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置"diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本"module": "CommonJS", // 生成代码的模板标准"outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD","lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array","allowJS": true, // 允许编译器编译JS，JSX文件"checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用"outDir": "./dist", // 指定输出目录"rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构"declaration": true, // 生成声明文件，开启后会自动生成声明文件"declarationDir": "./file", // 指定生成声明文件存放目录"emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件"sourceMap": true, // 生成目标文件的sourceMap文件"inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中"declarationMap": true, // 为声明文件生成sourceMap"typeRoots": [], // 声明文件目录，默认时node_modules/@types"types": [], // 加载的声明文件包"removeComments":true, // 删除注释 "noEmit": true, // 不输出文件,即编译后不会生成任何js文件"noEmitOnError": true, // 发送错误时不输出任何文件"noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用"importHelpers": true, // 通过tslib引入helper函数，文件必须是模块"downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现"strict": true, // 开启所有严格的类型检查"alwaysStrict": true, // 在代码中注入'use strict'"noImplicitAny": true, // 不允许隐式的any类型"strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量"strictFunctionTypes": true, // 不允许函数参数双向协变"strictPropertyInitialization": true, // 类的实例属性必须初始化"strictBindCallApply": true, // 严格的bind/call/apply检查"noImplicitThis": true, // 不允许this有隐式的any类型"noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)"noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)"noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)"noImplicitReturns": true, //每个分支都会有返回值"esModuleInterop": true, // 允许export=导出，由import from 导入"allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块"moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { // 路径映射，相对于baseUrl// 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置"jquery": ["node_modules/jquery/dist/jquery.min.js"]},"rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错"listEmittedFiles": true, // 打印输出文件"listFiles": true// 打印编译的文件(包括引用的声明文件)
}// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": ["src/**/*"
],
// 指定一个排除列表（include的反向操作）"exclude": ["demo.ts"
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）"files": ["demo.ts"
]

四、注释方式

单行注释： //。
多行注释：/*   */。
文档注释：/** */   当用生成文档软件时，会自动生成文档。
区域块注释： 开始使用：#region     结束使用：#endregion    非标准很少见使用的

五、数据类型

number: 数字类型格式: let num: number =整数/ 小数/ 二进制/ 八进制/ 十六进制 默认为十进制let num:number = 23; // 整数let num:number = 23.23; // 小数let num:number = 0b10; // ob开头为二进制let num:number = 0o10; // 0o开头为八进制let num:number = 0xf;  // ox开头为十六进制

boolean:布尔值格式: let boo:boolean = true / false

string: 字符串格式: let srt:string= '字符串' /  "字符串" / `字符串`

Array:数组类型格式1: let arr:number[] = [] / new Array()格式2：let arr:Array<number> = [] / new Array()

联合数组 :使用 |  符号格式: let strNum: string|number = '可以为字符串或者数字'当strNum的值为number时，则.length 方法会编译错误

元组类型: 表示一个已知元素数量和类似的数组,各个元素可以不需要一样。切记：此数组不能进行扩容。只能存放已知的元素。当获取的数据大于下标会编译错误。格式: let obj: [string,number,boolean] = ['str',23,true]获取里面数据的方式 let str::string= obj[0]  与数组取值一致

enum: 枚举类型格式 enum Color{ // 类名和class文件创建一致开头大写Red, // 一般开始字母也是大写,没有初始化给其赋值，系统则会默认值 ，自0开始Red = 200, // 可以自己设置值类型可以是任一的}

特殊类型:  Unknown 、 Any 、 null 、 undefinedunKnown: 检查直接通过该类型的检查。 不跳过检查并且在使用.length 方法是则会直接报错。Any: 不明确类型时使用，跳过检查可以使用.length 方法

1.类型断言：使用 as 语法： value as string使用尖括号 <> 语法： <string>valu
2. 类型转换函数：parseInt() ：将字符串转换为整数parseFloat() ：将字符串转换为浮点数toString() ：将其他类型转换为字符串Number() ：将其他类型转换为数字Boolean() ：将其他类型转换为布尔值String() ：将其他类型转换为字符串