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

ninefive 发布于2019-08-23 16:59 / 2982人阅读

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习前言为什么会有大家有没想过这个问题原因是是弱类型编程语言也就是申明变量类型可以任意变换。是的超集，也相当于预处理器本文通过一个项目来让你快速上手。

序列文章

从项目中由浅入深的学习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 中提供的操作符即可

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 = {}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

GPU云服务器云服务器从云服务器中获益的企业深度学习的项目 java项目中的调度 C 从 UTF-8 流中读取字符串的正确

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103630.html

从项目中由浅入深的学习koa 、mongodb(4)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习从项目中由浅入深的学习前言的出现前端已经可以用一把梭从前端写到后台。 showImg(https://segmentfault.com/img/bVbrRI5?w=1920&h=1080); 序列文章从项目中由浅入深的学习vue,微信小程序和快应用 (1)从项目中由浅入深的学习react (2)从项目中由浅入深的学...

null1145 2019-06-26 18:01 评论0 收藏0
阿里云前端周刊 - 第 15 期

摘要：推荐为什么我们选择本文是工程师记述在前端技术选型时选用的考虑过程。能够保证较好的类型覆盖，但是其对于多态性的支持并不是很好，并且的社区也相对活跃。引擎就是为解决这一问题而生，在中也是采用该引擎来解析。推荐 1. 为什么我们选择 TypeScript https://redditblog.com/2017/0... 本文是 Reddit 工程师 Niranjan Ramadas 记述在...

stefanieliang 2019-08-20 17:52 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0