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. Go语言(三)反射机制

    package main import( "fmt" "reflect" ) func main(){ // iterate through the attri ...

  2. (转)浅谈PostgreSQL的索引

    1. 索引的特性 1.1 加快条件的检索的特性 当表数据量越来越大时查询速度会下降,在表的条件字段上使用索引,快速定位到可能满足条件的记录,不需要遍历所有记录. create table t(id i ...

  3. IntelliJ IDEA 2017.3-2018.1 全系列汉化包

    JetBrains 系列软件汉化包 关键字: Android Studio 3.0-3.1 汉化包 GoLand 2017.3.2-2018.1 汉化包 IntelliJ IDEA 2017.3-20 ...

  4. 牛客网多校训练第一场 J - Different Integers(树状数组 + 问题转换)

    链接: https://www.nowcoder.com/acm/contest/139/J 题意: 给出n个整数的序列a(1≤ai≤n)和q个询问(1≤n,q≤1e5),每个询问包含两个整数L和R( ...

  5. BZOJ2407/4398:探险/福慧双修(最短路)

    Description 探险家小T好高兴!X国要举办一次溶洞探险比赛,获奖者将得到丰厚奖品哦!小T虽然对奖品不感兴趣,但是这个大振名声的机会当然不能错过! 比赛即将开始,工作人员说明了这次比赛的规则: ...

  6. windows8安装msi软件提示2503错误的解决办法

    windows8以后的版本安装msi软件(比如nodejs.msi.Git.msi.python.msi.T ortoiseSVN.msi)的时候老师出现2503.2502的错误,究其原因还是系统权限 ...

  7. 关于JWT.NET

    1.JWT的概念: JWT全称是Json Web Token,是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准( RFC 7519 ),定义了一种简洁的,自 ...

  8. mybatics之trim

    1.<trim prefix="" suffix="" suffixOverrides="" prefixOverrides=&quo ...

  9. [转]数据绑定之DataFormatString

    设定BoundField的DataFormatString,通常有以下几种 DataFormatString= "{0:C}" 货币,货币的格式取决于当前Thread中Cultur ...

  10. [转载]对iOS开发中内存管理的一点总结与理解

    对iOS开发中内存管理的一点总结与理解   做iOS开发也已经有两年的时间,觉得有必要沉下心去整理一些东西了,特别是一些基础的东西,虽然现在有ARC这种东西,但是我一直也没有去用过,个人觉得对内存操作 ...