Typescript 快速入门

Typescript

什么是 Typescript

Typescript 是 Javascript 的超集。

Typescript 为 Javascript 增加类型能力，避免 JS 弱类型下产生的各种有意无意的问题

为什么使用 Typescript

• 降低代码出错的风险
• 提高了代码的可读性
• 代码自动补全

缺点

增加学习成本

基础类型

let isDone: boolean = false

let age: number = 20
let binaryNumber: number = 0b1111

let firstName: string = 'viking'
let message: string = `Hello, ${firstName}, age is ${age}`

// undefined null 是任何类型的子类型
let u: undefined = undefined
let n: null = null
let num: number = undefined

any类型和联合类型

let notSure: any
notSure = 'maybe it is a string'
notSure = true
notSure.myName
notSure.getName()

let numberOrString: number | string = 234
numberOrstring = 'abc'

Array 和 Tuple(元祖)

let arrOfNumbers: number[] = [1, 2, 3, 4]
arrOfNumbers.push(5)

function test() {
  console.log(arguments)
}

let user: [string, number] = ['viking', 1]
user = ['molly', 2, true]

Interface 接口

• 对对象的形状进行描述
• 对类进行抽象

interface Person {
  readonly id: number;
  name: string;
  age?: number;
}
let viking: Person = {
  id: 1234, // 只读，不可在修改
  name: 'viking',
}

函数和类型推断

const add = function(x: number, y: number, z: number = 10, d?: number): number {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}
const add2: (x: number, y: number, z: number, d?: number) => number = add
add2(2, 3, 5)

枚举（Enum）

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'Left',
  Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
  console.log('go up!')
}

// 常量枚举
const enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'Left',
  Right = 'RIGHT',
}

泛型

function echo<T>(arg: T): T {
  return arg
}
const result = echo('str')

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])

function echoWithArr<T>(arg: T[]): T[] {
  console.log(arg.length)
  return arg
}
const arrs = echoWithArr([1, 2, 3])

interface IWithLength {
  length: number
}
function echoWithLength<T extends IWithLength>(arg: T): T {
  console.log(arg.length)
  return arg
}
const str = echoWithLength('str')
const obj = echoWithLength({ length: 10, width: 10 })
const arr2 = echoWithLength([1, 2, 3])

泛型（类和接口）

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)
console.log(queue.pop().toFixed())
console.log(queue.pop().toFixed())

const queue2 = new Queue<string>()
queue2.push('str')
console.log(queue2.pop().length)


interface KeyPair<T, U> {
  key: T;
  value: U;
}
let kp1: KeyPair<number, string> = { key: 123, value: 'str' }
let kp2: keyPair<string, number> = { key: 'test', value: 123 }

let arr: number[] = [1, 2, 3]
let arrTwo: Array<number> = [1, 2, 3]


interface IPlus<T> {
  (a: T, b: T) : T
}
function plus(a: number, b: number): number {
  return a + b;
}
function connect(a: string, b: string): string {
  return a + b
}
const a: IPlus<number> = plus
const b: IPlus<string> = connect

类型别名

type PlusType = (x: number, y: number) => number
function sum(x: number, y: number): number {
  return x + y
}
const sum2: PlusType = sum

type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver): string {
  if (typeof n === 'string') {
    return n
  } else {
    return n()
  }
}

类型断言

// 第一种
function getLength(input: string | number) : number {
  const str = input as String
  if (str.length) {
    return str.length
  } else {
    const number = input as Number
    return number.toString().length
  }
}
// 第二种
function getLength(input: string | number) : number {
  if((<string>input)) {
    return (<string>input).length
  } else {
    return input.toString().length
  }
}

声明文件

https://typescriptlang.org/dt/search

// axios.d.ts
// 它里面没有任何的实际代码，只有类型声明
// 只有类型 - 比如 interface, function 或者 class 等等

interface IAxios {
  (url: string, method: string) : string;
  get: (url: string) => string;
  post: (url: string, data: any) => string;
}
declare const axios: IAxios

export default axios

内置类型

interface IPerson {
  name: string
  age: number
}
let viking: IPerson = { name: 'viking', age: 20 }
// Partial 把接口内所有参数变为可选
type IPartial = Partial<IPerson>
let viking2: IPartial = { name: 'viking' }
// Omit 忽略接口内某个参数
type IOmit = Omit<IPerson, 'name'>
let viking3: IOmit = { age: 20 }

配置文件(tsconfig.json)

{
  "files": ["test.ts", "test.d.ts"],
  "compilerOptions": {
    "outDir": "./output",
    "module": "ESNext",
    "target": "ES5",
    "declaration": true
  }
}