ts基础使用

ts基础使用

1.全局安装typescript

npm install -g typescript

2.TS基本使用

1.原始类型定义

// 原始类型定义
let isDone: boolean = false
let age: number = 11
let myName: string = 'logan'
let message: string = `hello, ${myName}`
let u: undefined = undefined
let n: null = null

// undefined 和 null 是所有类型的子类型可以赋值给所有的类型
let num0: number = undefined
let num1: number = null

// 无法确定要使用什么类型时使用 any，
let notSure: any = 4
notSure = 'maybe a string'
notSure = true
// 确定是什么类型后any少用, 丧失了typescript类型检查的作用，可能会产生错误
// notSure.myName
// notSure.getMyName()

2.数组定义

// 数组不可以储存不同类型的值
let arrOfString0: Array<string> = ["a", "b", "c"] 
let arrOfString1: string[] = ["a", "b", "c"]
let arrOfNumbers: number[] = [1, 1, 1, 1]

// 数组的项中不允许出现其他的类型
// 报错 1 非字符串
let arrOfString2: string[] = ["a","b","c",1] 

3.元组定义

// 元组可以储存不同类型的值
// 定义时保证顺序一致, 数量一致就不会报错
let user: [string, number] = ['logan', 123]
console.log(user[0])  // logan

3.接口定义

// 接口：描述数组的形状
interface Person {
  readonly id: number;  // readonly只读属性，不可改变
  name: string;
  age: number;
  phone?: number  // ?可选属性 可有可无
}
let logan: Person = {
  id: 1,
  name: 'logan',
  age: 21
}
// logan.id = 2

4.枚举定义

enum Direction0 {
  // A,   // 默认为0
  A = 10, // 下面自动累加
  B,      // 11
  C,      // 12
  D       // 13
}
console.log(Direction0[0]) // A
console.log(Direction0.A)  // 10

// 常量基础使用
const enum Direction1 { // 使用const增加性能
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right'
}
const value = 'Up'
if (value === Direction1.Up) {
  console.log('go Up!')
}

5.类型推论

// 在没有明确写入变量类型时，ts会为我们自动写入第一次赋值的类型
let str = 'str'
// let str: string = 'str'

6.联合类型

// any可以赋值所有类型，所以可能会产生错误，我们可以使用联合类型来缩小范围，避免犯错
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123

7.类型断言

// 使用联合类型后只能使用定义类型的共有属性，私有属性无法使用，
// 我们可以使用类型断言告诉浏览器，我知道他是什么类型, 就可以使用这个类型的私有属性
function getLength0 (input: number | string): number {
  const str = input as string
  if (str.length) {
    return str.length
  } else {
    const num = input as number
    return num.toString().length
  }
}
// 上面的方法可以简写，只要if判断类型后会自动为我们进行转换
function getLength1 (input: number | string): number {
  if (typeof input === 'string') {
    return input.length
  } else {
    return input.toString().length
  }
}

9.类型别名

// 取一个名字多处使用
// 示例一
let sum: (x: number, y: number) => number
const result1 = sum(1, 2)

type PlusType = (x: number, y: number) => number
let sum2: PlusType
const result2 = sum2(2, 3)

// 示例二
type StrOrNumber = string | number
let result3: StrOrNumber = '123'
result3 = 123
// result3 = true

10.字面量

const str: 'name' = 'name'
const num: 1 = 1
type Dircetions = 'Up' | 'Down' | 'left' | 'Right'
let toWhere: Dircetions = 'Down' // 只能选择上面四个之一

11.交叉类型

// 用来追加规范
interface IName {
  name: string
}
type IPerson = IName & { age: number }
let person: IPerson = { name: '123', age: 123 }

12.function方法使用

// 输入输出类型
function add0 (x: number, y: number, z?: number): number {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}
let result0 = add0(1, 1)

// 输入输出es6写法
const add1 = (x: number, y: number, z?: number): number => {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}
let result1 = add1(1, 1)

// 无输出类型 void
const add2 = (x: number, y: number, z?: number): void => {
  console.log("我是没有返回值的函数" + "x")
}

// 无输入类型
const add2 = (): string => {
  return "logan"
}

// 接口描述函数
// let add2: (x: number, y: number, z?: number) => number = add1
interface ISum {
  (x: number, y: number, z?: number): number
}
let add2: ISum = add1

13.泛型

// 定义函数、接口、类的时候，我们不预先指定类型，而是在使用的时候再指定类型的一种特征
// 可以把他看成一个占位符，在使用的时候动态的传入类型值

// 示例一
function echo <T> (age: T): T {
  return age
}
const result0 = echo('123')
console.log(result0.length)

// 示例二
function swap <T, U> (tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}
const result4 = swap(['logan', true])

// 二、泛型约束
// 当我们想在泛型方法里使用属性时，编辑器不确定我们要传入哪种类型的值，就会报错
// 我们可以使用接口进行约束，当传入的值不符合方法里的属性时，就会报错
interface IWithLength {
  length: number
}
function echoWithArr <T extends IWithLength> (age: T): T {
  console.log(age.length)
  return age
}
const str0 = echoWithArr('123')
const obj = echoWithArr({ length: 10 })
const arr = echoWithArr([1,2,3])
// const num = echoWithArr(123)

// 三、泛型在类、接口上的使用
class Queue <T> {
  private data = []
  push (item: T) {
    return this.data.push(item)
  }
  pop (): T {
    return this.data.shift()
  }
}
const queue = new Queue <number> ()
queue.push(1)
// queue.push('str')
console.log(queue.pop().toFixed())

interface KeyPair <T, U> {
  key: T,
  value: U
}
let kp0: KeyPair <number, string> = { key: 1, value: 'string' }
let kp1: KeyPair <string, number> = { key: 'string', value: 1 }
let arr0: number[] = [1, 2, 3]
let arr1: Array <number> =  [1, 2, 3]

14.引入第三方库

1.现在非常多的第三方库依然是用JavaScript进行编写，但是大多数情况下，库的所有者已经帮你写好了TypeScript声明文件，即x.d.ts文件。
2.还有一些情况是库中并没有附带ts声明文件，但是可以通过：npm i @types/xxx -s   # xxx为第三方JavaScript库的名字，下载该类型的库的声明文件。
3.以上两种方法都是用在别人已经帮你编写了声明文件的情况下，若无效只能自己创建声明文件
	比如要使用qqmap这个js库，直接在src文件夹的任意地方创建一个qqmap.d.ts文件（不过还是推荐放到@types文件夹中）。
	然后在qqmap.d.ts文件中编写声明：
	declare module "qqmap";
	直接ts文件中使用
	import qqmap from "qqmap";
	就可以引入这个第三方JavaScript库。