[react+ts打造组件库项目】1.typescript的学习

null和underfined的区别？

类型

let isDone: boolean = false

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

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

let u: undefined = undefined
let n: null = null

let num:any = undefined

let notSure: any = 4
notSure = 'maybe it is a string'
notSure = true

notSure.myName
notSure.getName()

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

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

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

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

Interface接口

• 对对象形状（shape）进行描述
• 对类（class）进行抽象
• Duck Typing（鸭子类型）

interface Person {
  readonly id: number;
  //只读属性，只能赋值一次。readonly用在属性上面，const用在变量上面
  name: string;
  age?: number;
  //加？代表是可选属性
}
let viking: Person = {
  id: 1234,
  name: 'viking',
}

函数

// 函数声明
//可选参数只能放在后面，可以加上默认值
// function add(x: number, y: number, z: number = 10): number {
//   if (typeof z === 'number') {
//     return x + y + z
//   } else {
//     return x + y
//   }
// }

// let result = add(2, 3, 5)

//函数表达式写法
const add = function(x: number, y: number, z: number = 10): number {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}

const add2: (x: number, y: number, z?: number) => number = add

枚举

//枚举后可以获取对应值；枚举后还可以看成数组获取对应值，赋值初值之后还能够自动递增
//使用常量枚举会提升性能
const enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
  console.log('go up!')
}

泛型

//第一部分：可以把泛型看作占位符，动态的去填所需要的值
function echo<T>(arg: T): T {
  return arg
}

const result = echo(true)

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
}
//只要包含length这个属性就行
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())

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 aliases
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()
  }
}

类型断言

// type assertion

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
  // }
  if((<string>input).length) {
    return (<string>input).length
  } else {
    return input.toString().length
  }
}

声明文件

采用d.ts这种格式

//他里面没有任何的实际的实现代码，只有类型声明
//只有类型：比如interface，function或者class等等
declare function axios(url:string):string

去官网上去搜索对应的类型文件

配置文件

tsconfig.json

{
"files":["test.ts","test.d.ts"],
"compilerOptions":{
"outDir":"./output",//编译出来的js会放到output文件夹中去
"module":"ESnext",//输出怎样的模块类型
"target"："ES3",//符合怎样的es类型
"declaration":"true"//都会生成.d.ts文件


}