typescript入门,可以一起探讨提点意见互相学习。
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入门,可以一起探讨提点意见互相学习。的更多相关文章
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- c++ 入门之深入探讨拷贝函数和内存分配
在c++入门之深入探讨类的一些行为时,说明了拷贝函数即复制构造函数运用于如下场景: 对象作为函数的参数,以值传递的方式传给函数. 对象作为函数的返回值,以值的方式从函数返回 使用一个对象给另一个对象初 ...
- TypeScript入门实例
前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...
- typescript 入门教程一
##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...
- TypeScript入门五:TypeScript的接口
TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...
- TypeScript 入门教程学习笔记
TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- TypeScript入门文档
typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top
随机推荐
- Windows 实用小工具
超实用的Windows工具 ====================================================================================== ...
- git-day1-安装和基础使用
Git介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...
- yii2.0用gii自动补全代码做的简单增删改查,以及图片上传和展示
首先已经用gii根据model层生成了控制器,模型,视图层. 表结构为如图所示:表名为zhoukao1,
- July 06th 2017 Week 27th Thursday
Knowledge is the antidote to fear. 知识可以解除恐惧. Fear always steps from unknown things. Once we know wha ...
- angular里forRoot的作用
模块A是这样定义的 @NgModule({ providers: [AService], declarations: [ TitleComponent ], exports: [ TitleCompo ...
- hdu 6208 The Dominator of Strings【AC自动机】
hdu 6208 The Dominator of Strings[AC自动机] 求一个串包含其他所有串,找出最长串去匹配即可,但是匹配时要对走过的结点标记,不然T死QAQ,,扎心了.. #inclu ...
- JQuery获取和设置Select选项的常用方法总结
1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&q ...
- 3.为JDeveloper添加不能的workspace
1.点击选中JDeveloper,在属性中,选中快捷方式, 可以看到目标中的值为C:\Oracle\Middleware\jdeveloper\jdeveloper.exe, 只需要在修改为C:\Or ...
- thrift C++ Centos 安装
1.在官方下载thrift http://thrift.apache.org/download 这里下载thrift-0.11.0.tar.gz版本 2.如果想支持安装Cpp版本就需要先安装boost ...
- alibaba--java规范
18. [推荐]final 可以声明类.成员变量.方法.以及本地变量,下列情况使用 final 关键字: 1) 不允许被继承的类,如:String 类. 2) 不允许修改引用的域对象,如:POJO 类 ...