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

你的名字 2022-12-20 02:19 129阅读 0赞

# 介绍 #

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）就会让全局变量变成模块作用域。  
如：

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

## 类型推论 ##

定义变量时，没有明确的指定数据类型，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}