TypeScript学习_入门向

1-TypeScript简介

首先官网祭天 ---> https://www.tslang.cn/

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

我们使用一张图来说明TypeScript和JavaScript的关系

使用更加简单的说法：

TypeScript = JavaScript + 类型约束 + 高级特性

我们一般只会在项目中使用类型约束，高级特性我就先不涉及了。

2-环境准备

TypeScript最终会编译成js来运行，所以我们需要先准备好将TypeScript编译为js的环境。

a.安装TypeScript

首先全局安装ts

 npm install -g typescript

然后可以使用命令来验证安装是否成功了。

 tsc --version

b.使用tsc命令编译ts为js

 tsc ./src/xxx.ts

这时候会自动生成对应的.js文件

然后我们就可以执行对应的js文件。

c.配置tsconfig文件

但是每次都使用tsc命令编译单个文件会比较麻烦，所以我们可以做一个统一配置

先使用 tsc --init 命令初始化一个 tsconfig.json 文件

里面配置如下：

 {

   "compilerOptions": {

     "target": "ESNext",

     "module": "ESNext",

     "outDir": "./dist",

     "skipLibCheck": true,

      ...

   }

 }

然后我们只需要 tsc 一下，所有的ts文件就能被编译了。

d.自动编译

之后我们只需要启动vscode的监听任务功能，就能自动编译了。

1.选择终端 -> 运行任务

2.选择typescript类型的任务

3.选择监视任务

3-变量类型约束

ts里面声明变量和常量，固定语法 :

let/const/var 变量:类型 = 值;

其实ts也可以自动进行类型的推导：

let str:string = "abc";

let str2 = "DeF";

类型大小写的区别：

// 小写的number指的是字面量类型的数字

let str3:number;

// 大写的Number指的是对象类型的数字

let n:Number;

所以在没法进行类型推导的时候，一定把类型约束加上，

我们在ts里面，基本都会给任何一个数据添加类型约束。基本语法如下：

const/let/var 变量名:数据类型  =  数据;

例如：

 const num:number = 10;

 let str:string = 'abc';

 var bool:boolean = true;

在ts里面，类型一旦定义了，在代码执行过程中就不允许改变其类型。

 let num:number = 10;

 num = 'abc'; // 报错：不能将类型“string”分配给类型“number”。

4-any类型

唯一的一个例外，如果我们定义的类型是any，那么就可以被修改类型，因为这个any类型表示任意类型，会跳过ts的类型检查，其实是不安全的，如果不是迫不得已，我们不要使用any。

 let value: any;

 value = 10;

 value = "abc";

 value = null;

 value = undefined;

5-复杂类型

以前在 js 里面，所有的引用都 Object 类型
new Object() { }
但是在ts里面如果直接使用 {} / new Object(),是会报错的
let obja = {}

obja.name = '狗蛋'; // 引用类型，在ts里面约束尤其严格
Date 对象有 Date 对象的属性和方法。

Math 对象有 Math对象的属性和方法。

两者都是对象，但是不能混为一谈，他们两种对象的属性和方法是完全不一样的，如果不区分，就没法推导对象身上的成员。

如果我们想约束一个复杂数据的类型，就要使用 type / interface / 对象字面量 的方式。

在ts里面，每种对象都是一个类型，每种对象才能进行类型推导和类型约束。

有五个常用方式可以进行类型的约束。

a.对象字面量进行类型约束

字面量 --> 直接使用 {属性名:类型}

 let obj:{name:string,age:number} = {name:'狗蛋',age:12}

a-1 补充另外的字面量进行类型约束

比如想定义一个人类的性别：

var p1 : {name:string,gender:"男" | "女"};

p1 = {

    name:"狗蛋",

    gender : "女"

}

b.interface(接口)--开发常用

在进行引用类型的约束的时候，除了字面量，还可以使用 interface 进行数据结构的约定：

语法：

//接口名称其实怎么写都行，最好有一个约定： interface 都以 I 开头

   

interface 接口名称 {

               属性名:类型;

               ...

           }

interface 相比于字面量定义引用类型来说在项目中使用得最多的

1. interface 可以复用

2. 实现继承

interface主要用来约定一个复杂数据的类型。

 interface IUser{

     id:number;

     name:string;

     gender:boolean;

 }

 let user:IUser = {

     id:1,name:'狗蛋',gender:true

 }

接口继承：

interface IPerseon{

    id:number;

    name:string;

    age:number;

}

interface IStudent extends IPerseon{

    number:number;

}

const s1:IStudent = {

    id:2,

    name:'翠花',

    age:15,

    number:1000

}

如果有一个属性是可能有可能没有的，可以使用可选的方式声明：

interface IUser{

     id:number;

     name:string;

     // ? 表示可选

     gender ?: boolean;

 }

c.type类型别名--开发常用

有时候我们会觉得一个类型的声明太麻烦，可以给该类型一个别名：

type 别名 = 类型

type关键字用于取一个类型别名。

 // 类型别名

 type mult = number | string;

 let m:mult = 10; // 合法

 m = 'abc'; // 合法

d.泛类型TS

泛型其实就是类型参数化

有时候，我们在定义一个数据结构的时候，并不清楚将来这个数据是什么类型，希望将来使用的时候才确定；

在使用这个类型的时候，再告诉ts进行推导就行；

以前发请求的时候：

请求返回的数据主要有三大块：

{

               code : number ;

               message : string ;

               data : ?  data的类型无法确定，不同的接口，返回的data是不一样，可能是 null ， 可能是 boolean ，也可以是对象，还可能是数组

           }

难道在请求的时候，data是any? 不对！！！

此时就是在我们使用到这个data的时候，再确定这个data是什么类型 ----> 这就是泛型的使用场景

泛型的语法

类型<T,...> {

属性:T,

}

// 比如：

interface IExample1<T,N,M> {

    // data的类型不能确定，传多个值必须声明对应个数的形参

    data: T,

    data2: N,

    data3:M

}

let obj1:IExample1<string,string,boolean> = {

    data:"abc",

    data2:"def",

    data3:true

}

let obj2:IExample1<number> = {

    data:1

}

// 将来我们想确定请求回来的数据是什么类型

interface IResponse<T> {

    code : number;

    message : string;

    data : T;

}

e.函数TS

ts里面函数的完整写法，相比会有点不同

js 格式 :

  function 函数名(参数){

            函数体

        }

ts 格式：

 function 函数名(参数:参数类型): 函数返回值的类型{

        }

// 在参数后面加  :类型  意思是要求函数返回该类型

 function addFn(a:number,b:number):number{

      //必须return，return的类型必须是要求函数返回该类型

    return 'abc'

 }