TypeScript 基础内容

TypeScript:

一.简介:

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

二. TypeScript与JavaScript区别:

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译

TypeScript 的优势:

1. 静态输入
2. 大型的开发项目
3. 更好的协作
4. 更强的生产力

JavaScript 的优势:

1. 人气
2. 学习曲线
3. 本地浏览器支持
4. 不需要注释
5. 灵活性

三. 开发环境:

1.下载Node.js

• 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
• 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

2.安装Node.js

3.使用npm全局安装typescript

• 进入命令行

npm i -g typescript

4.创建一个ts文件
5.使用tsc对ts文件进行编译

• 进入命令行
• 进入ts文件所在目录
• 执行命令：

tsc xxx.ts

四. 基本类型

(一).类型声明:

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

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

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

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

• 基本语法:

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

(二). 基本类型:

类型	描述
number	任意数字
string	任意字符串
boolean	布尔值true或false
字面量	限制变量的值就是该字面量的值
any	任意类型
unknown	类型安全的any
void	没有值（或undefined）
never	不能是任何值
object	任意的JS对象
array	任意JS数组
tuple	元素，TS新增类型，固定长度数组
enum	枚举，TS中新增类型

例如:

• number

   let age: number;
   age = 21
   age="lalalaal" //此代码会报错,因为age为number类型,不能赋值字符串
   let hex: number = 0xf00d;
   let binary: number = 0b1010;
   let octal: number = 0o744;
   let big: bigint = 100n;
  

• boolean

    let isBoolean:boolean ;
    isBoolean = 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}.
  

• 字面量

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

   let color: string|number;
   color='red';
   color=true
   let num: 1 | 2 | 3 | 4 | 5;
   le
  

• any :一个变量设置any后相当于关闭TS类型检测

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

• unknown

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

  注:any和unknown区别:

  1. any可以给赋值给任何变量

  2. unknown不能直接赋值

      if(typeof e==="string "){
      	s = e;
      }
     

• void

   let unable: 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中函数赋值:

function:sum(a:"number",b:"number"){
	return a+b
}
let sum3 = sum(a:123,b:456)

(四). 类型断言:
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”，你会比 TypeScript 更了解某个值的详细信息，你清楚的知道一个实体具有比它现有类型更确切的类型。

1.尖括号语法

let someValue: any = "this is a string";
// someValue 是any任何类型的实体，在具体应用的时候使用了断言 <string> someValue肯定是一个字符串类型
let strLength: number = (<string>someValue).length;

2.as 语法

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

---

总结:

TypeScript 正在成为开发大型编码项目的有力工具。因为其面向对象编程语言的结构保持了代码的清洁、一致和简单的调试.
TypeScript 增加了可选类型、类和模块.
TypeScript 支持开发大规模 JavaScript 应用.
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性.