图片描述

序列文章

从项目中由浅入深的学习vue,微信小程序和快应用 (1)
从项目中由浅入深的学习react (2)

前言

为什么会有TS? 大家有没想过这个问题,原因是JS是弱类型编程语言,也就是申明变量类型可以任意变换。所以这个时候TS出现了。
TS 是 JS 的超集,也相当于预处理器,本文通过一个template项目来让你快速上手TS。

1.效果图

从项目中由浅入深的学习typescript (3)-脚本宝典
vue-ts-template , 欢迎star

2.技术栈

1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont

3.核心插件

技能点 对应的api
vue-class-component 是vue官方提供的,暴露了vue和component实例
vue-property-decorator 是社区提供
深度依赖vue-class-component拓展出了很多操作符@Component @Prop @Emit @Watch @Inject
可以说是 vue class component 的一个超集,正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可

vue-property-decorator暴露的API

API 作用
@Component 注册组件
get 类似vue的computed
@Prop,@Emit 组件传值
@Watch 监听值变化
@Privde,@Inject 对应privde和inject
高阶组件用法,作用是多级父组件传值给子
@Model 类似vue的model

4.TS语法

数据类型 any(任意类型);
number;
string,
boolean;
数组:number[]或new Array(项的数据类型相同);
void返回值类型;
null;
undefined;
never(从不出现值);
元祖(比数组强大,项的类型可以不同);
接口:interface关键字;
对象:类似JS的object;
函数:function声明;
类:class关键字,包括字段,构造函数和方法
变量声明 let [变量名] : [类型] = 值, 必须指定类型
声明array,let arr: any[] = [1, 2]
运算符,条件语句,循环 同JS
函数 声明同JS,形参必须指定类型,因为形参也是变量
联合类型 通过竖线声明一组值为多种类型
命名空间 namespace关键字
模块 import和export
访问控制符 public,private(只能被其定义所在的类访问)和protected(可以被其自身以及其子类和父类访问)
默认public,是不是有点Java的味道

5.问题来了

1.怎么在项目手动配置ts?
vue+ts项目配置

2.接口和类的区别?
接口只声明成员方法,不做实现 ,class通过implements 来实现接口
ts中接口和类的区别

3.接口和对象的区别?
接口是公共属性或方法的集合,可以通过类去实现;
对象只是键值对的实例

4.类class和函数的区别?
类是关键字class,函数是function
类可以实现接口

5.接口实现继承方法?

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

本文固定链接: http://www.js-code.com/vue-js/vue-js_26666.html