TypeScript总结

开篇

什么是TypeScript？？？

TypeScript 是由微软开发的一款开源的编程语言 。
typescript是拥有类型的javaScript超集, 它可以编译成普通\干净\完整的js代码。
js所拥有的内容ts都支持, 并且js有ES678… ts也都支持这些语法

TypeScript安装和环境搭建

全局安装TypeScript(三选一)

npm install -g typescript
cnpm install -g typescript
yarm install -g typescript

下载完成之后，查看是否安装成功

tsc -v

将ts文件编译成js文件

先写一个初识TypeScript.ts文件，找到文件所在的位置，打开命令窗口，输入：
tsc 初识TypeScript.ts
此时目录中就会生成一个TypeScript.js文件

例如

//先创建一个初识TypeScript.ts文件
let name: string = "100";
console.log(name);
//执行命令tsc 初识TypeScript.ts
//当前目录生成一个 初识TypeScript.js文件
//转换的代码如下:
let name = "100";
console.log(name);

TypeScript中的数据类型

number类型

let num:number = 123;

let decLiteral: number = 6;//10进制
let binaryLiteral: number = 0b1010;//2进制
let hexLiteral: number = 0xf00d;//16进制
let octalLiteral: number = 0o744;//8进制
console.log(decLiteral,
binaryLiteral,
hexLiteral,
octalLiteral)

boolean类型

//布尔类型只有两个值 true和false
let flag: boolean = true;
flag = false;
flag = 1>0;

string类型

let msg: string = "hello world";

let name: string = "你好";
let age: number = 18
msg = `${name}+年龄:${age}`

null和undefined类型

js中null和undefined是两个基本数据类型
在ts中 null和undefined他们是类型 也是值
js代码：
var n = null;
var u = undefined;
n = null;
u = undefined;
ts代码：
let n: null = null;
let u: undefined = undefined;
n=null
u=undefined

symbol类型

js代码：
var _a;
var name1 = Symbol("name");
var name2 = Symbol("name");
var obj = (_a = {},
    _a[name1] = "hello world",
    _a[name2] = "你好世界",
    _a);
ts代码：
let name1: symbol = Symbol("name");
let name2: symbol = Symbol("name");
const obj = {
    [name1]: "hello world",
    [name2]: "你好世界",
}

array类型

let arr: Array<string> = []; //第一种写法 react.jsx 

let arr2: string[] = []; //第二种写法
let arr3 = ["xxx",18, true];

arr.push("你好世界");

object类型

const obj = {
    name: "你好世界",
    age: 18
}

console.log(obj.name)

any数据类型

//msg这个数据的数据类型可以是任何的数据(和原来的js就完全一样了)
let msg: any = "1234";
msg = 123;
msg = true;
msg = [];
msg = null;

unknown类型

function fn1(){
    return "这是一个字符串"
}
function fn2(){
    return 1234
}

//unknown类型 只能赋值给any和unknown类型的变量
//any类型 可以赋值给任意类型的变量

let flag = true;
let res: unknown;
if(flag){
    res = fn1();
}else {
    res = fn2();
}

let msg:unknown = res;

console.log(res)

void类型

//函数没有返回值的时候用 void 有返回值的时候用具体的数据类型
function run():void {
    console.log(11);
}

never类型

//never表示永远都不会发生值的类型

function fn(): never{
    throw new Error("手动错误")
}
function fn1(): never{
    while (true){
        console.log(1)
    }
}

tuple元组类型

//可以给每个位置指定一种数据类型
let arr:[number,string,boolean] = [12, '123',true]

enum枚举类型

枚举类型
//就是将一组可能出现的值, 一个一个列举出来, 定义在一个类型中,这个类型就是枚举类型
//枚举类型放常量 字符串 数字 (全大写)
enum Direction {
    LEFT = "LEFT",
    RIGHT = "11",
    TOP = "1111",
    BOTTOM = 100
}
function move(direction: Direction){
    console.log(direction)
    switch (direction){
        case Direction.LEFT:
            console.log("向左移动")
            break;
        case Direction.RIGHT:
            console.log("向右移动")
            break;
        case Direction.TOP:
            console.log("向上移动")
            break;
        case Direction.BOTTOM:
            console.log("向下移动")
            break;
        default:
            let err:never = direction
    }
}
move(Direction.LEFT)
move(Direction.RIGHT)
move(Direction.TOP)
move(Direction.BOTTOM)

TypeScript中的类

1.ts中定义类

class Person{
    name!:string;
    constructor(name:string){
        this.name=name
    };
   running(){
        console.log(this.name + " running")
    }
}
var p=new Person('111');
p.running()

2.ts中类的继承
ts中实现继承 extends super

class Person{
    name!:string;
    constructor(name:string){
        this.name=name
    };
   running(){
        console.log(this.name + " running")
    }
}
class Student extends Person{
    learn: string;
    constructor(name:string,learn: string) {
        super(name);
        this.learn = learn
    }
    running(){
        super.running()
        console.log(this.name + " Student running")
    }
}
let s: Student = new Student("学生", 20, "TypeScript");
s.running();
s.eating();
console.log(s)

3.ts中类的成员修饰符

在typeScript中 类的属性和方法支持三种修饰符 //

1. public
   修饰的是在任何地方可见 公有的属性或方法
   默认编写的属性就是public的
2. private
   修饰的是仅在同一类中可见 私有的属性或方法(不参与继承)
3. protected
   修饰的是仅在类自身及子类中可见 受保护的属性或方法(不能读写)

4.ts中类的静态成员

类 的静态成员 之前我们在类中定义的属性和方法都属于是通过实例才能访问或者使用的(对象级别) 有时候我们也需要定义类级别的属性和方法
在ts中通过关键字static来定义

class A{
    //静态属性 使用static来修饰
    static state: string = "初始化的值"
    time: string = "初始值"
    constructor() {
        this.time = "2021-11-11";
    }
    //静态方法
    static getState(){
        return A.state
    }
    helloWorld(){
        console.log("你好世界")
    }
}
//访问的是类的静态属性
A.state = "a"
//访问的是类的静态方法
A.getState()

//实例的访问
let a = new A();
console.log(a.time);
a.helloWorld();

5.ts中的抽象类

抽象方法=>
在ts中没有具体实现的方法(抽象方法)
抽象方法, 必须存在于抽象类中
抽象类必须使用 abstract声明

抽象类=>
抽象类是不能被实例化的(也就是不能通过new关键字来创建);
抽象方法必须被子类实现, 否则该类必须是一个抽象类

类型缩小

类型缩小 ==> type Narrowing
我们可以通过类似 typeof x === "number"判断语句,来改变缩小比声明的时候更小的类型.

常见的类型保护
typeof
instanceof
常见的比较（== === != !==） switch
in

在ts占用,检查返回的值typeof是一种类型保护
原因在于 ts对typeof操作不同的值类型进行编码
type ID = number | string;
function getID(id: ID){
    console.log(id)
    if(typeof id == "string"){
        id.toUpperCase()
    }else {
        console.log(id)
        
//instanceof
function creatDate(date: Date | string){
    console.log(date)
    if(date instanceof Date){
        date.getDate()
    }else {
        return new Date(date)
    }
}

//比较（==  ===  !=  !==） switch
type Position = "left" | "top" | "right" | "bottom"
function getPosition(pos: Position){

    console.log(pos)
    switch (pos){
        case "left":
            console.log("left",pos);
            break;
        case "top":
            console.log("top");
            break;
        case "right":
            console.log("right");
            break;
        case "bottom":
            console.log("bottom");
            break;
    }
}

//js中的in运算符
来确定对象中是否有当前属性 如果指定的属性存在与指定的对象或者原型链中, 则in运算返回true
例如:
obj={a:1}    ===>   "a" in obj  ===> true

交叉类型

交叉类型表示需要满足多个条件
交叉类型使用的是&

type B = number & string
//表达的含义是number和string要同时满足
//但是不可能有一个值同时是number和string的, 所以B这个类型其实是一个never类型
let b:B


type Obj = {
    name: string
}
type Obj2 = {
    age: number
}
type Obj12 = Obj & Obj2
let obj:Obj12 = {
    name: "你好",
    age: 18
}

TypeScript中的泛型

1.认识泛型
泛型就是指所有类型
通过<类型> 的方式将类型传递给函数

fn<string>("1234")
fn<number>(123)
//引用类型会推导出想要的效果
fn<number[]>([1,2,3])
fn({a:1})
fn([1,2,3])
//通过泛型的形式来确定变量的数据类型
let arr: string[] = ["1","2","3"]
let arr1: Array<string> = ["1","2","3"]
let arr2: Array<number> = [1,2,3,4]

2.泛型的补充

约定俗成的开发过程中一些常见名称
//T: type的缩写, 类型
//K/V: key和value的缩写, 键值对
//E: element的缩写, 元素
//O: object的缩写, 对象

function fn<T>(num:T):T{
    return num
}

function dataToString<T,O>(num1:T,num2:O):string{
    let str = num1.toString();
    return str
}
dataToString<string, number>("你好",2)

3.泛型的使用

function getLength<T>(arg:T):number{
    // @ts-ignore
    let num = arg.length
    console.log(num)
    return num
}
getLength<string>("1234")
getLength<number[]>([1,2,3,4])
getLength<{[name:string]:number,length:number}>({a:1,length:1})

4.泛型接口

interface IPerson<T=number,T2=string>{
    name: T2,
    age: T,
    run: (value:T)=>void
}

let obj: IPerson<string> = {
    name: "哈哈",
    age: "12",
    run(value){
        console.log(value)
    }
}
let obj2: IPerson = {
    name: "哈哈",
    age: 12,
    run(value){
        console.log(value)
    }
}

5.泛型类

class Point<T>{
    x: T
    y: T
    z?: T
    constructor(x: T,y: T,z?: T) {
        this.x = x
        this.y = y
        this.z = z
    }
}
let p1 = new Point(1,2,3);
let p2 = new Point<string>("1","2","3");
let p3: Point<number> = new Point(1,2);
console.log(p1)
console.log(p2)

6.泛型的约束
只要是拥有length的属性 都可以作为我们当前函数的参数类型

interface ILength{
    length: number
}

function getLength<T extends ILength>(arg:T):number{
    let num = arg.length
    console.log(num)
    return num
}
getLength<string>("1234")
getLength<number[]>([1,2,3,4])
getLength<{[name:string]:number,length:number}>({a:1,length:1})