typeScript基础

一、关于typeScript

     typescript是拥有类型的javaScript超集, 它可以编译成普通\干净\完整的js代码 ES3
     js所拥有的内容ts都支持, 并且js有es678... ts也都支持这些语法
     ts拥有独特的一些数据类型 枚举 元组 void any

     ts会在那些位置去查找类型声明？
       1 内置类型声明 (在安装ts的时候内置的)
       2 外部定义类型声明
          1.在第三方库中直接有.d.ts文件
          2.ts官网(https://www.typescriptlang.org/dt/search?search=)查找.d.ts文件
      3 自己定义类型声明

二 、安装与环境搭建

1. 全局安装typescript

npm install -g typescript

   2.项目初始化

      新建目录(项目名可自定义)：mkdir ts-dev
      进入项目文件夹ts-dev: cd ts-dev
      生成package.json文件: npm init -y
      生成tsconfig.json文件: tsc --init
      本地安装ts和ts-node:npm i typescript ts-node

三、typeScript 数据类型

   1.number boolean  和  string

let num: number = 123;

let flag: boolean = true;

let msg: string = "hello world";

   2. null和undefined

在ts中 null和undefined他们是类型 也是值

let n: null = null;

let u: undefined = undefined;

  3. symbol

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

  4. any

let msg: any = "1234";
msg = 123;
msg = true;
msg = [];
msg = null;

msg这个数据的数据类型可以是任何的数据

 5. void

void也可以用来声明变量,但只能作用在undefined身上,null也不行。只有tsconfig.json中strictNullChecks属性设置为false时,null才能赋值给void

const u:void=undefined;//这是个鸡肋用法,基本不会这么用
const n:void=null;//这样会报错
const age:void=18;//这样也会报错

6. 元组类型（tuple）

7.枚举类型（enum）

8.never类型

四、类型断言

在一些时候ts无法获取具体的类型信息（HTMLElement),但是这些（HTMLmageElement)，信息有独特的属性和方法，此时就需要告诉ts当前的这个数据类型到底是那种,TS只允许类型断言转换为更具体或者不太具体（any/unknown）的类型版本，这种情况会导致ts类型混乱。

 
let test = document.getElementById("test") as HTMLImageElement
test.innerText = "123";
test.appendChild(document.createElement("div"));
test.onclick = function (){
};
test.addEventListener("click",()=>{
})
test.src = "图片地址url"

五、类的修饰符

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

六、继承

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

interface Obj2 {
    age: number
}

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

七、ts的泛型

在开发过程中 一些时候我们声明的函数不仅仅要明确他的数据类型,而且还要考虑这个方法具有很强的可复用性   实现类型参数化  ==>泛型   定义一个方法,在方法中不去确定参数到底是什么类型,而是需要使用者来进行传递。

类型的参数化

在定义这个函数的时候, 我们不去决定这些参数的类型，而是让调用者以参数的形式告诉我们函数的参数应该是什么类型。

泛型函数

函数中在函数名的后面通过<形参>的形式,接受传递过来的类型

泛型函数调用
//1通过<类型> 的方式将类型传递给函数
fn<string>("1234")
//2通过类型推导,自动的推导出我们传入变量的类型
//  在这里会推导出他们是字面量类型, 当然字面量类型对我们的函数也是适用的
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]