Typescript基础学习理解

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准

如何理解超集？(从编译原理中看)

根据官方的配置方式，使用vscode作为TypeScript的编译器执行程序代码，这是在控制台编译运行的方法：
如上图使用tsc方式来运行以.ts结尾的文件,编译好后,生成了一个.js结尾的文件,文件名和之前命名相同:
于是我们使用node执行运行.js文件,这就是编译运行TypeScript代码的方式

any

需要注意以下三点:

//any关键词:用来表示允许赋值为任意类型。

  //1.关键词为any

  //2.特点:被any修饰的变量后续可以改变类型(编译不会出现报错):

  let str02:any = "any";
  console.log(str02);
  str02 = 7;//编译通过
  console.log(str02);

  //3.注意:  
   //声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

   //对一个未声明类型的变量赋值(区别于命名连着赋值,是先声明,然后换行赋值),该变量默认为any类型:
   let str04;//会被识别为任意类型,类型随后续赋值类型改变
   console.log(typeof str04);//undefined
   str04 = "333";
   console.log(typeof str04);//string
   str04 = 7;
   console.log(typeof str04);//number

类型推论(TypeScript相比于JavaScript的特色)

理解类型推断:

//类型推断:

  //1.是什么?
  //-->在给一个变量赋值的时候,编译会自行推断变量的类型并与该变量绑定
  let str02 = "www";//已经声明并赋值:等价于:let str02:string = "www";
  console.log(typeof str02);//string-->类型推断为string
  str02 = 7;//编译报错

联合类型

联合类型我认为是typescript对类型限制使用any解决变为更加灵活的另一种方式:联合类型（Union Types）表示取值可以为多种类型中的一种。以符号”|”为标志:

let str01: string|number;
str01 = "www";
str01 = 777;
console.log(str01);//777

//使用声明的类型之外的类型覆盖:
str01 = true;//编译报错

接口

TypeScript中的接口我认为非常的灵活,不是像Java中”抽象方法的集合体”般的描述,将可存在的属性和方法结合成一个更加灵活广阔的”接口”

//定义Person接口属性
interface Person{
    name:string;//属性声明-->变量:类型
    age:number;
}

//上面Person接口定义了两个属性,我们用实例实现:
let tom:Person={ 实现方式:let 实例名:接口名{...}
    name:"tom";
    age:19;
    //birth:2002.02.13-->去掉注释编译报错:这种接口不能够多属性也不能够少属性或者方法
}
//

TypeScript的接口的灵活性一是体现在属性定义,另一个就是满足属性完整性(注意掌握四点属性):

1.确定属性和2.可选属性
interface Person{
    name:string;//1.确定属性
    age?:number;//2.age属性变为可选,意思是可以实例可以不存在该属性,格式:变量?:变量属性;
}

let tom:Person{
    name:tom;
    //age:28;-->去掉注释该行不会报错
    //gender:"male";//去掉注释该行报错,不能出现未定义的属性
}

3.任意属性:
interface Person {
    name: string;
    age?: number;
    [propName: number]: string;//任意属性格式解析:propName为自定义属性名,number是属性名的类型,string是这个属性键值对对应的类型
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

注意:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的子集-->如何理解子集?,以上面例子为例,name属性为确定属性他的类型为string,age属性为可选属性,类型为number,那么确定属性和可选属性的集合就是[number,string],下面任意属性的属性名是number,属性的值为string类型,那么任意属性的集合就是[number,string],那么符合子集说明,程序不会报错,如果将任意属性的属性对应的值改为string,那么任意属性的类型集合就是[string,string],不符合子集说明,编译报错

4.只读属性:--readonly
interface Person {
  readonly id: number;//理解:readonly关键字--属性的修饰符
  name: string;
  age?: number;
  [propName: string]: any;
}

//readonly理解:只读约束在第一次给对象赋值的时候就有,而不是第一次给只读修饰的属性赋值的时候
let tom02: Person = {
  id:1,
  name: 'Tom',
  gender: 'male'
};//这是第一次给对象赋值的时候，所有属性都需要依次赋值

//tom.id = 89757;

函数

TypeScript相比于JavaScript最大的特点就是对函数的输入输出进行了强调，即通过限制函数输入输出的类型使得函数变得灵活：

1.对函数声明式函数定义：

fun sum(x:number,y:number):number{
 return x+y;  
}
//上面这段函数需要注意两点：
  //1.函数接收两个类型为number类型的实例参数，返回number类型的结果，如果传入类型不对会出现编译报错
  //2.函数的实际输入参数少于或多于形式参数都会编译报错

2.对函数表达式定义

//新的知识："=>"符号
//用途：这个符号可以用来定义函数：

//通常我们定义一个函数表达式：
let func01 = function(x:number,y:number) :number{return x-y;}
console.log(typeof func01);//function

//这种方式编译不会报错，因为编译时对"="右边进行了类型推断，将function和fun01进行了绑定

//但是我们可以使用"=>"给函数表达式手动添加类型：
let func02:(x:number,y:number)=>number = function(x:number,y:number) :number{return x-y;}

//格式解析：首先和所有变量定义类型一样":"符号，然后声明输入的属性及其类型，多个输入添加"()"，然后使用"=>"连接输出属性的类型
//这里注意不要混淆了TypeScript和ES6中对于"=>"符号是有区别的，TS中只表示函数的定义

3.接口定义函数的形状和可选属性：

//掌握格式即可：
interface Func{
  (source:string,subString:string):boolean
}

//可选属性：和接口可选属性一样，让函数的传入参数不再必须多于或者少于：
function buildname(firstName:string,lastName?:string)//lastName为可选属性{}