# TypeScript

**Repository Path**: qiang-xiaoyue/type-script

## Basic Information

- **Project Name**: TypeScript
- **Description**: 学习typescript笔记
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-23
- **Last Updated**: 2023-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript

#### 介绍
学习typescript笔记

##### TS配置信息
1.  配置文件为：tsconfig.json
2.  基本内容：
```
{
  "compilerOptions": {
    "module": "system",
    "target": "es6",
    "sourceMap": true,
    "outDir": "./js",
    "outFile": "./js/all.js"
  },
  "exclude": [
    "node_modules"
  ],

}
//ts编译器的配置文件
//include 指定哪些ts文件路径需要被编译
//exclude 不需要被编译的目录
//files 需要被编译的ts文件
/*
  compilerOptions 编译器的选项
      target，被编译的es版本
      module, 使用模块化的标准
      outDir, 指定编译的js文件目录
      outFile, 将编译的js文件，合并为一个文件
      allowJs, 是否编译js文件
      checkJs, 是否检查js代码是否符合规范，默认false
      removeComments， 是否移除注释
      noEmit, 编译但不生成文件
      noEmitOnError: true, 发生错误时不编译
    
      noImplicitAny: true, 不允许隐式的any
      noImplicitThis: true, 不允许不明确的this
    
      strict: true, 严格模式打开。
*/
```



#### TS基础类型

1.  any(任意类型)
2.  number（数字类型）
3.  string（字符串类型）
4.  boolean（布尔类型）
5.  数组类型

``` 
    //在元素类型后面加上[]
    let arr: number[] = [1,22];
   
    //使用数组泛型
    let arr: Array<number> = [1,2];
```
6.  元组类型
```
    //元组类型用于表示已知的元素数量和类型的数组，各元素类型不必相同，对应位置的需相同。
    let x:[string, number];
    x = ["字符串", 18];
    console.log(x[0]);  //输出 字符串；
```
7.  enum（枚举类型）
```
    //枚举类型用于定义数值集合
    enum Color(red, green, blue);
    let c: Color = Color.blue;
    console.log(c);  //输出 2

```
8.  void
```
    //用于标识方法返回值的类型，表示该方法没有返回值
    function hello(): void{
        alert("hello！！！");
    }
```
9.  null(表示对象值缺失)
10.  undefined（用于初始化变量为一个未定义的值）
11.  never （never为其他类型的子类型，表示不会出现的值）

>   注意：TS 和 JS 没有整数类型。

####  属性的声明关键字
1.   public
>   公共的，可以在任何位置访问（修改）
2.   private
>  私有的，只能在类的内部访问（修改）
>  通过方法，把属性给外部访问（修改）
>  使属性的访问（修改）更可控。例如设置属性的修改条件。
>  getter 和 setter的使用，TS中提供了get和set来访问修改私有属性。
```
class A{
    public _name: string;  //公共的，任何位置访问（修改）
    private _age: number;  //私有的，类内部访问（修改）
    protected _sex: string; //受保护的，类内部和子类访问（修改）
    constructor(name: string, age: number, sex: string){
        this._name = name;
        this._age = age;
        this._sex = sex;
    }

    //添加方法，把private 私有属性被外部访问。
    getAge(){
        return this._age;
    }
    setAge(value: number){
        if(value > 0){
            this._age = value;
        }
    }
    /*
        TS 提供了get和set来更加方便的访问（修改）私有属性
        getter方法读取属性
        setter方法修改属性
     */
    get age():number {
        return this._age;
    }
    set age(value){
        if(value > 0){
            this._age = value;
        }
    }
}
const cat = new A("猫",18,"男");
console.log(cat);

cat.setAge(20);
cat.age = 22; //因为上面写了set，所有这里可以直接访问（修改）
console.log("修改后：");
console.log(cat);

```
3.   protected
>  受保护的，类内部和类子类访问（修改）
```
//结合private的代码看
class B extends A{
    show(){
        console.log(this._sex);  //受保护的属性，只能类内部和子类访问（修改）
    }
}
```

#### 类

1.  ##### 构造函数（constructor）
>  this指向当前实例对象
```
    class A{
        name: string;
        age: number;
        constructor(name: string, age: number){
            this.name = name;
            this.age = age;
        }
    
    }
```
> 以上代码，等于一下代码（语法塘）：
```
    class A {
        constructor(public name: string, public age: number){
          
        }
    }
```

2.  ##### 抽象类（abstract）
>  abstract 声明的是抽象类
>  抽象类不能被实例，专门用来被继承 当父类
>  抽象类中可以添加抽象方法
>  抽象方法没有方法体，子类中必须被重写。
```
    abstract class Animal{
        name: string;
        constructor(name){
            this.name = name;
        }

        abstract say(): void;
    }

    class Cat extends Animal{
        constructor(name){
            super(name);
        };
        say(){
            console.log("喵喵喵——抽象类")
        };
    }
    class Dog extends Animal{
        constructor(name){
            super(name);
        }
        say(){};
    }

    const cat = new Cat("猫");
    console.log(cat);
    cat.say();
```
3.  ##### 接口(interface)
>  implements 去实现接口
>  接口定义类的时候去限制类的结构
>  接口中所有属性不能有实际值，方法不能有方法体。
>  接口中所有方法都是抽象方法
```
interface Myi{
    name: string;
    say(): void;
}
class Cat implements Myi{
    name: string;
    // constructor(name){
    //     this.name = name;
    // }

    say() {
        console.log("猫猫猫")
    }

}

const cat = new Cat();
console.log(cat);
```
4.  ##### super
>  子类继承父类时，子类有构造函数就必须super
>  子类的方法中，super表示父类，可以省略
```
class Animal{
        name: string;
        constructor(name: string){
            this.name = name;
        }
        say(){
            console.log("动物叫了！")
        }
    }

    class Cat extends Animal{
        age: number;
        constructor(name: string ,age: number){
            super(name);//子类的构造函数，必须super（调用一下父类的构造函数）,父类的参数也要有
            this.age = age;
        }

        say(){
            //在类的方法中，super表使当前类的父类。这里可以省略。
            super.say();
            // console.log("喵喵喵")
        }
    }
    const cat = new Cat("猫",18);
    console.log(cat);
```

#### 泛型
>  在定义函数或类时，参数与返回值类型不明确的时候使用
>  与any不同，泛型使用时可以确定类型
```
 function fn1<T>(a: T): T{
     return a;
 }
 let a = fn1(18);  //这里自动确定类型为 number
 let b = fn1<string>("hello")  //可以手动确定类型
```
>设定多个泛型
```
 // 设定多个泛型
 function fn2<T, K>(a:T, b:K): K{
     return b;
 }
 let c = fn2<number,string>(12,"10")
```
>  接口继承，泛型。
```
 //T extends Inter 表示泛型T必须是Inter实现类（子类）
 interface Inter{
     length:number;
 }
 function fn3<T extends Inter>(a: T): number{
    return a.length;
 }
 fn3("123");
```
>  类中使用泛型
```
 class MyClass<T>{
     name: T;
     constructor(name: T){
         this.name = name;
     }
 }
 const mc = new MyClass<string>("李四");

```