从项目中由浅入深的学习typescript (3)

40次阅读

共计 1406 个字符,预计需要花费 4 分钟才能阅读完成。

序列文章
从项目中由浅入深的学习 vue, 微信小程序和快应用 (1) 从项目中由浅入深的学习 react (2)
前言
为什么会有 TS? 大家有没想过这个问题, 原因是 JS 是弱类型编程语言, 也就是申明变量类型可以任意变换。所以这个时候 TS 出现了。TS 是 JS 的超集,也相当于预处理器, 本文通过一个 template 项目来让你快速上手 TS。
1. 效果图
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 中提供的操作符即可

@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)

正文完
 0