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-变量类型约束

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 都以 I 开头
   
interface 接口名称 {
               属性名:类型;
               ...
           }

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 mult = number | string;
 let m:mult = 10; // 合法
 m = 'abc'; // 合法

d.泛类型TS

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

// 比如：
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

  function 函数名(参数){
            函数体
        }

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


        }

// 在参数后面加  :类型  意思是要求函数返回该类型
 function addFn(a:number,b:number):number{
      //必须return，return的类型必须是要求函数返回该类型
    return 'abc'
 }