TypeScript学习_入门向

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'
 }