typescript是js的一个超集,TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。这个语言添加了基于类的面向对象编程,可以帮助我们更好的理解什么是面向对象编程!

  这篇文章只简单的讲解一下ts的扩展方法,不讲扩展符,剪头函数等es6已经支持的语法基础了。

  一、类型批注和类

class Person {
//protected name; protected是可以内部和子类调用
//public name; public是内部和外部都可以调用,默认为public
//private name; private 只能类内部访问
constructor(public name:string){ //constructor是构造函数,只有被new的时候被调用,且只被调用一次。
// public name:string 这个是制造一个约定,new这个实例时候必须传入一个name才可以;不写public如Employee中写法也可
//在构造函数里写不写public是两种概念,写public 下面this.name才可以有值
}
eat(){
console.log(this.name);
}
}

  * name:string 为类型批注,这个是可以写可以不写的,对于基本类型的批注是 number, bool 和 string。而弱或动态类型的结构则是 any 类型。如果没有类型批注那么就默认为any类型。

  二、继承

// extends 为继承,下面表示 Employee继承了Person类
// super 为调用父类的方法
class Employee extends Person{
//super调父类的构造函数
constructor(name:string,code:string){
super(name);//必须调用父类的构造函数,不调报错
console.log("xixi");
this.code=code;
}
code:string;
work(){
super.eat();
this.doWork();
}
private doWork(){
console.log('im working');
}
}

  * 注意在子类中如果有构造函数声明则必须调用父类的构造函数,不调则报错。

  调用就用这个super来调就可以。如上述代码super(name);

  为什么必须调用不调就报错呢?个人这样理解的,子类本来就继承了父类的属性和方法,构造函数是指new这个实例时候必须遵从这个约定才可以使用,那么子类继承父类所以在制造一个约定的时候必须也遵从父类的这个约定才可以,所以必须调用一下这个父类的构造函数,不知道我这样解释大家可以明白不。。。

  总结super:有两种调用方式,一个是调用父类的构造函数,一个是调用父类的方法,如super.eat();

var e1 = new Employee("name","");
e1.eat(); //输出name

  如这段代码,new了一个子类Employee传入两个值(因为构造函数约定必须传两个值就必须传,不传则报错),可以直接调用父类eat函数

  三、泛型

    参数化的类型,一半用来限制集合的内容
var workers:Array<Person> = []; //泛型,指定一个数组只能放某一个类型的元素,其他不行
workers[] = new Person("zhangsan");
workers[] = new Employee("lala","");
workers[] = ; //报错

  如上述代码,指定了workers是Person类型的数组那么workers只可以放person类型的 ,那么有伙伴就会问了,为什么也可以放Employee类型的?因为Employee类型继承了person类型的属性和方法,Employee是person的子类,所以也可以放Employee。

  四、接口

    用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
  第一种看如下代码
  

interface IPerson{
name:string;
age:number;
}
class Person2{
constructor(public config:IPerson){//当接口用作一个类的构造声明时,在newperson调用时会检查接口的属性是否符合 }
}
var p10 = new Person2({
name:"zhangsan",
age:,
})

    interface是接口 声明了一个Iperson这个东西吧,意思就是:person2里面构造函数说了,必须遵循这个接口!就是说new我的时候必须遵循IPerson不管是类型还是数量还是键的名字,都要遵循!不然就报错。

  第二种接口方式声明一个函数,

interface Animal {
eat();
}
class Sheep implements Animal{//implements关键字代表该类实现该接口,该类必须定义接口中的方法
eat(){
console.log("i eat grass");
}
}
class Tiger implements Animal{
eat(){
console.log("i eat meat");
}
}

  接口声明了Animal这个东西里面有一个eat函数,那么implements关键字代表该类实现该接口,该类必须定义接口中的方法,就是说哪个类用了这个接口就必须给我声明一个这个eat函数,不然不遵从就不行。

还挺任性的,也就是强制让大家都遵从这个约定来开发。

  五、析构表达式

function getName(){
return {
id:"",
borth:"",
aaa:{
a1:"lala",
a2:"fafa"
}
}
}
var {id:ids,aaa:{a2},aaa:{a1:as}}=getName();
console.log(ids);//
console.log(a2);//fafa
console.log(as);//lala

这个就是析构表达式啦!就是这样直接就可以取到对应的值,如果要另外声明别的名字就:xx就可以了。

另外想说一个问题就是ts这个文件会搜索类是否重复,两个文件用了共同的类的名字都是会报错的哦。

如果有说的不对的地方请各路大神指正,互相交流增长经验,感谢感谢。

typescript入门,可以一起探讨提点意见互相学习。的更多相关文章

  1. TypeScript入门一:配置TS工作环境

    配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...

  2. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  3. c++ 入门之深入探讨拷贝函数和内存分配

    在c++入门之深入探讨类的一些行为时,说明了拷贝函数即复制构造函数运用于如下场景: 对象作为函数的参数,以值传递的方式传给函数. 对象作为函数的返回值,以值的方式从函数返回 使用一个对象给另一个对象初 ...

  4. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  5. typescript 入门教程一

    ##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...

  6. TypeScript入门五:TypeScript的接口

    TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...

  7. TypeScript 入门教程学习笔记

    TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...

  8. TypeScript 入门自学笔记 — 类型断言(二)

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  9. TypeScript入门文档

    typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top

随机推荐

  1. The categories of Reinforcement Learning 强化学习分类

    RL分为三大类: (1)通过行为的价值来选取特定行为的方法,具体 包括使用表格学习的 q learning, sarsa, 使用神经网络学习的 deep q network: (2)直接输出行为的 p ...

  2. java访问windows远端共享文件的方法

    没密码的,直接用url访问就可以了,跟本地文件相同. 有密码的,用smb. 远端需要开启smb. win10启动smb的方法:https://jingyan.baidu.com/article/47a ...

  3. Sql的一些常规判断

    sql server中如何判断表或者数据库的存在,但在实际使用中,需判断Status状态位:其中某些状态位可由用户使用 sp_dboption(read only.dbo use only.singl ...

  4. OC NSArray使用

    #import <Foundation/Foundation.h> #import "Student.h" #pragma mark 创建一个数组 void array ...

  5. 集合HashMap和HashSet中迭代器的使用

    package setTest; import java.util.HashMap;import java.util.HashSet;import java.util.Iterator;import ...

  6. String.format字符串拼接

    一.String.Format1.简介      String类的format()方法用于创建格式化的字符串以及连接多个字符串对象. 2.参数      format()方法有两种重载形式. form ...

  7. [LCOI2018][WX] Tirpitz

    \([LCOI2018][WX11.1]~Tirpitz​\) 时限:1s 内存限制:131072KB 输入文件: T.in 输出文件: T.out 题目背景 王九日很颓废,这也就是他为什么这么弱的原 ...

  8. HDU 2018母牛的故事(类似斐波那契,找规律)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2018 母牛的故事 Time Limit: 2000/1000 MS (Java/Others)     ...

  9. vue+webpack搭建项目

    1.全局安装node.js 2.安装vue-cli 可以在项目目录安装 npm install -g vue-cli 使用vue-list命令选择webpack模板 vue init webpack ...

  10. linux 重启 启动 apache服务

    如何使用service  httpd restart,不成功的话,直接去apache文件目录里去找可执行文件,执行启动. 一般apache目录 ./usr/local/httpd/bin ,在bin目 ...