TypeScript入门，使用TypeScript编写第三方控件的方式！

这是一篇新手篇的typescript插件编写方式！！！！

源码完整地址：https://gitee.com/dissucc/typescriptLearn

1.环境安装

node下载

cnpm安装

在安装完node后，npm默认就安装了，因为某种原因，npm下载组件包的速度太慢了，所以需要安装cnpm

安装命令

 npm install -g cnpm --registry=https://registry.npm.taobao.org

推荐使用Vs Code开发

2.开发前的准备工作

a.新建一个文件夹，然后在vs code 中打开

ctrl+~唤起终端

输入

npm install -g typescript

然后建一个基本的环境

好了，大概就是这个结构，我们今天要实现的就是一个带额外提示的输入框

效果图如下

3.咱们开始吧！

首先，我们要写的是一个基于AMD规范的插件，所以页面代码先这个样子

<!DOCTYPE html>

<html>

<head>

    <title>TypeScript Greeter</title>

    <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

</head>

<body>

    <div class="box"></div>

</body>

<script>

</script>

</html>

先将requirejs引用到页面

添加2个帮助类到项目里

element.ts

import _ from './unit';

export default class mElement {

    tagName: string;

    props: any;

    children: any;

    key: any;

    count: number;

    constructor(tagName: string, props: any, children: any[]) {

        if (!(this instanceof mElement)) {

            if (!_.isArray(children) && children != null) {

                children = _.slice(arguments, 2).filter(_.truthy)

            }

            return new mElement(tagName, props, children)

        }

        if (_.isArray(props)) {

            children = props

            props = {}

        }

        this.tagName = tagName

        this.props = props || {}

        this.children = children || []

        this.key = props

            ? props.key

            : void 666

        var count = 0

        _.each(this.children, function (child, i) {

            if (child instanceof mElement) {

                count += child.count

            } else {

                children[i] = '' + child

            }

            count++

        })

        this.count = count

    }

    render = function () {

        var el = document.createElement(this.tagName)

        var props = this.props

        for (var propName in props) {

            var propValue = props[propName]

            _.setAttr(el, propName, propValue)

        }

        _.each(this.children, function (child) {

            var childEl = (child instanceof mElement)

                ? child.render()

                : document.createTextNode(child)

            el.appendChild(childEl)

        })

        return el

    }

}

unit.ts

let _ = {

    type: function (obj) {

        return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '')

    },

    isArray: function (list) {

        return this.type(list) === 'Array'

    },

    slice: function (arrayLike, index) {

        return Array.prototype.slice.call(arrayLike, index)

    },

    truthy: function (value) {

        return !!value

    },

    isString: function (list) {

        return this.type(list) === 'String'

    },

    each: function (array, fn) {

        for (var i = 0, len = array.length; i < len; i++) {

            fn(array[i], i)

        }

    },

    toArray: function (listLike: any[]) {

        if (!listLike) {

            return []

        }

        let list: any = []

        for (var i = 0, len = listLike.length; i < len; i++) {

            list.push(listLike[i])

        }

        return list

    },

    setAttr: function (node, key, value) {

        switch (key) {

            case 'style':

                node.style.cssText = value

                break

            case 'value':

                var tagName = node.tagName || ''

                tagName = tagName.toLowerCase()

                if (

                    tagName === 'input' || tagName === 'textarea'

                ) {

                    node.value = value

                } else {

                    // if it is not a input or textarea, use `setAttribute` to set

                    node.setAttribute(key, value)

                }

                break

            default:

                node.setAttribute(key, value)

                break

        }

    }

}

export default _;

看一下最终的项目结构

准备工作完成，开始编写

input.ts

///input

export class Input <T extends InputOption>{

    private thatOption: T;

    //构造函数

    constructor(inputOption: T) {

        this.thatOption = inputOption;

    }

    //渲染方法

    render(ele) {

        console.log(this.thatOption)

    }

}

///配置项的接口

export interface InputOption {

    label?: string,

    placeholder?: string,

    extra?: string,

    value?: string

}

先将配置项输出出来看看，有没有问题！

XxxUI.ts

import { Input } from './base/input'

let XxxUI = {

    Input: (option) => {

        return new Input(option);

    }

}

export default XxxUI;

index.html ->script

<script>

    require(['XXXUI/XxxUI'], function (XxxUI) {

        var core = XxxUI.default;

        var input = core.Input({

            label: '测试',

            placeholder: '测试',

            extra: '测试',

            value: '1'

        });

        var box = document.querySelector(".box");

        input.render(box);

    })

</script>

编译一下代码

tsc src/XXXUI/XxxUI.ts -m amd

然后直接打开页面看看是否有输出

成功啦！开始写东西，哈哈哈哈

插件最后生成的结构差不多是这个样子的

 <div class='xui-input'>

    <label>测试</label>

    <input type="text"></input>

    <span>附加信息</span>

 </div>

先建一个文件，将创建DOM的操作封装一层，要不然每次都要实例化，很麻烦

core.ts

import mElement from './element';

let ele: object;

export function create(tagName: string, props: any, children: any[]) {

    ele = new mElement(tagName, props, children);

    return ele;

}

然后修改我们的

input.ts

import { create } from './core';

///input

export class Input<T extends InputOption>{

    private thatOption: T;

    //构造函数

    constructor(inputOption: T) {

        this.thatOption = inputOption;

    }

    //渲染方法

    render(ele) {

        console.log(this.thatOption)

        const { label, placeholder, extra, value, click } = this.thatOption;

        const dom: any = create('div', { class: 'xui-input' }, [

            create('label', { type: 'text', onclick: click }, [label]),

            create('input', { placeholder, value }, undefined),

            create('span', undefined, [extra])

        ]);

        ele.appendChild(dom.render());

    }

}

///配置项的接口

export interface InputOption {

    label?: string,

    placeholder?: string,

    extra?: string,

    value?: string,

    click: string

}

这里演示了一下如何简单的绑定事件！当然，你也可以换自己的写法

index.html

<!DOCTYPE html>

<html>

<head>

    <title>TypeScript Greeter</title>

    <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

</head>

<body>

    <div class="box">

    </div>

</body>

<script>

    function onclicktest() {

        console.log(1);

    }

    require(['XXXUI/XxxUI'], function (XxxUI) {

        var core = XxxUI.default;

        var input = core.Input({

            label: '测试',

            placeholder: '测试',

            extra: '测试',

            value: '1',

            click: 'onclicktest()'

        });

        var box = document.querySelector(".box");

        input.render(box);

    })

</script>

</html>

看看页面上的显示

嗯，搞定了，这篇文章就这样啦！

样式什么的，我就不写了，偷个懒偷个懒

是不是很简单？快去写个插件，封装好，给自己使用吧！！！！！！！！！！！！

源码地址：https://gitee.com/dissucc/typescriptLearn