TS学习笔记(持续更新...)

安装 TypeScript

全局安装 typeScript

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功

tsc -V

运行 ts

在文件夹内创建一个 ts 文件，然后打开VsCode继承终端  输入指令初始化 ts 

tsc --init

 

 然后输入 

tsc -w

 

 然后创建一个 html 文件 后得到四个文件

之后在index.html文件内引入index.js后运行

在 index.ts文件内编写 ts 代码就可以啦~~

数据类型和枚举类型

1. Boolean

let a: boolean = true

2. Number

let b: number = 200

3. String

let c: string = '你好 ts string'

4. Undefined  Null

let d: undefined = undefined
let e: null = null

5. void

表示没有任何类型一般用于函数没有返回值

function fn(): string {
    return '我是 string 类型'
}
function fun(): void {
    return
}

6. any

表示任意类型后面赋值任意类型都行

let f: any = [] // 表示已经知道该数据类型可能是好几种类型范围

7. unknown

表示未知的数据类型

let g: unknown = '100' // 表示 该类型不知道是那种数据类型

8. never

表示从不出现的值

let foo: never

9. Array

第一种声明数组方式

let h: number[] = [100, 200, 300, 400]
let i: any[] = [100, 'abx', {}, []]

第二种声明数组方式

let j: Array<any> = [100, 'abx', {}, []]

 10. 元组数据类型(特殊的数组类型)

let k: [number, boolean, string] = [100, false, '']

11. Object

对象数据类型

let obj: object = {
  name: '你好 ts'
}

12. 多个类型 

let m: string | number = ''

13. enum(枚举类型)

列出一个可选的范围，取值只能从这个类型中取一个

enum Sex {
  male = '男',
  female = '女',
}
console.log(Sex);
let boy: Sex = Sex.male
// let boy:Sex = '人妖'

1. 数字型枚举

注意：当该枚举类型是数字型枚举时，那么存在反向映射 及 key 和 value 反过来了

enum direction {
  up = 10,
  down = 11
}
console.log(direction);

enum sta {
  success,
  error,
}
console.log(sta);
console.log(sta['success'], sta[0]);

2. 字符型枚举

enum dir {
  up = '向上',
  down = '向下'
}
console.log(dir.up,dir['up']);

3. 异构型枚举

枚举的成员的类型不是同一种类型，不常见

enum status1 {
  success = 'ok',
  code = 500
}
console.log(status1);

4. 常量型枚举

常量型枚举，其成员值只能是常量  不能使用变量

let type4 = 3
enum herotype {
  type1 = 1,
  type2 = 2,
  // type3 = type4,   报错 不能使用变量
  type3 = 3
}

5. 枚举的合并 -- 同名枚举会自动合并

enum typeHero {
  type1='刺客',
  type2='法师'
}

enum typeHero {
  type3='战士',
  type4='辅助'
}

console.log(typeHero)

ts 中的函数

ts中的函数和js函数的区别就是 函数的形参和返回值 都必须规定一下数据类型

function fn(): void { }
function fn1(m: string): string { return m }
fn1('100')
let fn2 = (m: string): string => { return m }

ts中函数的参数类型

1. 可选参数 => 可传可不传  语法:  ?参数

2. 默认参数 => 没有赋值的话就使用默认值  语法:  =默认值

3. 剩余参数 => 和js相同使用拓展运算符(注意需要写在参数的最后面)

let fn3 = (m: string, n: number = 18, k?: boolean, ...arr: any[]) => {
  console.log(m, n, k)
  console.log(arr)
}
fn3('小明', 25, true, '小红', 16, false)

函数的重载

第一种方式

function fn4(m: any): any {
  return typeof m == 'number' ? m + 5 : `我是${m}`
}

第二种方式

function fn5(m: number): number
function fn5(m: string): string
// 执行函数
function fn5(m: any): any {
  return typeof m == 'number' ? m + 5 : `我是${m}`
}
console.log(fn5(100))
console.log(fn5('张三'))
// console.log(fn5(true)) // 报错 没有匹配的重载类型

类型断言

类型断言：告诉编译器，我知道我自己是什么类型，也知道自己在干什么

类型断言的语法方式1：<类型>变量名  2：值 as 类型

function getString(str:number | string): number {
  // return str.toString().length
  // 如果 str 本身就是 string 类型，那么就没有必要调用 toString 方法的

  if((<string>str).length) {
    // return (<string> str).length
    return (str as string).length
  } else {
    // 此时说明 str 是 number 类型
    return str.toString().length
  }
}
console.log(getString(12345))
console.log(getString('0123456'))

类型断言：没有明确的指定类型的时候推测出一个类型

let txt = 100 // number 类型
txt = 'Hachiman-Hikigaya'
console.log(txt)

let txt2 // any 类型
txt2 = 100
txt2 = 'Hachiman-Hikigaya'
console.log(txt2)

接口

语法：创建一个 person 的数据类型

可选属性  给接口赋值时可传可不传  =>  语法: ?

只读属性  =>  语法: readonly

enum sex {
  male = '男',
  female = '女'
}
interface Person {
  name: string,
  readonly age: number, // 只读属性
  sex?: sex // 可选属性
}
let a: Person = {
  name: 'Hachiman-Hikigaya',
  age: 20,
  sex: sex.male
}
console.log(a)

使用接口定义函数数据类型

声明 fn 函数数据类型

interface fn {
  (): void
}
let f1: fn = () => { console.log(111) }
let f2: fn = function () { console.log(222) }

声明 Fn 函数数据类型

interface Fn {
  (m: string, n: any): string
}
let f3: Fn = (a: string, b: any): string => {
  return `我是${a}--年龄${b}`
}

接口调用函数

interface men {
  name: string,
  age: number,
  say(m: string): string
}
let ikun: men = {
  name: '蔡徐坤',
  age: 30,
  say(m: string): string {
    return `我是个人练习生${this.name}--${m}`
  }
}
console.log(ikun.say('喜欢篮球'))

可索引接口

主要用来定义数组或对象数据类型的

interface Arr {
  [name: number]: any
}
let arr = ['a', 'b', [], {}]

interface Obj {
  [name: string]: any
}
let obj = {
  a: '1',
  b: 1,
  c: []
}

接口的继承

interface Men {
  eat(): string
}
interface Father {
  name: string,
  age: number,
  work(m: string): any
}
// 定义孩子接口   使用 extends 关键字实现继承
interface child extends Father, Men {
  sex: sex,
  study(): string
}
let student: child = {
  sex: sex.female,
  study(): string {
    return '我要好好学习敲代码'
  },
  name: 'Hachiman-Hikigaya',
  age: 18,
  work(m: string): any {
    return `我要到百度敲${m}`
  },
  eat(): string {
    return '苹果'
  }
}
console.log(student)
console.log(student.work('代码'))

为了使用接口表示函数类型，我们需要给接口定义一个调用签名

他就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

函数类型，通过接口的方式作为某个函数的类型使用

interface ISearchFunc {
  // 定义一个调用签名
  (source: string, subString: string): boolean
}
// 定义一个函数，该类型就是上面定义的接口
const searchString: ISearchFunc = function (source: string, subString: string): boolean {
  // 在 source 字符串中查找 sunString 这个字符串
  return source.search(subString) > -1
}
// 调用函数
console.log(searchString('哈哈哈，我又变帅了', '帅'))

类

1. 创建类

class Girl {
  protected name: string // 受保护的属性
  private age: number
  say(): any {
    return `${this.name}, 喜欢篮球`
  };
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
let ikun = new Girl('蔡徐坤', 30)
// console.log(ikun)
// console.log(ikun.say())

2. 类的继承

 类与类之间的关系  继承后类与类之间的叫法

A 类继承了 B 类，那么此时  A 类叫子类，B 类叫基类

子类 => 派生类        基类 => 超类(父类)

class student extends Girl {
  grade: string
  major: string
  study(): void {
    console.log(`${this.name} -- ${this.age} -- 喜欢打篮球`) // private 子类不可以使用
  }
  constructor(name: string, age: number, grade: string, major: string) {
    super(name, age)
    this.grade = grade
    this.major = major
  }
}
let xiaoikun = new student('小坤', 18, '6', '篮球')
console.log(xiaoikun)
xiaoikun.study()

3. 类的修饰符

pubilc 共有属性 默认

protected 受保护的属性，在当前类 girl 和 子类 student 中能访问，但是不能在实例对象中访问

private 私有属性 只能在当前类使用，无法在子类和实例对象中使用

4. 类的静态属性

es6 中静态类，只需要在属性前加 static 关键字，特点是 该属性和方法绑定在类名 Boy 上，实例对象无法访问

class Boy {
  static name1: string
  public age: number
  static say(): any{
    console.log(this)
    return `${this.name1},喜欢健身`
  }
  constructor(name: string, age: number){
    Boy.name1 = name
    this.age = age
  }
}
let xiaopeng = new Boy('彭于晏', 40)
console.log(xiaopeng)
console.log(Boy.say())

总结: 类和类之间如果要有继承管理，需要使用 extends 关键字

子类可以调用父类中的构造函数，使用的是 super 关键字(包括调用父类中的实例方法，也可以使用 super)

子类中可以重写父类的方法

接口

...