【Typescript】基础知识小总结
2020-02-16 09:54:37
标签：it
最近磕TS，不磕不知道，ts包括了很多js的基础知识点，然后结合es6，有了更多的完善的的地方，对开发环境更加的友好。我将我学习到的新知识点，和涉及的老知识点做一个总结。
一、类型
最特别的第一个总结，与js不一样的是，ts有了类型注解，也就是说，每一个对象、数组、函数都可以定义类型注解。
在编译器中实验可以得知，类型注解不是强制的，但是编译器可以根据你的赋值，推断出你定义的变量应该赋什么值。这也叫类型推断。在编译的时候，如果没有定义类型注解，应该多查看编译器推断的注解是不是需要的，不然可能会有隐藏的雷。
类型注解可以分为两类：
对于基础类型的类型注解的示例：
const a:string = 'hello'
在此只说在程序里如何定义，每一个的详细意思在平时编程里或多或少能遇到，或者在网上也有更详细的总结。在这里想特别提一下any，它比较特别，可以有两个用处，一是不知道怎么定义的时候可以用any先暂时定义，或者类型推断，如果类型推断不正确也喜欢推断成any，这里需要注意一下。在学习的时候，过来人的建议，由于any用的太过频繁，甚至有人直接称typescript为anyscript，失去了用它的初衷。
下面一个一个写对象类型的示例：
1、函数
基础写法：
const function = (str:string) => {
return parseInt(str,10)
}
注：此处未注明function的类型，是因为编译器会自动推断为number
函数中多个对象定义类型的写法：
function getNum({fir,sec}:{fir:number,sec:number}){
return fir,sec
}
或者
function getNum:({fir,sec}:{fir:number,sec:number}) =>number = (fir,sec) =>{
return fir,sec
}
注：传入值如果是实现定义好的不会强制检测
2、数组
基础写法：const arr:number[] =[1,2,3]
定义类型不唯一的写法： const arr:(number | string)[] = [1,'hello',2]
定义的类型是一个对象：const arr:{ name: string} [] =[{ name:'json' },{ name: 'dora'}] //注意此处是定义的每一个对象都有一个name，值的属性是string的意思，在对象中就不存在其他类型的对象了。
如果类型定义太长，也可以写一个类型别名，之后再引用：
type test = { name : string , age : number }
const arr:test[] = [{name:'json',age:22},{name:'dora',age:25}]
如果想定义数组中每一个元素的属性，可以用元组，例如：
const arr:[string,number,string,number] = ['hello',1,'world',2]
3、interface接口
和类型别名相似，interface可以集中定义属性，但是和类型定义的区别在于，作用的对象有不同，interface可以作用于函数、对象、类。
interface可以定义属性，也可以在其中定义方法。下面是示例代码：
interface Count {
name:string;
age:number;
count():void
}
在interface中也可以单独定义属性，常用的是readonly只读属性，它和const都具有只读属性，区别是const作用于变量，readonly作用属性；'?'可有可无的属性，也就是说该元素的有无不强求；[propName:string]:any 可接受其他字符串的属性，下面是统一的示例代码：
interface Count {
readonly name:string;
age?:number;
count():void;
[propName:string]:any
}
interface定义的类，示例代码如下（interface定义沿用上文的）：
class CountNum implements Count{
...
｝
interface接口也可以继承，示例代码如下：
interface Count1 extends Count {
sex:string
}
注：Count1为子接口 Count为父接口
interface可定义函数，代码示例如下：
interface Num {
(fir:number,sec:number):number
}
function add:Num=(first:1,sec:2) =>{
...
}
二、类
类可以将属性、方法放在一起，在es6的时候，将这个定义提了出来，它是一个面向对象的函数，可以继承，可以被重写等。在我看来，类不止是一个语法糖，它使得js的应用范围变得更加的广泛和具有更多的可能性。
基础定义：
class xx {
name='hello';
say(){
return this.name
}
}
注：xx为类的名字
1、类实例化
使用类的内容之前都需要先实例化，如下例：
const person = new xx();
2、类的继承
1、extends：
class xxx extends xx {
... //定义新方法、属性
}
注：1、xxx为子类名，xx为父类名
2、子类里如果有和父类重名的方法，父类相同的方法会被重写
2、super：
class xxx extends xx{
say(){
return super.getname() + ' hello '
}
}
super既继承了父元素，又不会被重写。
3、类的类型
private:允许在类的内部调用
protected:允许在类内及继承的子类中使用
public :允许在类的内、外被调用
4、关于static
1静态方法，不会被实例继承，只能通过类的调用
2在一个静态方法中同一个类中有其他静态方法可以通过this调用
3非静态方法中，不能直接通过this调用，而是通过类名调用：CLASSNAME.STATIC_METHOD_NAME()或用构造器中的属性：this.constructor.STATIC.METHOD_NAME()调用
4不能被实例继承，可以被子类继承
5、constructor
在类实例化的瞬间，constructor会自动执行，作为类的构造器，如果实例未定义constructor，实例化后默认函数中有可空的constructor。constructor方法默认返回实例对象，即this。也可以返回其他对象。
子类的constructor中，需要super父类的constructor，即使父类的constructor为空，子类的super()也需要写。
6、getter和setter
在私有类中，可以通过getter和setter得到和设置数据：
class Person{
constructor( readonly _name:string) {
get name(){
return this. _name +'world'
}
set name(name:string) {
const realname = name.split(' ')[1];
this._name = realname;
}
}
}
const person = new Person('hello');
//输出 ‘hello world’
person.name = 'dora';
//输出‘dora world’
7、抽象类
可定义属性，方法，无需赋值，不能实例化，只能被继承，需注意，定义的抽象方法，在子类需要被实现。大致写法如下：
abstract class XX{
abstract say():string
width:number
....
}
