一、TypeScript 开发环境搭建
1、TypeScript有什么用
-
编译时的强类型
-
模块化
-
已有的类库可以很方便的使用
2、下载Node.js
-
node.js官网：Node.js (nodejs.org)
-
版本号 LTS：稳定版（一般开发下载这个）
-
版本号 Current：最新版
3、安装Node.js
-
找到下载的目录里面，打开Node.js进行无脑安装，直接下一步
- 怎么知道安装成功？
- 第一种方法：win + R 打开运行对话框，输入cmd 打开命令提示符窗口，输入node -v 回车 显示安装版本号，如以下结果即为成功！
- 第二种方法：win 搜索powerShell，打开PowerShell 也是一样的输入node -v 回车 显示版本号，即为成功！
4、使用npm（node包管理器，通过这个可以安装node下面的各种应用与软件，下载完node.js就可以直接使用npm了）全局安装TypeScript
-
进入命令行
-
输入：npm i -g typescript
- 显示以上信息，反正没有报错就表示typescript就已经安装好了
- 怎么查看它有没有安装好呢？输入tsc 命令回车，如果出现一堆东西那就表示安装成功了，否则就显示没有找到这条命令。
5、创建一个ts文件
- 在任意一个文件夹里面新建一个后缀名为.ts的文件，用记事本或随意一个文本编辑器打开文件，输入console.log(' hello TS！');
- 但是网页不认识ts文件怎么办？利用我们刚刚下载好的typescript编译器，把ts文件转化为js文件
- 怎么转？使用tsc命令对ts文件进行编译
6、使用tsc对ts文件进行编译
- 在所在文件夹里面输入cmd，在这里输入cmd的好处就是 命令行所在的路径正好就是当前所在文件的路径，就不用使用命令进入了！
- 输入命令：tsc 需要编译的文件名，回车执行，虽然命令提示符窗口没有发生什么变化，但是此时此刻你会发现该文件夹里面多了一个js文件！
二、TypeScript 基本类型
1、类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量（参数，形参）的类型
-
指定类型后，当为变量赋值时，TS编译器会自动检查是否符合声明，符合则赋值，否则会报错
-
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
-
语法：❶ let 变量：类型；❷ let 变量：类型 = 值；❸ function fn（参数1：类型；参数2：类型）：类型{ ... }
-
自动类型判断：
-
TS拥有自动的类型判断机制
-
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
-
所以如果你的变量的声明和赋值是同时进行的，可以省略掉类型声明
-
- 栗子如下：
// -------------------------- 1、number类型 ----------------------------------
// 在ts的写法
// 意思是：声明了一个变量a，同时指定它的类型为number
let a: number;
// a 的类型数组为了number，在以后的使用过程中a的值只能是数字
a = 10;
a =33;
// 此行会报错了，因为上面变量a指定的是数字类型，所以这里不能是其他类型的
// a = "hello";
// 虽然这行会报错，但是进行编译还是会成功的
// -------------------------- 2、string类型 ----------------------------------
// let 会编译成 var , 默认编译成js3版本
let b: string;
b = 'hello';
// -------------------------- 3、声明变量直接赋值 ----------------------------------
// 声明完变量直接进行赋值（ts的写法）
let c: boolean = true;
c = false;
// -------------------------- 4、boolean类型 ----------------------------------
// 如果没有指定boolean类型，但是赋值是布尔类型的(即声明和赋值是同时进行的)，ts可以自动对变量进行变量检测
let d = false;
// d = 123 // 会报错
d = true;
// -------------------------- 5、js函数类型 ----------------------------------
// js中的函数是不考虑参数类型和个数的
function sum(a,b){
return a + b;
}
// console.log(sum(123, 456)); // 579
console.log(sum(123, '456')); // '123456'
// -------------------------- 6、ts函数类型 ----------------------------------
// 但是可以给参数指定类型声明
function sum2(a:number,b:number){
return a + b;
}
// sum2(123,"456"); // 会报错，因为ts是一门比较严格的语言
// -------------------------- 7、给函数指定类型声明 ----------------------------------
// 给函数指定类型声明，就表示返回值的类型
function sum3(a:number,b:number):number{
return a + b;
}
let result = sum3(123,456);
// let result2 = sum3("123",456);//报错
2、TS中类型（一）
-
类型
- 实例1：
//------------------------ 1、字面量 ------------------------------------
// 直接使用字面量进行类型声明
// 但是已经赋值过的不能再进行修改，否则会报错，像常量一样，限制了它的值
let a: 18;
a = 18;
// a = 10; // 报错
//------------------------ 2、联合类型 ------------------------------------
// |：表示“ 或 ”的意思，这两个值，随便一个都可以
// 可以使用 | 来连接多个类型（也叫联合类型）
let b: "male" | "false";
b = "male";
b = "false";
// b = "hello"; // 报错
// 栗子：
let c: boolean | string;
c = "hello";
c = false;
//------------------------ 3、any类型 ------------------------------------
// any 表示任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测（所以这个不推荐使用）
// 在使用TS时，不建议使用any类型
let d: any; // 显式类型（直接声明类型）
// let d; 声明变量时，如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式类型）
d = 10;
d = "hello";
d = true;
//------------------------ 4、unknown类型 ------------------------------------
// unknown：表示未知类型的值，当自己不知道用什么类型的时候，就使用这个类型
let e: unknown;
e = 10;
e = "hello";
e = true;
// 把变量d的值，赋给s，d的类型是any,它可以赋值给任意变量，不会报错
let s: string;
s = d;
// 但是any类型会关闭TS的类型检测，赋值给s变量的话就会把s变量的类型检测也关闭掉，但是unknown就不会，这就是使用unknown的好处
// 用unknown类型的值就不能赋值给string类型，会报错，这就是any与unknown之间的区别
s = e;
// unknown实际上就是一个类型安全的any，unknown类型的变量不能直接赋值给其他变量
// 除非：
// 方法一：先给他进行一个类型检测判断
if (typeof e === "string"){
s = e;
}
//方法二：进行类型断言（就是一个判断语言）可以用来告诉解析器变量的实际类型
/**
* 类型断言语法：
* 变量 as 类型
* <类型>变量
*/
s = e as string; // 写法一
s = <string>e; // 写法二
//------------------------ 5、void类型 ------------------------------------
// 不写返回值的，函数默认为void类型，写了返回值的按返回值的类型为函数的类型
function fn(){
}
// 按照返回值情况，函数类型为：function fn2(num: any): true | 123
function fn2(num){
if (num>0){
return true;
}else {
return 123;
}
}
// void 用来表示空值，以函数为例，就表示没有返回值的函数
function fn3(): void{
// return xxx; // 只要有返回值就会报错
// return null 或 undefined; // 就不会报错
}
//------------------------ 6、never类型 ------------------------------------
// never 表示永远不会返回结果，没有值
// 与void不同的地方是：连null和undefined都不返回
// 利用never来完成报错功能，因为它永远不会返回结果！
function fn4(): never{
throw new Error("报错啦！");
}
-
实例2
//------------------------ 1、object类型 ------------------------------------
// object表示一个js对象
let a: object;
// 以下的两种也是一个对象
a = {};
a = function (){};
// {}：用来指定对象中可以包含哪些属性
// let b: {};
// 语法: {属性名1：属性值1,属性名2：属性值3, ...}
// 这个与变量a的区别是：这里可以添加一些属性和方法
// 在属性名后面加上?：表示这个属性是可选的，有也可以，没有也不会报错
let b: {name: string,age?: number};
// b = {}; // 这里会报错，因为找不到上面的那个name属性
b = {name: "大美女"};
b = {name: "大美女",age:18};
// [自定义变量名称：属性名类型为字符串]: 任意类型 ： 这里表示任意类型的属性
// 要求这个属性必须有一个name属性，其他的任意都可以，有没有都可以
let c:{name: string,[propName: string]: any};
c = {name: "陶陶",age: 18,sex: "女"};
/***
* 定义函数结构：
* 利用箭头函数，设置函数结构的类型声明
* 语法：（形参1：类型,形参2：类型,...）=> 返回值
* 这样写函数d的时候，定义形参时就会自动给形参生成类型声明
*/
let d: (a: number,b: number)=>number;
d = function (n1,n2): number{
return n1 + n2;
}
//------------------------ 2、array类型 ------------------------------------
/***
* 数组的类型声明方法：
* 方法一：类型[]
* 方法二：Array<类型>
*/
// string[]：表示字符串数组，字符串数组里只能存放字符串类型的数据，不能存放其他类型的数据
let e: string[];
e = ["a","b","c"];
// number[]：表示数值数组
let f: number[];
// Array<number>：这个也是表示数值类型的数组
let g: Array<number>;
g = [1,2,3];
//------------------------ 3、tuple（元祖）类型 ------------------------------------
/***
* 元祖：就是固定长度的数组，当自己数组的数据是固定的时候就可以用
* 语法：[类型1,类型2,类型3，...]
*/
let h: [string,number];
h = ["hello",123];
//------------------------ 4、enum（枚举）类型 ------------------------------------
/***
* enum：枚举，一般 结果是在多个值之间进行选择的时候就可以用枚举了
* 一般性别都是男或女的
*/
// 表示在这里定义了一个枚举，里面写我们需要用到的值
enum Gender{
Male,// 表示男
Female// 表示女
}
let i: {name: string,gender: Gender};// 这里就可以直接用Gender作为类型存进去
i = {
name: "大美女",
gender: Gender.Female
}
// console.log(i.gender === Gender.Female);//true
//------------------------ 5、 &（且） ------------------------------------
// &：表示同时、且、与的意思
// 变量j必须同时满足name是字符串类型，age是数值类型两个条件
// 连接两个对象
let j: { name: string } & { age: number };
j = {name: "大美女",age: 18};
// 类型的别名：简化类名的使用
type myType = string; // 创建了一个类型别名
let k: 1 | 2 | 3 | 4 | 5;
let l: 1 | 2 | 3 | 4 | 5;
let m: myType; // 但是这样没有意义
// 但是我们可以给一些长的数据加别名
type myType2 = 1 | 2 | 3 | 4 | 5;
let k2: myType2;
let l2: myType2;