深圳电商网站设计公司,做资讯网站,建设网站三要,青岛网站建ts有什么用 类型检查, 拥抱es6#xff0c;支持部分的esNext草案#xff0c;直接编译到原生js、引入新的语法糖 为什么用ts TypeScript的设计目的应该是解决JavaScript的“痛点”#xff1a;弱类型和没有命名空间#xff0c;导致很难模块化#xff0c;不适合开发大型程序。…ts有什么用 类型检查, 拥抱es6支持部分的esNext草案直接编译到原生js、引入新的语法糖 为什么用ts TypeScript的设计目的应该是解决JavaScript的“痛点”弱类型和没有命名空间导致很难模块化不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 typescript不仅可以约束我们的编码习惯还能起到注释的作用当我们看到一函数后我们立马就能知道这个函数的用法需要传什么值返回值是什么类型一目了然对大型项目的维护性有很大的提升。 编译报错 会生成编译结果么 答案是肯定的,当然可以在tsconfig.json的配置 noEmitONError tsconfig.json的文件配置 还没搞定 基础总结 数据类型 boolean 、number、string、null、 undefined、 Symbolundefined 和null 类型的数据只能被赋值undefined 和null 但是这个类型是所有类型的子类型void 空类型 // undefined和null是所有类型子类型都可以赋值let num: Symbol undefined;sslet num: number undefined;// undefined类型 只能给undefinedlet u: undefined undefined; let n: null null;
复制代码any和类型推断 // 在ts中变量在声明的时候如果没有定义其类型会被识成默认类型 let str;str I am strgting;str 1024;// 未定义类型直接赋值let num 124; // 等同于 let num:number 124, 在后面代码如果赋予num一个string会被报错复制代码多个可能属性 //只能访问可能属性的共有属性function getLength(param: string| number) {return param.length;}// 会报错 因为 length不是 sting和number类型的共有属性// 技巧--》 使用类型别名type possibleType string | number;function getLength(param: possibleType) {return param.length;}
复制代码接口的概念 在ts中interface包括对行为的抽象由类去实现implements也包括对对象轮廓的描述对象interface -》动态属性 必选参数和可选参数的类型是动态属性类型的子集所有在动态属性类型设置的时候要设置上所有类型 interface userinfo {memberId: number,uName: string,employeeId: string,datetime: string,platformList?: Arrayplatform,[propName: string]: string | number | Arrayplatform | undefined}
复制代码只读属性的约束力 注意点 只读属性的约束力在于第一次给对象赋值的时候而不是给属性赋值的时候 readonly和 const的区别 const是变量 readonly是属性 接口-》抽象方法的实现 export interface ISRequest {fetch(url: string, arg?: Object, callback?: Function): PromiseObject;}export class SafeRequest implements ISRequest {public async fetch(url: string, arg, callback?: Function): PromiseObject {return new Promise((resolve, reject) {})}
复制代码用接口表示数组 interface NumberArray {[index: any]: number}let numArr: NumberArray [1, 2, 3]
复制代码函数的类型 可选参数, 必须在必选参数后面参数默认值 function buildName(firstName: string, lastName?: string) {}
复制代码添加默认值的参数识别为可选参数剩余参数类型断言 // 类型值// 值 as 类型
复制代码疑惑--》 声明文件 当使用第三方库时我们需要引用它的声明文件才能获得对应的代码补全、接口提示等功能。 声明文件在哪里 与npm包绑定在一起npm包的维护者并没有提供声明文件 只能由其他人将声明文件发布到types里面自己写个声明文件npm包的声明文件 和全局变量的声明文件 在 npm 包的声明文件中使用 declare 不再会声明一个全局变量而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出然后在使用方 import 导入后才会应用到这些类型声明。 ######declare global 使用 declare global 可以在 npm 包或者 UMD 库中扩展全局变量的类型 内置对象 内置对象查询--》点击 ESMAScript提供了Boolean、Error、Date、RegExp interface obj {param: Functionparam: Promise}
复制代码枚举--》 数据的双向映射 enum companyList {1: aaa, 2: bbb}var companyList {1: aaa,2: bbb,aaa: 1,bbb: 2}
复制代码Vue in Typescript 三大利器 vue-component-class 方法可以直接声明为类成员方法。可以将计算属性声明为类属性访问器。默认data被当作类属性data render 和vue的生命周期的钩子直接是类成员的方法保留这些命名不要冲突对于其他的配置项例如prop、componets等传递给装饰器函数 import Vue from vue;import Component from vue-componet-class;Component.resgisterHooks([beforeRouteEnter])Componnet({props: {},components: {}})export default class App extends Vue {// aa ;// 类型推断aa是个string 后面aa只能赋值aa类型// 所以最好使用先声明后// datapublic tableModelItems: Arrayany;constructor() {super();this.tableModelItems [];}// computedpublic get filterTableData() {return this.tableData.filter((i: any) i.refundStatus 0).length// 方法// 声明周期// 此时需要路由函数的生命周期钩子咋办beforeRouteEnterf() {next() // 一定要写否则玩不下去为什么}}}
复制代码
- vue-property-decorator(依赖vue-component-class提供了更多了装饰器代码更加显示 )- Emit- Inject- Prop- Provide- Watch
- vuex-class连接了vue和vuexjs复制代码还没搞定的bug 错误--》 类型报错 添加script的类型 script langts/script!--否则下面的类型报错--
复制代码错误之--》Vue中挂载propoty出错如果还是爆红重启ide 声明再挂载 !--inject--import _Vue from vueimport moment from moment;export default {install(Vue: typeof _Vue, options: any) {Vue.prototype.$moment moment;Vue.prototype.$log () {console.log(new Date())}}}
!--types--import Vue from vuedeclare module vue/types/vue {interface Vue {$moment: Function$log: Function}}
复制代码ts中不能识别.vue文件 TypeScript 默认只识别 .ts 文件不识别 .vue 文件, 乖乖的写 import Component from components/component.vue vuex-class的Emit传参数给父组件报错 emit(reset)reset(role, this.formData){}!--此时报错--复制代码 错误-- 可选参数爆红 参考链接 vuets快速上手 ts通俗易懂比较清晰的文档 ts的官网 尤大大对于tsvue的看法 蚂蚁金服的ts实践 转载于:https://juejin.im/post/5cbdeec85188250aa922d52b
