TypeScriptts使用—类型断言—访问控制符—泛型

介绍

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化

为什么要用TypeScript

1、开源

2、简单

• TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。

3、兼容性好

• TScript 是 JS的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JS，所以 TScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。任何现有的JS程序可以不加改变的在TScript下工作。

TypeScript与js的区别

• TypeScript工具使重构变的更容易、快捷。**

• TypeScript引入了javascript中没有的"类”的概念。**

• TypeScript中引入了模块的概念，可以把声名、数据、函数和类封装在模块中。**

• 类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

特点

• 可以在开发阶段和编译阶段就发现大部分错误，这总比在运行时候出错好
• 不显式的定义类型，也能够自动做出类型推论
• 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
• Google 开发的 Angular 就是使用 TypeScript 编写的
• TypeScript 拥抱了 ES6+ 规范

安装

• node 服务器 。
• TypeScript解释器npm install -g typescript -g全局安装 ，在本机上 哪里都能用。
• tsc空格-v命令用来测试是否安装成功。

使用步骤：

• 新建test.ts
  随便写上一些代码，js的代码就行（因为ts完全支持js）
• 使用命令：tsc test.ts 把ts编译成js
  在当前目录下就会产生一个test.js文件。
• 新建html文件，引入test.js文件，就ok了。

类型

原始类型

js里本来就有的(基本)类型：boolean，number、string、null、undefined、Symbol

ts里新增的类型：void、any、never、联合、函数、数组类型、类 …

基本语法：

• 声明 变量:类型; //定义变量，没有赋值时，默认值是： undefined
• 声明 变量:类型=值; //定义变量并赋值。严格要求值是定义的类型

let n:number; //定义一个变量n，类型是number，没有赋值，默认值是undefined
let num:number = 12; //没有问题
num = "hi"; //出错，类型不对。
let str:string = "hello";

编译

编译所完成的事情，就是把ts的代码转换成js的代码。因为浏览器或者node环境最终识别的是js，而不是ts。

ts变量作用域

全局作用域(项目) 默认
在一个项目目录下，所有文件的变量都暴露在全局

模块作用域(文件)

变量封闭在模块内部，在内部全局使用。所以，只有 在文件内部使用了export（export default）就会让全局变量变成模块作用域。
如：

let temp:number; //定义变量，作用域范围是当前文件（模块）
temp = 12;
export {}; //就可以让当前文件的全局变量成为模块作用域（即：当前文件任何地方都可以使用）

模块作用域(文件)

变量封闭在模块内部，在内部全局使用。所以，只有 在文件内部使用了export（export default）就会让全局变量变成模块作用域。
如：

let temp:number; //定义变量，作用域范围是当前文件（模块）
temp = 12;
export {}; //就可以让当前文件的全局变量成为模块作用域（即：当前文件任何地方都可以使用）

函数作用域，块级作用域等等

类型推论

定义变量时，没有明确的指定数据类型，ts会依照值推断出一个类型。

let a ="hi"; //虽然没有明确类型，但是ts推论出a变量是字符串类型
a=200; //这句话不能通过,因为前面给a赋值的字符串，默认他就是字符串

联合类型

一个变量的取值可以是多种类型。
如：

let temp: string | number; //表示temp变量的取值可以是string，也可以是number
temp = 12;//没有问题
temp = "hi";//没有问题
temp = false;//不行。

对象类型

对象的类型使用class或者接口来描述
注：
readonly：只读属性
？：可选属性

//interface是关键字
//IPerson是自定义类型
interface IPerson{
    name:string,//必须的属性值
    readonly sex:string|number,//只读联合类型
    age?:number//可选
}
let p1:IPerson={
    name:"guo",
    sex:"男",
    age:18
}

数组元素的类型

// 变量:类型[] 
// 变量:Array<类型> 
// let 变量:(类型名|类型名2)[]

let arr:number[]=[1,2,3,4]//只能传入数字
let arr2:(number|string)[]=['aa',12]//可传数字也可传字符串
let arr4:Array<number>=[12,3]

函数中的类型

对函数的限定，能够限定形参的类型，返回值的类型。

形参：输入

返回值：输出

即：函数的限定就是限定它的输入和输出
//声明式

//声明式
//function 函数名(参数:类型):返回类型{函数体}
function sum(x:number, y:string):string {}

//函数表达式

//定义函数类型，不赋值
//let 变量:输入类型 => 输出类型 
let show3:(a:number,b:string,c?) => number;

//函数表达式
//定义的同时赋值

//let 变量:输入类型 => 输出类型 = function(参数){}
let show3:(a:number,b:string,c?) => number = function (a,b){
  return a;
}

//接口定义函数类型(自定义类型)

interface Func {
  (a:number,b:string):boolean
}

let show5:Func = function(a,b){return false}

// void类型修饰函数返回值时，表示函数不能有任何返回值
function fn():void{
    return "hi"; //出错
}

类

不支持es6类的写法。支持es7的写法。

// 解释：什么时候使用类属性（方法）
// 当属性的值（方法）和对象没有关系，或者说，不会因为对象的不同而不同时，使用类的属性。
// 当要完成工具性的函数时，一般都是静态（类）的方法

class Person{
    //实例属性
    name1="张三疯"; //定义属性name，值为 张三疯
    age:number;//age属性没有赋值

    //实例方法
    show(){
        console.log(this.name1,this.age);
    }
    //构造函数
    constructor(name,age){
        this.name1 = name;
        this.age = age;
    }

    //静态属性(类的属性)
    static count=0;
    
    //静态方法（类的方法）
    static max(){
        return 110;
    }
}
//类的属性(方法),就是用类名直接访问的
console.log(Person.count)//0
console.log(Person.max())//110
//实例化对象属性(实例化对象对象属性(方法)),就是用对象名访问
let p1= new Person("1",2)
console.dir(p1)//Person {name1: "1", age: 2}

类型断言（断定）

绕过编译器的类型推断，手动指定一个值的类型
格式：
1）、<类型>变量
2）、变量 as 类型

(<string>a).length   //断言字符串
(a as string).length //断言字符串

断言类型不做类型转换

function fn(a:string|number):boolean{
    //a.length; 这么写是错的，因为，a的取值有两种可能性，length没法直接使用，会报错
    // 使用断言，就不会报错
    let n:number = (<string>a).length; 
    console.log(n);
    return true
}
fn("hello"); //5
fn(120);//undefined

访问控制符

控制类内部的属性(实例，类)|方法(实例，类) 的被访问权限
1、public 公共的，谁都可以访问(类内、外)，默认就是public
2、protected 受保护的，当前类内部+子类内部可以使用。
3、private 私有的，当前类内使用

class Person {
    protected num:number=10
    public namee:string='张三丰';//实例属性
    private age:number; //私有的，只能当前类内部使用
    protected address:string; //受保护的，当前类内部及其子类内部
    address2:string; //不加的情况下 是public
  
    protected static VER:string='1.11.1' //类属性 静态属性
      
      constructor(namee:string,age:number){
             this.namee = namee;//实例属性第一次的修改
          this.age = age||0;//实例属性第一次的修改
    }
  
    private show(){}   //私有的实例方法
    private static show2(){} //私有的类方法（静态方法）
  }
  let p1=new Person("哈哈",1)
  console.log(p1)//Person {namee: "哈哈", age: 2}
//   console.log( p1.age)//会报错，属性“age”为私有属性，只能在类“Person”中访问。
//   console.log(p1.address)//会报错，属性“address”受保护，只能在类“Person”及其子类中访问。

class Demo extends Person{
    fun(){
        console.log(this.num)//可以使用
        // console.log(this.age)//报错，属性“age”为私有属性，只能在类“Person”中访问。
    }
}

泛型

在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。
其实就是把类也当作变量（类是可变的，未知的）使用，把类放在<>尖括号内，表示声名的类型。

• 定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}
• 如：
  function 函数名(length: number, value: T): Array {}；其中T就是类型的变量名；调用 函数名(参数) //给变量T赋值为string。

1、函数里使用泛型

function fun<T>(a:number,b:T):any{
    return a+"----"+b
}
let demo1=fun<string>(8,"哈哈")
console.log(demo1)//8----哈哈

2、类里面使用泛型

class Person1<T,S>{
    name:T;
    sex:S;
    age:number
    constructor(name,sex,age){
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
}
let demo2=new Person1<string,number>("张三","name",18)
console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}

注意看与上面不同的地方

class Person1<T,S>{
    name:T;
    sex:S;
    age:number
    constructor(name:T,sex,age:number){
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
}
let demo2=new Person1<string,number>("张三","男",18)
console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}