[JavaScript知识库]TypeScript

TS

	typescript是拥有类型的javaScript超集, 它可以编译成普通\干净\完整的js代码 ES3
js所拥有的内容ts都支持, 并且js有ES67... ts也都支持这些语法.

1.ts全局安装typescript

npm install -g typescript

tsc 文件名.ts   //转换为js文件
node  文件名.js   //运行的js文件

2.数据类型
<1>number

//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进制

<2>boolean

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

<3>string

let name:string="小爱"
let msg:string="hello"
msg = `${name}`

<4>null和undefined

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

<5>symbol

let name:symbol=Symbol("name")
let name1:symbol=Symbol("name")
const obj = {
    [name]: "hello",
    [name1]: "你好",
}

<6>void

// 当一个函数没有返回值时，你通常会见到其返回值类型是 void
function fn(num:number, num1:number): void{
    console.log(num+num1)
}
let sum = fn(5,3)

<7>never

//never表示永远都不会发生值的类型
function fn(): never{
    throw new Error("手动错误")
}
fn()

<8>any

//这个数据的数据类型可以是任何的数据
let num:any="123"
num = 123;
num = null;

2.TS中的类型
<1>联合类型

let num：number|string=123
num="123"

<2>交叉类型

//交叉类型表示需要满足多个条件
//交叉类型使用的是&
let b=number&string
//表达的含义是number和string要同时满足
//但是不可能有一个值同时是number和string的, 所以b这个类型其实是一个never类型

<3>可选类型

function fn(msg?:string){ //  undefined | string
    console.log(msg)
}
fn();
fn(undefined);//undefined
fn("hello world")
//可选类型 可以看作undefined和所写类型的一个联合类型

3.TS中的类
<1>ts中类的成员修饰符

//在typeScript中 类的属性和方法支持三种修饰符
//1 public
//  修饰的是在任何地方可见 公有的属性或方法 默认编写的属性就是public的
//2 private
//  修饰的是仅在同一类中可见 私有的属性或方法(不参与继承)
//3 protected
//  修饰的是仅在类自身及子类中可见 受保护的属性或方法(不能读写)
//4 readonly
//  修饰的是这个属性我们不希望外界可以任意的修改,只希望确定值之后直接使用(只能读)

//1.public
class Person{
    public name!:string;
    public age:number;

    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    running(){
        console.log(this.name + " running")
    }
    eating(){
        console.log(this.name + " eating")
    }
}
class Student extends Person{
    public learn: string;
    constructor(name:string, age:number, learn: string) {
        super(name, age);
        this.learn = learn
    }
    running(){
        //this ==> s
        //super===> Person
        super.running()
        console.log(this.name + " Student running")
    }
}

let s: Student = new Student("学生", 20, "TypeScript");
s.running();
s.eating();
console.log(s)
//2.private
class Person{
    private name:string;
    constructor(name:string) {
        this.name = name;
    }
}
let p = new Person("aa");
//3.protected
class Person{
    protected name:string;
    constructor(name:string) {
        this.name = name;
    }
}
let p = new Person("aa");
//4.readonly
class Person{
    readonly name:string;
    constructor(name:string) {
        this.name = name;
    }
}

let p = new Person("aa");

4.TS中的接口interface
<1>接口声明

interface Person{
name:string,
age:number
}
let obj:Person={
    name:"haha",
    age: 18
}

<2>interface的继承

interface Obj {
    name: string,
    run: () => void
}

interface Obj2 {
    age: number
}

//接口是支持多继承的(类的继承只能继承一个)
interface Obj3 extends Obj, Obj2 {
    jump: () => void
}
let obj: Obj3 = {
    name: "你好",
    age: 18,
    run(){},
    jump(){}
}

<3>interface和type的区别

//interface和type都可以用来定义类型
//1. 如果定义的是对象类型,那么通常推荐使用interface
//2. 如果定义的是非对象 function Direction 推荐使用type

//1.interface可以重复声明  type不能重复声明
//2.type定义的别名, 别名是不能重复
interface Person {
    name: string,
    run:()=>void
}
interface Person {
    age: number
}

let obj: Person = {
    name: "aa",
    run(){},
    age: 18
}

<4>interface字面量赋值

//在ts通过字面量直接赋值的过程中, 为了进行类型推导会进行严格的类型限制
//但是我们之后讲一个 变量 赋值给其他变量的时候, ts会进行一个(freshness)擦除操作
interface Person{
    name: string,
    age: number
}

let obj = {
    name: "你好",
    age: 18,
    flag: true
}

let p:Person = obj;

5.TS的泛型

//T: type的缩写, 类型
//K/V: key和value的缩写, 键值对
//E: element的缩写, 元素
//O: object的缩写, 对象

//泛型函数
//函数中在函数名的后面通过<形参>的形式,接受传递过来的类型
function fn<T=string>(arg:T):T{
     console.log(arg)
    return arg
}
//泛型函数调用
//1通过<类型> 的方式将类型传递给函数
fn<string>("1234")
//2通过类型推导,自动的推导出我们传入变量的类型
//  在这里会推导出他们是字面量类型, 当然字面量类型对我们的函数也是适用的
fn<number>(123)
//引用类型会推导出想要的效果
fn<number[]>([1,2,3])