TypeScript简介，开发环境搭建，类型声明(一)

第一节、TypeScript简介

一、TypeScript是什么？

1.TypeScript以JavaScript为基础构建的语言

2.TypeScript是JavaScript的超集

3.TypeScrip对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性

4.TS代码需要通过编译器编译为JS，然后再交由JS解析器执行

5.TypeScript可以在任何支持JavaScript的平台中执行

6.TS完全兼容JS，换言之，任何的TS代码都可以直接当成JS使用

二、TypeScrip增加了什么？

1.类型

2.支持ES的新特性

3.强大的开发工具

4.添加ES不具备的新特性

5.丰富的配置选项

三、为什么要学习TypeScrip？

1. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能

2. TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率

3. TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题

4. 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS

第二节、开发环境搭建

1. 下载Node.js

2. 安装Node.js

3. 使用npm全局安装typescript

   • 进入命令行(win+R输入cmd进入)

   • 输入：npm i -g typescript

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   • 进入ts文件所在目录，打开命令行（cmd命令或者通过按住shift加鼠标右键进入powerShell窗口都可以）

   • 执行命令：tsc xxx.ts

 第三节、类型声明

• 类型声明是TS非常重要的一个特点

• 通过类型声明可以指定TS中变量（参数、形参）的类型

• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

• 语法：

  let 变量: 类型;
  
  let 变量: 类型 = 值;
  
  function fn(参数: 类型, 参数: 类型): 类型{
      ...
  }

  例子：

// 1.声明一个变量a,同时指定它的类型为number
let a: number;
//a的类型设置为了number,在以后的使用过程中a的值只能是数字
a = 1;
a = 'hello';//报错
// 2.声明变量时同时赋值
let b: string = 'hello';
b = 123//报错

// 4.JS中的函数是不考虑参数的类型和个数的，在TS中则考虑
function sum(a, b) {
  return a + b;
}
console.log(sum(123, 456))//579
console.log(sum(123, '456'))//'123456'

function sum2(a: number, b: number) {
  return a + b;
}

console.log(sum2(123, 456))
console.log(sum2(123, '456'))//报错
console.log(sum2(123))//报错
console.log(sum2(123, 456，789))//报错

function sum3(a: number, b: number):number {
  return a + 'hello';//报错
}

   注意：

• 自动类型判断

  • TS拥有自动的类型判断机制

  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

 例子：

// 3.如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let c = false;
c = 123//报错

其他类型的声明：

（1）字面量进行类型声明

//也可以直接使用字面量进行类型声明
let a: 10;
a = 10;
a = 20;//报错
//可以使用 | 来连接多个类型（联合类型）
let b: 'male' | 'female';
b = 'male';
b = 'female';

let c: boolean | string;
c = true;
c = 'hello'

（2）任意类型（any）进行类型声明

//any表示的是任意类型，一个变量设置类型为any后相当于该变量关闭了TS的类型检测
//使用TS时，不建议使用any类型
let d: any;
d = 10;
d = 'hello';
d = true;

// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d;
d = 10;
d = 'hello';
d = true;


//d的类型是any,它可以赋值给任意变量
let s: string;
s = d;

（3）unknown进行类型声明

//unknown表示未知类型的值
let e: unknown;
e = 10;
e = true;
e = 'hello';
let s: string;
s = e;//报错，unknown类型的变量，不能直接赋值给其他变量
//unknown实际上就是一个类型安全的any
//解决方案1
if (typeof e === 'string') {
  s = e;
}
//解决方案2:类型断言，可以同来告诉解析器变量的实际类型
// 语法：
// 变量 as 类型
// <类型>变量
s = e as string;
s = <string>e;

注意：当类型未知时，尽量使用unknown而不是any！！！

（4）void进行类型声明

//void用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void{
  return undefined;
}
function fn1(): void{
  return;
}

（5）never进行类型声明

//never表示永远不会返回结果
function fn2(): never{
  throw new Error('报错了');
}

（6）对象（object）进行类型声明

//object表示一个js对象
let a: object;
a = {};
a = function () {
}
//{}用来指定对象中包含哪些属性
let b: { name: string, age: number }
b={name:'hsq'}//报错，age属性没有
//在属性名后面加?,表示属性是可选的
let c: { name: string, age?: number }
c = { name: 'hsq' }
//[propName:string]:any表示任意类型的属性
let d: { name: string,[propName:string]:any}
d = { name: 'hsq', age: 18, gender: '男' }
//设置函数结构的类型声明
// 语法：（形参：类型，...）=>返回值
// let e: (a: number, b: number) => number;
// e = function (n1: string, n2: string): number{
//   return n1 + n2;//报错,形参与返回值不同
// }
let f: (a: number, b: number) => number;
f= function (n1: number, n2: number): number{
  return n1 + n2;//报错,形参与返回值不同
}

（7）数组（array）进行类型声明

// 数组的类型声明：
// 类型[]
// Array<类型>
//string[]表示字符串数组
let e: string[];
e = ['a', 'b', 'c'];
//number[]表示数字数组
let f: number[];
let g:Array<number>
g = [1, 2, 3];

（8）元组进行类型声明

// 元组，元组就是固定长度的数组
// 语法：[类型，类型]
let h: [string, number];
h = ['hello', 123];

 （9）枚举进行类型声明

//enum 枚举
enum Grnder{
  Male = 0,
  Female=1
}
let i: { name: string, gender: Grnder };
i = {
  name: '孙悟空',
  gender:Grnder.Male
}

小补充： 

let j: { name: string } & { age: number };
j = { name: 'hsq', age: 18 }

//类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
k = 1;

总结：

类型：

number

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

   boolean

let isDone: boolean = false;

string

let color: string = "blue";
color = 'red';
​
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
​
I'll be ${age + 1} years old next month.`;

字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

any

let d: any = 4;
d = 'hello';
d = true;

unknown

let notSure: unknown = 4;
notSure = 'hello';

void

let unusable: void = undefined;

never

function error(message: string): never {
  throw new Error(message);
}

object（没啥用）

let obj: object = {};

array

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

tuple

let x: [string, number];
x = ["hello", 10]; 

enum

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;
​
enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;
​
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

类型断言

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

第一种

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

第二种

let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;