9.TypeScript完全解读-TS中的类 创建class.ts文件,并在index.ts内引用 创建一个类,这个类在创建好后有好几个地方都标红了 这是tslint的一些验证规则 一保存就会自动修复,视频中是可以修复的  估计我自己的电脑不一定会自动修复,这个错误的主要问题是属性和方法前面要加修饰符 表示它是公共的方法和属性 常见实例并输出 输出的结果 同样可以使用继承来封装一些特性 eslint的限制,一个ts文件里面只能定义一个类 所以就需要去掉这个限制 创建你分类,子类继承了父类,在里面

ECMAScript 6 入门:http://es6.ruanyifeng.com/ 官网:http://www.typescriptlang.org/ 中文网:https://www.tslang.cn/ TypeScript完全解读(26课时)_汇总贴 https://segmentfault.com/ls/1650000018455856?utm_source=recommend_web-live-new TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境

1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目根目录就多了个package.json的文件 创建相关目录文件夹 untils:业务相关的,可服用的方法 assets:主要放静态资源 img:图片 font:字体文件 tools:业务无关的纯工具的函数 api:把一些可以复用的接口请求的方法,放在api文件夹下 config:一般放配置文件,把一

2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件,配合tslint可以做到很好的代码提示 boolean类型 boolean表示布尔类型 这里我们用let声明了一个变量bool的类型是boolean布尔类型的.可以先给他赋值, 第二行是先声明后赋值的形式 上面声明了bool为布尔类型的,后面再赋值123的话就会报错 有提示的错误 123是数字自变

4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装tslint的VSCode的拆件.因为我之前已经安装过了.左上角带个小星星,是推荐安装的 新建interface.ts文件.然后在index.ts内添加引用 视频中报的错误,我本机没有这个错误 提示错误,单引号应该是双引号,这个就是tslint的错误,一般是ts的错误后面前缀都是ts开头 把提示的那个错

5.TypeScript完全解读-函数 新建function.ts.然后在index.ts内引用 给函数定义参数类型:上面是es5的写法 下面是ts6的写法 一个完整的函数类型.括号 箭头 number 现在给add赋值一个函数 如果参数传的是string那么就会报错了,类型不兼容 全局定义的arg3是不需要定义在函数里的 接口定义函数类型,讲接口的时候已经学习过了这里再来看一下 tslint推荐我们使用类型别名,一保存文件就变成了这种形式 也可以这么去定义,此时isString类型就等同于st

6.TypeScript完全解读-泛型 创建实例ts文件generics.ts 在index.ts内引入 fill是填充数组,创建的数组的元素数是times,填充的值就是接收的value的值 这里传入一个2的数量,这样返回的就是5个2的数组 返回每个都+1的结果 返回每个元素的length这样就是有错误的,因为我们的数值类型是没有length这个属性的 传入字符串,是有length属性的 虽然是可以,但是丢失了类型的检测.这里我们就需要用到泛型 使用泛型约束函数的类型 泛型变量T,调用函数的时候

8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Food实例的方法 创建西红柿的实例,调用getType方法,获取到的就是Food这个实例里面的type的值就是food 在es6中类的继承要比这个简洁多了,es6中的类就是构造函数的一个语法糖 es6中类的继承 类的继承也是使用extends这个关键字 只有在调用super方法之后,你才可以使用thi

10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以自己制定编码,那么后面的一次递增 全部一次递增的结果 制定中间的为2 那么第一个还是0 ,2后面的会递增 也可以单独指定,可以随便指定,不一定按照从小到大的顺序 可以定义一个常量,把常量赋值给枚举 也可以定义函数 某个字段使用的计算值,或者是常量.它后面的枚举必须要设置初始值 它后面的枚举必须要设置

11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点,从而在一些情况下只要兼容的类型即可通过检测 创建文件并在index.ts中引入 类型推论 这里定义的name没有给他制定是什么类型的值,赋值一个字符串,ts就会给我们推断出name可能是想要一个字符串的类型 当我们再给这个name赋值一个数值类型就会报错 了. 多类型联合 我们不制定类型,ts会自动

12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 index.ts内引入 交叉类型 交叉类型就是取多个类型的并集 Object.assign就是合并两个对象,包含两个对象各有的属性,合成一个总的对象 定义的函数也是接收两个对象,最后返回两个对象合并后的结果. 返回值里既包含arg1,也包含了arg2的属性 所以返回的类型就可以用交叉类型来返回: T &

13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index.ts内引用 this类型 在ts中this也是一种类型 看一个计算器的例子 通过public在constructor上添加属性count类型为number类型,默认值为0 定义方法add,里面把count和传进来的值相加,返回这个实例 实例上调用add方法传入3,输出结果13 接着调用减法的方法,返

ts中symbol的支持是按照es6的标准来的,只要我们学会es6中的symbol,就可以直接在ts中使用了 创建symbol 在example文件夹下新建symbol.ts 然后在根目录的index.ts内引入我们创建的symbol.ts 我们这里使用简写的形式:import './example/symbol' 后面的.ts是可以省略掉的,这里我们就省略了 symbol是是es6中新增的一个数据基本类型和 String.Number.Boolean是相同的.是一种基本的数据类型,用来表示一个

ES6精讲 - 类Class基础 es5中创建构造函数和实例 原来在es5中的写法 定义好Point后,在原型对象上定义getPostion的方法 实例自身是没有这个方法的,我们调用的时候会去创建他的构造函数上原型上往上寻找 输出的结果 调用getPosition方法 es6中 有了类的概念用class去定义一个类. constructor是构造函数,this指向创建的实例.每个类的定义必须有constructor方法,若果你在定义类的时候没有写构造函数,它也会默认加上一个空的 getPosit

创建modules文件夹,我们的文件都写在这里面 modules下面新建index.js文件,在index.ts内引入这个js文件 es6的模块 最主要的两个关键字 import和export import可以引入和加载一个模块,我们在index.ts中已经使用过了 在modules文件夹新建a.js 我们可以export导出模块内容,导出模块,一般就是一个独立的文件,这个文件的所有变量外部是无法获取的,除非使用这个export导出这个变量 使用export导出name常量,他的值是Lison

新建文件夹ts-modules 并新建index.ts 在根index.ts内引入 新建a.ts文件 ts在1.5之前有两个概念一个是内部模块,一个是外部模块,因为在1.5之前es6的标准还没有提出 1,.5版本开始内部模块改名称做命名空间,外部模块改称为模块 ts的模块出了遵循es6的标准语法外,还有一些特定的语法 export语句 不仅能导出变量.函数.类,还可以导出ts中特有的类型别名和接口 2分46秒 再创建一个模块B b.ts的定义 引入b模块同时导出, 可以只导出里面的name 还可

ts编辑器会将名字相同的多个声明合并为一个声明,合并后的声明,同时拥有多个声明的特性 example文件夹下新建merging.ts文件 定义相同名字的接口, 定义变量类型是上面的接口.,光写一个name属性报错,提示缺少age属性 把name和age同时加上才这个类型就不会报错了 命名空间.类型.值的声明 补充 命名空间实际上是创建了一对象,这个对象我们在js里面是可以用的  合并接口 定义的非函数的成员,命名应该是不重复的 如果这总重复定义了name值就会报错 两个的类型都是stirng才可

实验性的特性,需要在tslint里面把这项设置为true 作用域类的声明方法.访问符.属性和参数上 使用@符号加一个名字来定义,名字必须是一个函数,或者求值后是一个函数 装饰器工厂,setPro当做一个装饰器工厂,里面返回一个函数的结果. 调用的时候直接@setProp() 后面加上括号去调用 装饰器组合使用,装饰器工厂是从上往下调用,普通的装饰器是从下往上一次执行 如果都是装饰器工厂,就是从上向下执行,依次就出来装饰器工厂内的值 定义两个装饰器工厂   在类的上面加上装饰器的工厂,从上到下执行

本节的代码在mixin.ts文件内 同时在index.ts内引入 混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用. 对象混入 js中对象的混入 先来看一个js中对象的混入的例子 首先定义一个对象a 在定义一个对象b a里面混入一个对象b让a里面有对象b的属性 使用es6的Object.assign方法,a写在前面,b写在后面 a里面就也有了b对象的属性 b还是只有b属性 ts中对象混入 在ts中,是具有类型系统的 AB现在就是一个交叉类型,这是ts自动帮你推断出来的 当然你也可以

ts3.3升级过来有很多重要的更新 没法归类的更新,在本节课几种讲一下 创建update.ts,然后在index.ts内引入 async和promise es6中增加了promise的支持,能够很好处理异步的逻辑,让他同步执行 按顺序执行,会先执行下面的输出2,1秒后才会输出1 有的时候想保证操作的顺序,使用promise,在settimeout里面执行完成后调用 resolve()方法, 想让它在输出1后再输出2,那么使用.then方法在里面输出2 把结果返回,就在resolve里面传值a过去