网站详情页用哪个软件做,先有域名才可以做网站吗,网页游戏排行榜前十微信小程序,开发直播平台TS环境安装与基础 文章目录 一、什么是TypeScript#xff08;微软开发的#xff09;二、TypeScript的特性三、环境安装node安装配置详解#xff08;常用#xff1a;outDir#xff0c;strict #xff09; 四、注释方式五、数据类型 一、什么是TypeScript#xff08;微软开… TS环境安装与基础 文章目录 一、什么是TypeScript微软开发的二、TypeScript的特性三、环境安装node安装配置详解常用outDirstrict 四、注释方式五、数据类型 一、什么是TypeScript微软开发的 TypeScript是微软开发的一个开源的编程语言它起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性难以胜任大型项目的开发和维护。因此微软开发了TypeScript使得其能够胜任大型项目的开发。 它通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码可运行在任何浏览器任何操作系统。TypeScript添加了很多尚未正式发布的ECMAScript新特性如装饰器。2012年10月微软发布了首个公开版本的TypeScript2013年6月19日在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新正式版本为TypeScript 5.2, 2023年8月发布。TypeScript的作者是安德斯·海尔斯伯格C#的首席架构师。 它是开源和跨平台的编程语言。它是JavaScript的一个超集而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计并且可以编译为JavaScript。TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件扩展了它对于流行库的支持如jQueryMongoDBNode.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 --registryhttp://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版本、模块系统、是否生成源映射文件等。 详细看 下面配置详解配置详解常用outDirstrict 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, // 允许编译器编译JSJSX文件checkJs: true, // 允许在JS文件中报错通常与allowJS一起使用outDir: ./dist, // 指定输出目录rootDir: ./, // 指定输出文件目录(用于输出)用于控制输出目录结构declaration: true, // 生成声明文件开启后会自动生成声明文件declarationDir: ./file, // 指定生成声明文件存放目录emitDeclarationOnly: true, // 只生成声明文件而不会生成js文件sourceMap: true, // 生成目标文件的sourceMap文件inlineSourceMap: true, // 生成目标文件的inline SourceMapinline SourceMap会包含在生成的js文件中declarationMap: true, // 为声明文件生成sourceMaptypeRoots: [], // 声明文件目录默认时node_modules/typestypes: [], // 加载的声明文件包removeComments:true, // 删除注释 noEmit: true, // 不输出文件,即编译后不会生成任何js文件noEmitOnError: true, // 发送错误时不输出任何文件noEmitHelpers: true, // 不生成helper函数减小体积需要额外安装常配合importHelpers一起使用importHelpers: true, // 通过tslib引入helper函数文件必须是模块downlevelIteration: true, // 降级遍历器实现如果目标源是es3/5那么遍历器会有降级的实现strict: true, // 开启所有严格的类型检查alwaysStrict: true, // 在代码中注入use strictnoImplicitAny: 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 / falsestring: 字符串格式: let srt:string 字符串 / 字符串 / 字符串Array:数组类型格式1: let arr:number[] [] / new Array()格式2let arr:Arraynumber [] / 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使用尖括号 语法 stringvalu
2. 类型转换函数parseInt() 将字符串转换为整数parseFloat() 将字符串转换为浮点数toString() 将其他类型转换为字符串Number() 将其他类型转换为数字Boolean() 将其他类型转换为布尔值String() 将其他类型转换为字符串
