TypeSCript笔记 | 青训营笔记

刘孟雨
115 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

一、TS运行

安装TypeScript: npm i -g typescript

验证是否安装成功： tsc -v

image.png 安装ts-node包：npm i -g ts-node

直接简化运行ts ： ts-node 文件名

二、TS常用类型

JS不会检查变量的类型是否发生变化，TS会检查。

1、类型注解

eg： let age: number = 18

为变量添加类型约束，约定了什么类型 就只能给该变量赋值该类型的值，否则会报错。

2、常用类型

  • JS已有类型

    • 原始类型：number/string/boolean/null/undefined/symbol
    • 对象类型：object

  • TS新增类型

    • 联合类型：自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等。

2.1、原始类型

完全按照js中的类型名来书写。

let 变量名： 原始类型名 = 初始值；

2.2、数组类型

对象类型：object 在TS中更加细化，每个具体的对象都有自己的类型语法。

数组的两种写法：

  • let numbers:number[] = [1,3,5]
  • let strings :Array<String> = ['a','b','c']

如果数组中可以有多种类型，例如同时拥有number和string类型，可以使用联合类型：|

let arr:(number|string)[] = [1,'a','c',2]

2.3、类型别名

如果同一类型被多次使用 可以通过类型别名，简化该类型的使用。

type CustomArray = (number| string)[]

let arr1 :CustomArray = [1,'a',3,'b']

let arr2:CustomArray = ['x','y',6,7]

使用type关键字来创建类型别名，类型别名可以是任意合法的变量名称，创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

2.4、函数类型

实际上指的是：函数的参数和返回值的类型

  • 单独制定参数和返回值类型

    function add(num1:number,num2:number):number{return num1+num2}

    或者

    const add2= (num1:number,num2:number):number=>{
    return num1+num2;
}

  • 同时指定参数和返回值的类型

    const add3 :(num1:number,num2:number)=>number = (num1,num2)=>{
    return num1+num2;
}

  • 可选参数

    可选参数的参数名称后添加问号？ 但是可选参数必须出现在参数列表的最后。

    function mySlice(start?:number,end?:number):void{
    console.log("起始索引:" + start);
    console.log("结束索引:" + end);
}

2.5、对象类型

TS的对象类型在描述对象的结构。

let person:{
    name:string;
    age:number;
    sayHi() :void;
    greet(name:string):void;
} = {
    name:'jack',
    age:19,
    sayHi(){},
    greet(name){
        console.log(name);
    }
}

如果在一行只制定一个属性类型 可以去掉分号。

方法类型也可以使用箭头函数方式。sayHi:()=>void

  • 可选属性

    eg：在使用axios时候，如果发送get，methods属性就可以省略。

    function myAxios(config:{url:string; method?:string}){
    console.log(config);
}

2.6、接口

利用接口来描述对象的类型，达到复用目的。

需要使用interface关键字声明接口，接口名称可以是任意合法的变量名称。

声明接口后，直接使用接口名称作为变量的类型。

interface IPerson {
    name:string;
    age:number;
    sayHi():void;
}
​
let person:IPerson = {
    name:'jack',
    age:19,
    sayHi(){},
}

使用类型别名也可以指定类型

type IPerson = {
    name:string,
    age:number,
    sayHi():void
}
​
let person:IPerson = {
    name:'jack',
    age:19,
    sayHi(){},
}

  • 接口的继承

    如果接口有共同的属性和方法，可以将公共属性或方法抽离，通过继承实现复用。

image.png

2.7、元组

image.png

元组Tuple是另一种类型的数组，确切知道包含多少元素，以及特定索引所对应的类型。

let position :[number,number] = [39.5427,116.2318]

在远足中可以确切标记出有多少元素以及每个元素的类型。

// 使用元组
let positon:[number,string] = [1,'113']

2.8、类型推论

在没有明确指出类型的地方，TS的类型推理机制会帮助提供类型。

在声明变量初始化时，或者决定函数返回值时会发生类型推论。

2.9类型断言

image.png


const aLink = document.getElementById('link') as HTMLAnchorElement

// 或者使用<>语法形式
const aLink2 =<HTMLAnchorElement> document.getElementById('link') 
console.log(aLink.href);

获得每个标签对应类型：打开网页，点击元素后，控制台输入console.dir($0)，翻到最后面。

2.10、字面量类型

image.png

字面量可以用于表示一组明确的可选值列表。

image.png

function changeDirection(direction:'up'|'down'|'left'|'right'){}
changeDirection("up")

2.11、枚举类型

image.png

enum Direction {
    Up,Down,Left,Right
}

function changeDirection(direction :Direction){}

changeDirection(Direction.Up)

美剧中的成员是有值的，默认从0开始自增的数值。

枚举成员的值为数字的枚举，成为数字枚举，也可以给枚举的成员初始化。

image.png

字符串枚举类型必须要所有的成员都设置初始值。

// 字符串枚举必须有初始值
enum Direction {
    Up ='up',Down='down',Left='left',Right='right'
}

2.12、any类型

image.png

2.13、typeof

可用于获取数据的类型。

image.png

let p ={x:1,y:2}
function formatPoint(Point:typeof p){}
formatPoint({x:1,y:2})

三、TS高级类型

3.1、class类

image.png

  • 构造函数

    class Person {
    age:number;
    gender ='男';
    name:string='jack'

    constructor(age:number,gender:string){
        this.age =age;
        this.gender = gender;
    }
}
const p = new Person(15,'男')

  • 类实例方法

    class Point{
    x=1;
    y=2;


    scale(n:number):void{
        this.x *=n;
        this.y*=n;
    }
}

const point = new Point();
point.scale(10);
console.log(point);

  • 类的继承

image.png

-   extends

    ```
    class Animal{
        move(){
            console.log("走");
            
        }
    }
    class Dog extends Animal {}
    const dog = new Dog();
    dog.move();
    ```

-   implements接口

    ```
    interface Singable{
        sing():void;
    }

    class Person implements Singable{
        sing(){
            console.log("唱个歌");
        }
    }
    ```

  • 类成员的可见性

image.png

  • readonly

    表示只读，防止在构造函数之外对属性进行赋值。

image.png

class Person{
    readonly age:number = 18;
    constructor (age:number){
        this.age = age;
    }
    // setAge(){
    //     this.age = 20
    // }
}

3.2、类型兼容性

  • 类型兼容性

image.png

```
// 两个类兼容性演示
class Point {
    x:number;
    y:number
}
class Point2D{
    x:number;
    y:number
}

const p :Point = new Point2D();
```

实际上y的成员至少与x相同，x兼容y

```
const p1:Point = new Point3d()
```
  • 接口兼容性

image.png

  • 函数兼容性

image.png

3.3、交叉类型

image.png

interface Person{
    name:string
}
interface Contact{
    phone:string
}
type PersonDetail = Person & Contact

image.png

3.4泛型和keyof

image.png

image.png

简化调用

image.png

image.png

image.png

泛型类

image.png

泛型工具类

  • Partial

image.png

  • Readonly

image.png

  • Pick<Type,Keys>

image.png

  • Record<Keys,Type>

image.png

3.5、索引签名类型和索引查询类型

image.png

3.6、映射类型

image.png

avatar
文章
阅读
粉丝