【完结】TypeScript 基本语法与应用
TypeScript基本语法和使用
BraveWangDev
11年开发经验、全栈工程师;2023年更新计划已确定,希望能与大家共同进步;
展开
-
TypeScript实战-01-TypeScript简介
JS的发展及广泛应用JS存在的问题TS的出现及优势为什么要使用TSTS简单示例和编译原创 2019-09-05 16:58:59 · 830 阅读 · 0 评论 -
TypeScript实战-02-环境搭建HelloWorld
一,前言创建TypeScript的HelloWorld程序,对TS建立感性认知环境: nodeJsIDE: VSCode二,创建项目1,新建ts_in_action文件夹,并执行npm命令,生成package.json:npm init -yBravedeMacBook-Pro:ts-in-action brave$ npm init -yWrote to /Users/b...原创 2019-09-10 15:40:22 · 730 阅读 · 0 评论 -
TypeScript实战-03-TS基本数据类型介绍和使用
前言上一篇,搭建了简单的TS项目模板本篇对TS基本数据类型进行介绍和使用二,TS的数据类型ES6的数据类型:6种基本数据类型 Boolean Number String Symbol undefined null三种引用类型 Array Function ObjectTS在ES6基础上,新增了一下数据类型 void any never 元组 枚举...原创 2019-09-11 13:33:02 · 1635 阅读 · 0 评论 -
TypeScript实战-13-TS的类型检查机制-各种类型之间的兼容性
一,前言本篇只要讨论TS不同类型的兼容性类型兼容经常发生在接口,函数和类中二,类型兼容如果类型A可以被赋值给类型B,那么就可以说类型B兼容类型A如果 : B(目标类型) = A(源类型) , 则 : 类型B兼容类型A之前的例子中,我们就遇到过number和null的兼容问题:在strictNullChecks = false时(默认true),字符串变量是可以被赋值为null类...原创 2019-09-18 10:06:09 · 1554 阅读 · 2 评论 -
TypeScript实战-14-TS的类型检查机制-类型保护机制
一,前言二,类型保护的场景定义Java和JavaScript两个类和一个类型枚举,包含强类型和弱类型两个类包含各自的打印方法但方法名不相同根据type获取对应实例// 类型保护enum Type { Strong, Week }class Java { helloJava() { console.log("Hello Java") }}c...原创 2019-09-18 17:00:04 · 1111 阅读 · 0 评论 -
TypeScript实战-15-TS高级类型-交叉类型
一,前言TS高级类型,指TS为保证语言的灵活性,所引入的语言特性这些语言特性有助于开发者应对复杂多变的开发场景二,交叉类型交叉类型:将多个类型合并成为一个新的类型,新类型具有所有类型的特性应用场景:由于交叉类型具有所有类型的特性,所以非常适合对象混入的场景语法:类型A & 类型B举例:// 定义两个接口interface AInterface { ...原创 2019-09-19 09:32:16 · 1012 阅读 · 0 评论 -
TypeScript实战-16-TS高级类型-联合类型
一,前言上一篇介绍了TS高级类型-交叉类型本篇介绍另一个TS高级类型-联合类型联合类型并不陌生,之前已经接触过多次了二,联合类型联合类型:声明时,类型可能为多个类型中的一种,但不能确定是哪一种let a: number | string = 1let b: number | string = "1"三,字面量联合类型字面量类型:不仅限定变量类型,还限定变量的取值范...原创 2019-09-20 17:19:31 · 2844 阅读 · 0 评论 -
TypeScript实战-17-TS高级类型-索引类型
一,前言本篇介绍TS的另一个高级类型-索引类型从对象中获取一些属性的值,然后建立一个集合et obj = { a: 1, b: 2, c: 3}// 获取对象中的指定属性的值集合function getValues(obj: any, keys: string[]) { return keys.map(key => obj[key])}// ...原创 2019-09-20 18:30:48 · 4594 阅读 · 0 评论 -
TypeScript实战-18-TS高级类型-映射类型
一,前言本篇介绍TS的另一个高级类型-映射类型二,映射类型映射类型:TS允许将一个类型映射成另外一个类型将一个接口的所有属性映射为只读:// 定义接口Objinterface Obj { a: number b: string c: boolean}// 使用类型别名定义类型ReadonlyObjtype ReadonlyObj = Readonl...原创 2019-09-20 19:34:56 · 3768 阅读 · 0 评论 -
TypeScript实战-19-TS高级类型-条件类型
一,前言本偏介绍TS另一种高级类型-条件类型二,条件类型条件类型是一种由条件表达式所决定的类型条件类型使类型具有了不唯一性,同样增加了语言的灵活性声明:T extends U ? X : Y若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型// 条件类型type TypeName<T> = T extends string ? 'str...原创 2019-09-20 21:00:01 · 2329 阅读 · 1 评论 -
TypeScript实战-20-TS模块化
一,前言在JS的项目中,随着工程的不断增大,为了便于管理和模块复用,产生了很多模块化解决方案如CommonJS,AMD,CMD及ES模块,目前最常用的是ES6的模块,CommonJS模块TS对这两种模块系统都有比较好的支持二,ES6模块导出src下新建es6文件夹,并创建a.ts, b.ts, c.ts文件三者关系为:c依赖a, a依赖b(使用a.ts演示导出,c.ts演示导出)...原创 2019-09-23 21:42:57 · 2024 阅读 · 0 评论 -
TypeScript实战-21-TS的命名空间
一,前言在js中,为了避免对全局的污染,可以使用命名空间,在模块化被广泛使用后,命名空间就很少被使用了上一篇介绍了TS的模块化,虽然在模块中不再及需要考虑全局污染的问题但如果使用了全局类库,仍需要使用命名空间本篇介绍TS的命名空间二,命名空间的定义使用namespace关键字声明TS命名空间在命名空间内可定义任意变量,仅能在命名空间下可见如果要使命名空间内的变量全局可见,...原创 2019-09-23 22:44:54 · 1572 阅读 · 0 评论 -
TypeScript实战-22-声明合并
一,前言本篇介绍TS中的重复命名的声明合并1,声明合并定义2,接口的声明合并及对接口成员的要求3,命名空间的声明合并4,命名空间和函数的声明合并5,命名空间和类的声明合并6,命名空间和枚举的声明合并二,声明合并声明合并:编译器会将程序中多个具有相同名称的声明合并为一个声明优势:可以将程序中散落在各处的重名声明合并在一起三,接口的声明合并接口的声明合并是TS中...原创 2019-09-24 00:13:53 · 1567 阅读 · 0 评论 -
TypeScript实战-23-使用模块和声明文件
一,前言在TS中引入类库和编写声明文件二,引入外部类库类库分别为3类:全局类库模块类库UMD类库以jQuery为例,属于UMD类库既可全局方式引用(配合webpack插件),也可以模块化方式引入import $ from 'jquery' // 报错:找不到模块jQuery使用js编写,在TS中不能直接使用,需要编写声明文件,对外暴露API三,声明文件对于非TS的类...原创 2019-09-24 01:00:11 · 602 阅读 · 0 评论 -
TypeScript实战-24-TS的编译工具
一,前言前面的工程中,为了将ts文件编译称为js文件,使用了webpack-loader:ts-loaderwebpack.base.config.js:module: { // loader rules: [ { test: /\.tsx?$/, use: [{ loader:...原创 2019-09-24 19:24:48 · 1522 阅读 · 0 评论 -
TypeScript实战-25-ESLint代码检测
一,前言使用Vue和React开发时,通常使用ESLint做代码检测TypeScript有自己的检查工具TSLint但由于ESLint在Vue和React的影响及更好的性能TypeScript也决定使用ESLint做TS的代码检测工具二,ESLintTypeScript + ESLint:TypeScript编译器主要做两件事,即类型检查和语言转换 1,类型检查 2,语言转换...原创 2019-09-25 09:38:39 · 4776 阅读 · 1 评论 -
TypeScript实战-26-Jest单元测试
一,前言babel-jest不能进行语法检查ts-jest支持语法检查二,jest安装和配置安装包并配置脚本:"scripts": { "test": "jest" }, "devDependencies": { "@types/jest": "^24.0.15", "jest": "^24.8.0", "ts-jest": "^24.0.2"...原创 2019-09-25 12:42:59 · 1259 阅读 · 0 评论 -
TypeScript实战-04-TS枚举类型
一,前言上一篇介绍了TS的基本数据类型本篇介绍TS新增的枚举数据类型二,枚举的应用场景在JS中没有枚举类型,如果需要根据不同的订单状态执行不同操作:function getXXXByOrderStatus(status) { if(status == 1){ // do somthing }else if(status == 2){ /...原创 2019-09-11 20:25:31 · 4814 阅读 · 0 评论 -
TypeScript实战-05-TS接口之对象类型接口
一,前言TS新增了一个重要概念:接口,分为对象类型接口和函数类型接口二,接口示例接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约接口的定义方式:使用interface关键字以查询图书商品列表接口API为例:// 接口声明:API协议约定返回格式interface ResponseData { resCode: number; resDat...原创 2019-09-12 01:31:52 · 2656 阅读 · 0 评论 -
TypeScript实战-06-TS接口之函数类型接口
一,前言上篇介绍了TS接口的对象类型接口本篇介绍TS的另一种接口:函数类型接口二,函数定义方式1,在TS中,可以使用一个变量直接定义函数:// 1,使用变量定义函数let add: (x: number, y: number) => number2,还可以使用接口来定义函数:// 2,使用接口定义函数interface Add { (x: number, y: nu...原创 2019-09-12 10:15:05 · 5092 阅读 · 0 评论 -
TypeScript实战-07-函数相关知识梳理
一,前言本篇对函数相关知识进行梳理1,函数的4种定义方式2,TS对函数参数的要求3,函数参数-可选参数,默认值,剩余参数4,函数重载二,函数的4种定义方式// 使用function定义函数function add1 (x: number, y: number) { return x + y;}// 通过一个变量定义一个函数类型let add2: (x: numbe...原创 2019-09-12 11:08:26 · 287 阅读 · 0 评论 -
TypeScript实战-08-TS类的声明和实现,类的继承和成员修饰符
一,前言基于原型prototype的JS,一直在模拟面向对象,后来ES6引入了class关键字,使JS能够像传统面向对象语言一样创建一个类在TS中,对ES6的类进行了增强,引入了更多特性二,定义一个类使用TS定义一个类:class Dog { constructor(name: string) { this.name = name; } na...原创 2019-09-12 17:00:25 · 4410 阅读 · 0 评论 -
TypeScript实战-09-抽象类和多态
一,前言在ES中,并没有引入面向对象语言中抽象类的概念,而TS对这部分特性进行了扩展本篇介绍TS中的抽象类和多态二,抽象类的定义抽象类只能被继承,不能被实例化定义抽象类使用abstract关键字定义抽象类,并验证抽象类不可被实例化三,抽象类的继承继承抽象类,需要在子类中调用super方法四,使用抽象类实现方法复用在抽象类中可以定义方法(可以有具体实现,也可以是抽象方...原创 2019-09-15 23:26:25 · 499 阅读 · 0 评论 -
TypeScript实战-10-TS中类和接口的关系
一,前言前边分别介绍了TS的类和接口本篇结合类和接口的知识,对类和接口之间的关系进行梳理总结二,接口对类的约束作用接口能够对类的成员属性和类型进行约束(且只能约束类的公有成员)接口对类成员的约束:注意:类必须实现接口中声明的全部属性和方法,类可以新增独有的属性和方法接口只能约束类的公有成员结论:所以接口只能约束类的公有成员二,接口的继承-接口继承接口接口和...原创 2019-09-16 00:56:58 · 782 阅读 · 0 评论 -
TypeScript实战-11-泛型
一,前言TS为ES新增了一个面向对象语言的重要概念:泛型泛型允许同一个函数或类支持多种数据类型,极大提升了代码的灵活性和复用性二,泛型之前一个可以打印多种数据类型的log函数方法1:函数重载// 函数重载function log(value: string): string;function log(value: number): number;function log(v...原创 2019-09-16 09:10:51 · 596 阅读 · 0 评论 -
TypeScript实战-12-TS的类型检查机制-类型推断
一,前言前面的例子中,已经多少接触了TS的类型检查机制,例如可以利用TS自动推断出返回值类型省略返回值类型的书写二,TS类型检查机制类型检查机制:TypeScript编译器在做类型检查时,使用的原则和表现的行为类型检查机制的作用:辅助开发,提高开发效率TS类型检查机制包含:1)类型推断2)类型兼容性3)类型保护三,类型推断不需要指定变量类型或函数的返回值类型,...原创 2019-09-16 10:36:06 · 4359 阅读 · 0 评论