typescript 入门教程一

时间:2022-10-20 16:16:02

##### 从今天开始,持续更新typescript入门教程系列....
目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来写的,所有是时候认真学习**ts**了
ts来源于微软公司,越是大的公司,越是大的项目,越是推荐使用ts来编码,ts是js的超集,在js上面增加一些内容,相对于js,ts具有以下的优点:
- 支持面向对象方法,之前js实现面向对象是通过*prototype,function*实现的,有点繁琐。ts提供了Class,Interface
- 类型检查。ts能够在编译的阶段就可以发现错误,减少bug率。在实际开发中,需要将ts编译成js,而且目前浏览器支持的是es5版本
- 自带文档特性。通过类型注解,很容易知道某一个参数或者变量是什么类型
- IDE或者是编辑工具支持良好(自动完成提示)

总的来说ts=js+type+(一些其他特性:枚举,接口等)
使用ts之前,首先需要安装node,安装好node之后会自带npm,npm是node包管理工具,其可以下载一些社区常用的包,我们通过npm来安装ts编译工具***typescript*** , `npm install typescript -g`
编写一个ts文件:index.ts,通过下面命令行工作`tsc index,.ts`,就可以将index.ts编译成index.js,最后在浏览器中运行(ts是没法在浏览器中运行的,必须进行编译)
```
var a:number
a=10
console.log(a)
```
上面就是定义了a的变量类型是number类型,如果这时候传string类型赋值给a,编译器就会保存
数据类型主要有:
- number,string,boolean,Array

示例,定义数组有两种方法:
```
let myArr1:string[]=["st1","st2"]
let myArr2:Array=["st1","st2"]
```
也可以给函数参数添加类型限制,这时如果传入的参数个数和类型和定义的形参不匹配,编译时候就会报错:
```
const add=(a:number,b:number)=>{
return a+b
}
console.log(add(2,4))
```
也可以为函数返回值添加类型
```
const add=(a:number,b:number):number=>{
return a+b
}
```
也可以给函数加上默认的参数,如果函数的返回值是空,可以设置返回值类型是void
```
const add=(a:number=8,b:number=10):void=>{
console.log(a+b)
}
```
也可以设置可选参数,如下:这时候b可以传可以不传
```
const add=(a:number=8,b?:number):void=>{
console.log(a+b)
}
```
如果需要将一个变量设置为任何类型。可以使用any,但是尽量少用any
```
let a:any;
a=10;
a="str"
a=[1,2,3]
```
如果需要设置一个变量为两种或者更多类型,可以使用联合类型的方式,|
```
let a:number | string
```
##### 类
很多语言具有面向对象的属性,包括ts,面向对象三大属性:封装,继承,多态了,可以将现实生活中的一切内容看成类或者对象一个Class,通过new()得到一个对象,一个对象有属性和方法(方法就是对属性进行操作)
```
class Person{
// 构造方法
constructor(fn:string,ln:string){
this.firstName=fn
this.lastName=ln
}
firstName:string;
lastName:string;
}
```
通过extends关键字,可以让一个类继承已有类的属性和方法:
```
class Person{
firstName:string
lastName:string
}
class Programmer extends Person{
}
let p=new Programmer()
p.firstName='jack'
p.lastName='chen'
console.log(p)
```
子类如果调用某个方法,如果在子类中已有该方法,则直接调用该方法,如果没有,则去调用父类的方法,如果强制调用父类的方法,可以把this换成super
类成员的可见性主要有public,private,protected
public:在类中和类的外面均是可以调用,默认就是public
private:只能在类中调用,子类和类外面是不能调用的,如果要调用私有的属性或者方法,可以通过公有的方法来访问,对外暴露公有的方法,子类也是可以继承父类的私有的方法和属性,但是必须通过父类暴露的公有方法进行访问
protected:只能在类中或者是子类中调用 ,**即使子类和父类生成的对象也是不能访问**
总的来说权限范围:public>protected>private
未完待续。。。

---

*如果觉得本文有收获,请我喝杯咖啡吧,你们的支持是我最大的动力*

typescript 入门教程一

typescript 入门教程一的更多相关文章

  1. 无废话SharePoint入门教程一[SharePoint概述]

    一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到SharePoint实施项目小组,就随着工作一起学习了一下实施与开发.但苦于网上SharePoint入门的东西实在太少,导致 ...

  2. [转]无废话SharePoint入门教程一[SharePoint概述]

    本文转自:http://www.cnblogs.com/iamlilinfeng/p/3026332.html 一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到ShareP ...

  3. andorid jni入门教程一之helloworld

    开发环境:windows2007, eclipse 做anroid越深发现用到底层开发的时候越多,但是我以前也没有搞过,因此现在打算好好学习学习.先从最简单的做起.正所谓万事开头难啊. 搞了近一天终于 ...

  4. 【Cocos2d入门教程一】Cocos2d-x环境搭建

    在进行Cocos2d游戏开发前 我们先来配置一下环境,我们先来准备一下工具,我们所需要的工具分别为: 1.Cocos2d引擎 2.JDK 3.SDK 4.NDK 5.ANT 6.ADT 1.下载Coc ...

  5. Zephir入门教程一

    一.如何安装 zephir-安装和初体验:http://blog.csdn.net/u011142688/article/details/51619811 二.如何使用 需要切到工作目录下,也就是co ...

  6. Angular入门教程一

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  7. Gemini.Workflow 双子工作流入门教程一:定义流程:流程图属性

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:流程定义:流程图属性. 步骤一:在流程管理的流程定 ...

  8. Unity -- 入门教程一

    首先声明一下,我用的Unity版本是4.6.6,编译环境是VS2010,其余的我会慢慢介绍,安装的过程这里我就不做讲解了,度娘那会做的比我详细.安装包可以在最下面的联系方式找我要,现在开始进入主题.  ...

  9. ibatis入门教程一

    这几天研究ibatis玩,参考一篇贴子进行安装配置:蓝雪森林 选择这个帖子来跟随配置是因为这个帖子看着比较干净,但是我仍旧在配置得过程中出现了好几个问题,所以我决定在这个帖子的基础上将更多细节加上,做 ...

随机推荐

  1. OC基本数据存储方式

    /** 一,数据存储 常用方式(5种) 1,XML属性列表 -- 保存在Doucuments文件夹 2,偏好设置(NSUserDefault)-- Library/Preference 需要配合wri ...

  2. IOS NSInvocation用法简介

    IOS NSInvocation用法简介 2012-10-25 19:59 来源:博客园 作者:csj007523 字号:T|T [摘要]在 iOS中可以直接调用某个对象的消息方式有两种,其中一种就是 ...

  3. Ubuntu 14.10 下安装Ganglia监控集群

    关于 Ganglia 软件,Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格.它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数 ...

  4. 02 - Tomcat配置

    Tomcat配置 本文内容 介绍 Windows UNIX daemon 1.介绍 首选看Tomcat目录下的RUNNING.TXT 2.Windows平台下 可以选择下载windows instal ...

  5. 关于Cocoapods安装与问题

    安装: 1.打开终端 2.如果网络没有FQ的话,需要通过淘宝的RubyGems镜像进行安装. 首先移除默认地址: gem sources --remove https://rubygems.org/ ...

  6. Visual simultaneous localization and mapping: a survey 论文解析(全)

    当激光或声纳等距离传感器被用来构建小的静态环境的二维地图时,SLAM的问题被认为是解决的.然而,对于动态,复杂和大规模的环境,使用视觉作为唯一的外部传感器,SLAM是一个活跃的研究领域. 第一部分是简 ...

  7. VS Code怎样设置成中文

    打开 VS Code Ctrl + Shift +p打开搜索框 搜索框内输入Configure Display Language 回车 修改代码中“locale”后面引号内内容为zh-CH 重新启动V ...

  8. java学习之路--零碎的知识笔记

    java运算符: 自增自减运算符: int b = ++a; 拆分运算过程为: a=a+1=4; b=a=4, 最后结果为b=4,a=4 前缀自增自减法(++a,--a): 先进行自增或者自减运算,再 ...

  9. 怎样从外网访问内网PostgreSQL数据库?

    本地安装了一个PostgreSQL数据库,只能在局域网内访问到,怎样从外网也能访问到本地的PostgreSQL数据库呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动PostgreSQ ...

  10. 【java多线程】线程状态分析

    一.java线程的状态 NEW: 新建状态,线程对象已经创建,但尚未启动 RUNNABLE:就绪状态,可运行状态,调用了线程的start方法,已经在java虚拟机中执行,等待获取操作系统资源如CPU, ...