TypeScript语法总结-看这篇就够

1.Typescript概述

融合了后端面向对象思想的超级版的JavaScript语言。

​ TypeScript是JavaScript的超集，扩展了JavaScript的语法。

特点：
（1） TypeScript: 【静态类型检查器】 可在编译时检查错误
（2） TypeScript为JS的超集
（3） TS === JS + 【类型】 js有的ts都有
（4） TS 规范了 JS类型声明 使之更加严谨

TypeScript本质就是带有类型检查的JavaScript。

好处:
javascript,灵活,但会使程序出现不可预知的错误，运行时才检测。

typescript,编译时发现错误，更好的代码提示。规范代码，提升代码可读性，提高开发效率。

2.环境准备

基于node环境，vscode工具+Typescript插件。

npm i typescript -g  // 全局安装Typescript 

tsc -v // 查看ts版本

新建一个项目，在其中新建一个ts文件demo.ts，文件内容如下

console.log("hi Typescript") //先使用js的代码内容

由于ts文件是不能够在浏览器中解析的，ts文件首先需通过编译，编译后才能被浏览器解析，用命令

// tsc + 文件名
tsc demo.ts // 将ts转为js浏览器可识别的代码

原因：PowerShell的默认执行策略是Restricted,它禁止运行任何脚本和配置文件。故需更改PowerShell的设置来更改脚本的执行策略。

编译后在目录下产生一个和ts文件同名的js文件，此时用node命令对该js文件进行解析，用node命令

// node + 文件名
node demo.js

由于每次ts修改都需使用tsc命令进行编译成js,比较麻烦，可使用以下命令进行侦听，当文件发生变化后，会自动编译ts。

tsc demo.ts -w

此时该终端窗口不关，新开一个窗口 直接执行node命令

node demo.js

这里只是对单个文件进行监听，若项目中有很多的ts文件，如何对所有文件进行侦听呢。

先在项目下新建一个tsconfig配置文件，也可执行以下命令生成：

tsc --init // 生成tsconfig配置文件

此时再在项目中执行以下命令则可以对整个项目的ts文件进行监听了。

tsc -w

还有更简洁的方式(直接运行ts文件方法)，需安装以下包

安装ts-node

 *ts-node* 是一个TypeScript执行引擎,能让我们在 Node.js 环境下直接运行 TypeScript 代码。 

npm i ts-node -g

npm init -y // 初始化一个package.json

安装声明文件

npm i @types/node -D

**@types/node**是TypeScript的一个声明文件包，用于描述Node.js核心模块和常用的第三方库的类型信息。

这些声明文件增加了对ts在Node.js环境下的支持，并提供了更好的类型安全和编辑器智能提醒。

@types/node提供了更好的Node.js环境下TypeScript的类型声明支持，能够获得更好的类型提示及错误提示等。



安装完毕后，可直接用命令执行ts文件！

ts-node index.ts

此时可直接用命令执行ts文件！

### 3.数据类型

#### 3.1 基本类型(原始类型)

原始类型（string, number, boolean, undefined, null）

特点：简单，这些类型，完全按照 JS 中类型的名称来书写。

//string类型
let str: string = ‘abcdefg’; //:string 表示【类型注解】,声明变量的时候就进行类型约束
console.log(“🚀 ~ str:”, str)
// str = 12; // 报错，输入与预先定义的类型不同的值的时候，就会报错，

// number类型
let num:number = 10;
console.log(“🚀 ~ num:”, num)

// boolean类型
let bool: boolean = true;
console.log(“🚀 ~ bool:”, bool)

//类型推导: 变量未指定类型时，ts会依照上下文为其指定类型。
let age = 19
console.log(“🚀 ~ file: 基本类型.ts:15 ~ age:”, age)
let level; // 未赋初值，类型为any
console.log(“🚀 ~ level:”, level)

// undefined类型
let un: undefined = undefined;
console.log(“typeof un:”, typeof un)
// 声明一个变量,但是没有赋值,该变量值为undefined
let a;
console.log(“🚀 ~ a:”, a)

// null类型
// null表示什么都没有,表示一个空对象引用
let nu: null = null;
console.log(“🚀 ~ typeof nu:”, typeof nu ) // object

这样做好处就是当输入与预先定义的类型不同的值的时候，就会报错。

#### 3.2 基本类型(对象类型)

对象类型：`object`（包括数组、对象、函数等对象）。

##### 3.2.1 Object与object区别

// 一、Object与object区别：
// Object与原型链有关，因为原型链的顶端就是Object或者function，在TS中他就代表了所有的类型。
let a1: Object = 2;
let a2: Object = “2”;
let a3: Object = () => 12;
// 除了null，undefined 不能赋值给它，其他的都可以

// object表示非原始类型，也就是除number，string，boolean等之外的类型。它支持引用类型，比如数组，对象，函数等等。
let x: object = [];
let x1: object = {};
let x2: object = () => 2;

##### 3.2.2 数组类型(Array)

// 二、数组类型(Array)
// 两种方式定义数组
// 1种是元素后接[]
let arr1: number[] = [1,2,3]
// 2种是使用数组泛型，Array<元素类型>，泛型后面讲
let arr2:Array= [3,4,5];
let arr0 =[4, 5, 6];//另外也可省略掉指定类型，编译器会自动推断

// 二维数组定义方式
let arr3:number[][] = [[1], [2], [3]];
let arr4: Array<Array>= [[1],[2], [3]];

##### 3.2.3 元组tuple

// 三、元组tuple
// 元组是ts中新增类型，固定长度且每个元素都是特定类型的数组就是元组，元组一般用于键值对。
let user: [number, string] = [1, ‘zhaogu’]

##### 3.2.4 函数和函数类型

//四、函数和函数类型
// 函数—指定参数和返回值类型
function add(x: number,y: number): number {
return x + y;
}
// 通常也可【省略】返回值类型，TS能根据返回语句自动进行类型推断。
function add2(x: number,y: number) {
return x + y;
}
// 返回值类型void
function testFunc(name: string): void {
console.log(name);
}
// 有时需给某参数传值，有时不需要
// 第一种方法:参数加? 表示可选，可选参数必须放在必须参数后面。

function getName(name: string, nickName?: string) {
let resName: string = name + ’ ’ + nickName;
console.log(“🚀 ~ getName ~ resName:”, resName)
return resName;
}
getName(‘mary’)
getName(‘mary’, ‘coco’)
// 第二种方法:参数设置默认值
function getName2(name: string, nickName = ‘cc’) {
let resName2: string = name + ’ ’ + nickName;
console.log(“🚀 ~ getName2 ~ resName2:”, resName2)
return resName2;
}
getName2(‘nana’)
getName2(‘nana’, ‘kiki’)

// 带默认值的参数不需要一定在必须参数后，若在必须参数之前，用户必须明确传入undefined值获得默认值
function getName3(nickName = ‘uu’, name: string) {
let resName3: string = name + ’ ’ + nickName;
console.log(“🚀 ~ getName3 ~ resName3:”, resName3)
return resName3;
}
// getName3(‘nana’) // 报错
getName3(undefined, ‘nana’)
getName3(‘vv’, ‘nana’)

// 函数表达式类型写法，会根据右边函数推到并且返回给变量info
const info = (name:string, age:number): number => {
return age
}
// 为函数定义类型
const info2: (name:string, age:number) => number = (name, age) => {
return age;
}
// 上面写法较繁琐，可用type将类型抽离。type后面详讲。
type InfoType = (name:string, age:number) => number
// interface InfoType {
// (name:string, age:number): number
// }
const info3: InfoType = (name, age) => {
return age;
}

##### 3.2.5 对象类型

// 四、对象
const employeeObj: {
readonly id: number;
name: string;