typeScript基础知识

> 1 mkdir hello.ts // 新建一个ts文件
> 2 npm i -g typescript // ts运行条件
> 3 tsc hello.ts // 执行ts文件转化为js文件
> 4 node hello.js // 运行转化后的js文件

> 09-简化执行TS的步骤 npm i -g ts-node  // ts-node hello.ts 转化并执行ts文件

TypeScript常用类型

西瓜视频--TS入门到实战

基本数据类型

number

string

boolean

null

undefined

array

联合类型（类型别名）

// 基本类型
let age: number = 18
let name: string = '张三'
let isLoading: boolean = true
let a: null = null
let b: undefined = undefined

// 数组类型
let A: number[] = [1, 2, 3]
let A2: Array<number> = [1, 2, 3]

// 联合类型
let arr: (number | string)[] = [1, 2, 3, 'a']
let arr2: number | string[] = 1
let arr3: number | string[] = ['a', 'b']

// 类型别名
type customArray = (number | string)[]
let arr1: customArray = [1, 2, 3, 'a']
let arr2: customArray = [1, 2, 3, 'a'] 

函数类型

// 函数类型： 函数参数和返回值的类型

// 单独指定参数和返回值的类型
function add(num1: number, num2: number): number {
  return num1 + num2
}
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

// 同时指定参数和返回值的类型(只适用于函数表达式)
const add: (num1: number, num2: number) => number =(num1, num2) => {
  return num1 + num2
}

// 如果函数没有返回值，那么函数返回值类型为：void
function greet(name: string): void {
  console.log('hello', name)
}

// 可选参数
// 只能出现在参数列表的最后，
// 也就是说可选参数后面不能再出现必选参数
function mySlice(start?: number, end?: number): void {
  console.log(start, end)
}
mySlice()
mySlice(1)
mySlice(1,2)

对象类型

let person: { name: string; age: number; sayHi(): void; greet(name: string) } = {
  name: 'jack',
  age: 19,
  sayHi() {},
  greet(name) { return name }
}

// 如果一行 代码只指定一个属性类型（通过换行来分割多个属性类型），可以去掉分号
// 方法的类型也可以使用箭头函数的形式（比如： {sayHi: ()=> void}）
let person: {
  name: string
  age: number
  sayHi: ()=> void
} = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

// 对象可选属性
function myAxios (config: { url: string; method?: string }) {
  console.log(config)
}
myAxios({
  url: '',
  // method: ''
})

接口

// 对象类型 - 基本写法
let person: { name: string; age: number; sayHi(): void } = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

// 对象类型 - 接口写法
interface IPerson {
  name: string
  age: number
  sayHi(): void
}
let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {}
}
let person2: IPerson = {
  name: 'jack',
  age: 16,
  sayHi() {}
}

interface（接口）和type（类型别名）的对比

// 相同点： 都可以给对象指定类型

// 不同点
// 接口： 只能为对象 指定类型
interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 类型别名： 不仅可以为对象指定类型， 实际上可以为任意类型指定别名 
type IPerson = {
  name: string
  age: number
	sayHi(): void
}
type NumStr = number | string

接口的继承

interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }

// 继承的写法
interface Point2D { x: number; y: number }
interface Point3D extends Point2D { z: number }
let p3: Point3D = {
  x: 1, 
  y: 1,
  z: 1
}

元组

类型推论

类型断言

字面量类型

枚举类型

any类型

TS中的typeof运算符

// 查询变量的类型
let a: typeof p

// 查询对象属性的类型
let num: typeof p.x

// 但无法查询其他形式的类型，比如函数调用的类型
function add(num1: number, num2: number) {
  return num1 + num2
}
let ret: typeof add(1, 2)

TypeScript高级类型

class类

class Person {
  age: number
  gender = '男'
}
const p = new Person()

class的构造函数

class Person {
  age: number
  gender: string
  
  constructor(age: number, gender: string) {
    this.age = age
    this.gender = gender
  }
}
const p = new Person(18, '男')

实例方法

class Point {
  x = 1
  y = 2
  scale(n: number) {
    this.x *= n
    this.y *= n
  }
}
const p = new Point()
p.scale(10)
console.log(p.x, p.y)

类的继承

class Animal {
  move() { console.log('Moving alone!') }
}
class Dog extends Animal {
  bark() { console.log('汪') }
}
const dog = new Dog()
dog.move() // Moving alone!
dog.bark() // 汪

interface Singable {
  sing(): void // 指定方法
}
class Person implements Singable {
  sing() { // 实现方法
    console.log('你是我的小呀小苹果')
  }
}

类的可见性

class Animal {
  // 公有的 - public
  public move() { console.log('Moving alone!') }
  // 受保护的 - protected 当前类和子类方法内部可见，通过this访问。
  // 但是对实例不可见
  protected move2() { console.log('Moving alone!') }
  // 私有的 - private 只在当前类中可见
  private __run__() { console.log('Animal内部辅助函数') }
}
class Dog extends Animal {
  bark() { console.log('汪') }
}
const d = new Dog()
d.move() // Moving alone!
d.bark() // 汪

只读修饰符readonly

class Person {
  readonly age: number = 18
  constructor(age: number) {
    this.age = age
  }
}

// 接口或者{}表示的对象类型，也可以使用readonly
interface IPerson {
  readonly name: string
}
let obj: { readonly name: string } {
  name: 'jack'
}

类型兼容性

let arr = ['a', 'b', 'c']
// forEach的回调函数默认3个参数，只传了item，发生了类型兼容性
arr.forEach(item => {})

arr.forEach((item, index) => {})
arr.forEach((item, index, array) => {})

对象之间的兼容性

接口之间的兼容性

学习截止到接口之间的类型兼容性