TypeScript基础笔记

一、快速入门

1.1 TypeScript简介

• TypeScript是JavaScript的超集：TypeScript = JavaScript + Type
• 对JS进行了拓展，向JS中引入了类型等概念并加入了接口枚举等功能
• TS代码需要通过编译器编译为JS，然后再交由JS解析器执行
• TS完全兼容JS，任何的JS代码都可以直接当成TS使用
• TS拥有了静态类型，更加严格的语法，更强大的功能
• TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率
• TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题
• 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS

1.2 TypeScript开发环境搭建

1. 下载安装Node.js

2. 安装TS解释器，在终端中输入npm i -g typescript

3. 创建一个TS文件

4. 在TS文件目录下启动终端执行命令tsc 文件名.ts

5. 此时会在目录内生成一个.js文件

• 如果终端报错无法将“XXX”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...

  • 用管理员身份打开PowerShell，并执行命令Get-ExecutionPolicy -List，查看当前所有作用域
  • 显示仅最后一个作用域有权限，输入Set-ExecutionPolicy RemoteSigned -Scope CurrentUser，将CurrentUser权限打开
  • CurrentUser权限显示RemoteSigned即可

• 如果终端报错tsc : 无法加载文件，因为在此系统上禁止运行脚本

  • 用管理员身份打开PowerShell，并执行命令set-ExecutionPolicy RemoteSigned，将执行策略改为RemoteSigned
  • 按Y同意修改，输入get-ExecutionPolicy，查看执行策略是否改为RemoteSigned
  • 显示RemoteSigned即可

1.3 第一个TypeScript文件

• TS代码不能直接在Node.js或浏览器中运行，需要将TS代码转换成JS代码

执行代码：

1. 将TS代码转换成JS代码，在终端中输入tsc 文件名.ts回车
2. 执行JS代码，在终端中输入node 文件名.js回车

简化执行TS的步骤

使用ts-node包，即可一句命令转换运行TS文件

1. 安装命令npm i -g ts-node
2. 使用方式：ts-node 文件名.ts

• 若终端报错return new TSError(diagnosticText, diagnosticCodes);....，在终端输入npm install -D tslib @types/node，新增一个依赖包即可

1.4 注释和输出语句

1.4.1 注释

注释是对代码的解释说明，用来帮助阅读和理解代码。注释内容是不会执行的

• 单行注释：快捷键 Ctrl+/

  //这是单行注释
  

• 多行注释：快捷键 Shift+Alt+A

  /*
  这是多行注释
  */
  

1.4.2 输出语句

• 输出语句会在终端中打印信息

  console.log('Hello TypeScript!');
  

二 、变量和数据类型

2.1 变量

变量是用来存储数据的容器，并且可以更改

2.1.1 变量的声明及使用

• 变量的声明：

  let age:number;
  

  • let是TS的关键字，用来声明变量
  • age是自己定义的变量名称
  • :number用来指定变量age的类型为number
  • 分号可有可无，但是若两个语句在同一行，中间必须用分号隔开

• 变量的基本使用

  • 声明变量并指定类型

    let age:number;//未赋初值系统自动赋undefined
    

  • 给变量赋值

    age = 18;
    

  • 简化形式：声明的同时赋值，推荐使用

    let age:number = 18;
    

• 奇怪的变量声明

  let b = 3;//自动类型判断b为number类型
  
  let c:boolean|string;//使用|连接多个类型（联合类型）,c变量只能为boolean或string类型
  c = true;
  c = "Hello";
  
  let d:"A" | "B";//规定变量的字面量，d的值只能为"A"或者"B"
  d = "A";
  d = "B";
  
  let e:{
       name:string} & {
       age:number};//表示e变量必须有两个对应类型的值
  e = {
       name:'孙悟空',age:18};
  
  //{}用来表示对象中可以包含哪些属性
  let f:{
       name:string,age?:number};//？表示可有可无
  f = {
       name:'孙悟空',age:18};
  f = {
       name:'孙悟空'};
  
  let g:{
       name:string,[propName:string]:any};//表示可以继续添加任意类型数量的变量
  g = {
       name:'猪八戒',age:18,gender:'男'};
  
  let h:(a:number,b:number)=>number;//希望函数d有两个number的参数，且返回值为number类型
  h = function(n1,n2):number{
       //写不写number都行
      return n1 + n2;
  }
  

2.1.2 变量的命名规则和规范

命名规则

• 变量名称只能为字母、数字、下划线(_)、美元符号($)，且不能以数字开头
• 变量名称区分大小写

命名规范

• 变量名称要见名知意
• 使用驼峰命名法（首字母小写，后面每个单词首字母大写）

2.2 基本数据类型

• number数字：包括整数值浮点值和进制数

  let age:number = 18;
  let score:number = 99.9;
  let balance:number = -18;
  let hex: number = 0xf00d;
  

• string字符串：由零个或多个字符串串联而成，用于表示文本信息

  let name:string = 'Alan';//推荐使用单引号
  let sex:string = "Girl";
  
  let age: number = 37;
  let sentence: string = `I'll be ${
         age + 1} years old next month.`
  

• boolean布尔:只有两个值true和false

  let idStudying:boolean = true;
  let idPlaying:boolean = false;
  

• array数组：可以放不同数据类型的数据，但是建议只存放同一类型

  let names:string = ['胡歌','川宝','王冰冰'];//第一种
  names = ['胡歌','川宝','王冰冰'];
  
  let num:Array<number> = [1,2,3];//第二种
  
  let names:string = new Array('胡歌','川宝','王冰冰');//不推荐这种
  

• any任意

  let a: any;//相当于关闭了TS的类型检测，可以为任意类型，不建议使用，显式any
  let b;//声明变量不写指定类型，系统自动将其变为any类型，隐式any
  a = 'hello';
  a = true;
  
  let s:string;
  s = a;//a是any类型，s是string类型，可以赋值，不会报错
  

• unknow未知：类型安全的any

  let notSure: unknown;
  notSure = 'hello';
  
  let s:string;
  s = notSure as string;//类型断言，告诉编译器notSure就是string，别报错了
  

• void

  function fn(){
       
      //此时fn返回值是void:表示没有返回值
      return;//空着和只写return都表示void