实现一个react 组件库才 1.学习ts

ts 学习

安装ts解析器

npm install typescript -g

第一次编译的时候会报错

tsc : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运
行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execu 
tion_Policies。

执行

 set-ExecutionPolicy RemoteSigned 

回车即可

初体验

const hello = (name: string) => {
  return `hello ${name}`;
};

//指定name必须是字符串  静态检查，编译的时候会报错,生成的js文件并没有太多问题

console.log(hello(1));      //hello.ts:7:19 - error TS2345: Argument of type '1' is not assignable to parameter of type 'string'.

数据类型

// ts基础类型
let isDone: boolean = false;
let age: number = 20;
let firstName: string = "viking";
let message: string = `hello ${firstName},age is ${age}`;

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

let num: number = undefined;

//any类型 允许使用各种类型
let notSure:any = 4
notSure = 'maybe it is a string'
notSure = true

notSure.myName      //申明一个为any之后，他的方法和属性都是any
notSure.getName()   //对整个属性和方法没有ide提示了

//联合类型，允许出现的类型
let numberString :number | string = 234
numberString = 234
numberString = 'abc'

class类

class Aniaml {
    name:string;
    constructor(name:string) {
        this.name = name
    }
    run() {
        return `${this.name} is running`
    }
}

const snake = new Aniaml('lily')
console.log(snake.run())

安装ts-node

 npm install -g ts-node

ts-node class.ts

枚举 enum

enum Direction {
    Up,
    Down,
    Left,
    Right
}

console.log(Direction.Up)       //0
console.log(Direction[0])       //Up

const enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT',
}       // 常量枚举
const value = 'UP'
console.log(Direction[0])
if (value === Direction.Up) {
    console.log('gogogo')
}

泛型 generics

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 result1 = swap(['string', 111])

泛型约束

function echoWithArr<T>(arg: T[]): T[] {
    console.log(arg.length)
    return arg
}

const arrs = echoWithArr([1, 2, 3])

interface IWithLength {
    length: number
}

function echoWithArrLength<T extends IWithLength>(arg: T): T {
    console.log(arg.length)
    return arg
}

const str = echoWithArrLength([123, 4])
const str1 = echoWithArrLength('sdasd')
const str2 = echoWithArrLength({ length: 10, name: 10 })

泛型在其他类型中使用

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(2)
queue.push(3)

const queue2 = new Queue<string>()
queue2.push('str')
queue2.push('123')
queue2.push('sd32')


interface KeyPair<T,U> {
    key:T;
    value:U
}

let kp1 : KeyPair<number,string> = {
    key:123,
    value:'str'
}

let kp2 : KeyPair<string,number> = {
    key:'23232',
    value:123123
}

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 sum1:(x:number,y:number)=>number = sum
const sum1: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
    }
}