TypeScript（02）——函数，class类其他语法及ts在html页面中如何使用案例

前言

时隔一年。。第二篇ts学习笔记重出江湖（很惭愧…），继上一篇TypeScript学习笔记（01）–类型后，此篇介绍语法部分的剩下内容及一个小案例来实践ts用法；

正文

如何创建ts文件并使用

1.使用命令行创建ts环境

• npm i typescripe -g
• tsc -V 检测版本
• 新建learn.ts文件，index.html页面
• 命令行运行 tsc ./learn.ts在同层目录下生成 learn.js
• html页面引用js文件即可,不会自动更新

2. 让vscode创建ts文件并编译

• 运行tsc -init 创建tsconfig.json文件
• 设置 outDir 文件目录为./js/
• 使用vscode打开终端运行任务，tsc监视-即可在同层目录下生成js文件

语法

1.变量

• js : let 变量名 = 值
• ts : let 变量名：变量类型 = 值

2.常见类型

• js原有类型：
  string number boolean Array Null undefined Symbol Object
• ts新增类型：

• tuple（元祖）:元组是一个包含固定数量的元素和相关类型的数组
• enum(枚举)
• any(任意类型):一般在取dom的时候使用
• never：底部类型，可以付给所有其他类型
• void：表示无含义，一般在没有返回值的函数中使用

3. 修饰符（Modifiers）

• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的；
• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问；
• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

 public readonly msg!: number | string;
 private readonly msg!: number | string;
 protected readonly msg!: number | string;

4.readonly 只读

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

 readonly msg!: number | string;
 public readonly msg!: number | string;

5.类型推断

• 一般在同一行，没有给类型的，会进行类型推断；
  let a = 18; ==>let a:number = 18
• 联合类型；不确定时，可以给多个类型：let a :string|null = fun()

6.函数

• 返回值类型
  function 函数名（）:返回值类型{ }
  let 变量名：变量类型 = 函数名（）

• 形参类型
  function 函数名（参数1：类型，参数2：类型）:返回值类型{ }
  let 变量名：变量类型 = 函数名（实参1，实参2）

• 带默认值的参数传递

  function 函数名（参数1：类型=默认值1，参数2：类型=默认值2）:返回值类型{ }

function add(x:number=2,y:number=3):number{
   
    console.log(x+y)
    return x+y
}
add() //5
add(6) //9
add(6,5)  //11
add(undefined,5)  //7
// * 不传参  add()--> add(2,3)
// * 传一个参数 add(6) --> add(6,3)
// * 两个参数都传 add(6,5)-->add(6,5)
// * 传后一个参数 add(undefined,5)-->add(2,5)

• 形参不确定的情况

  第一个参数确定，后面的参数用展开运算符，并且是数组类型指代；

function edit(x?:number,...y?:number[]):void{
   
    let num:number = x?x:1
    for (const ele of y) {
   
        num += ele
    }
    console.log(num)
}
edit()//1
edit(3)//3
edit(1,2,3,4,5) //15

7.类

• 构造函数+new 方法创造类
• class函数创造类
  根据 ES6的class 构造函数中的例子用ts方法改写类