TypeScript基础笔记

文章目录

  • 一、快速入门
    • 1.1 TypeScript简介
    • 1.2 TypeScript开发环境搭建
    • 1.3 第一个TypeScript文件
    • 1.4 注释和输出语句
      • 1.4.1 注释
      • 1.4.2 输出语句
  • 二 、变量和数据类型
    • 2.1 变量
      • 2.1.1 变量的声明及使用
      • 2.1.2 变量的命名规则和规范
    • 2.2 基本数据类型
  • 三、运算符
  • 四、语句
  • 五、数组
  • 六、函数
  • 七、面向对象
    • 7.1 类
    • 7.2 对象
      • 7.2.1 对象的类型注解
      • 7.2.2 对象方法的类型注解
      • 7.2.3 对象的使用
    • 7.3 封装
    • 7.4 继承
    • 7.5 抽象类
    • 7.6 接口
    • 7.7 泛型
    • 7.8 内置对象

一、快速入门

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

你可能感兴趣的:(typescript,javascript,前端)