typescript语法入门

 一、字符串

    1.多行字符串： (支持换行)

        `

            <div></div>

            <p></p>

        `

    2.表达式：${} --> 变量

        var a = 'david';

        var b = function(){return 'world'};

        console.log( `hello ${a}` )   --> hello david

        console.log( `hello ${b()}` ) --> hello world

    3.自动拆分字符串：

        function fn(template, name, age){

            console.log( template )

            console.log( name )

            console.log( age )

        }

        var a = 'david';

        var b = 23;

        fn`hello my name ${a}, i'm ${b}`;

        -->会输出：

            数组['hello my name ',', i'm ','']，

            david，

            23

二、参数新特性

    1.指定类型：

        Ⅰ.指定某种类型：

            var a: number = 10;

        Ⅱ.指定所有类型：

            var b: any = 10;

        Ⅲ.默认会指定为'number'类型(不声明时)：

            var c = 10;

        Ⅳ.函数没有返回值：

            function(x: string,y: number) :void{}

        Ⅴ.自定义类型：

            class Person{

                name: string;    【结尾为分号,或者不填】

                age: number;

            }

            var wenwen: Person = new Person();

            wenwen.name = 'david';

            wenwen.age = 23;

            //name,age会限定类型

    2.指定默认值：

        function(x,y: number = 1){} --> 没有传入y值时，使用默认值：1

    3.可选参数：[参数后面加?]

        function(x, y?: number = 1){}

三、函数新特性

    1.Rest and Spread操作符：[声明传入任意数量的方法参数]

        function add(...args){}

    1-2.【*ts不支持】反用：

        function add(a, b, c){

            console.log( a,b,c )

        }

        var a1 = [1,2];

        var a2 = [1,2,3,4]

        add(...a1)  // 1,2,undefined

        add(...a2)  // 1,2,3

    2.generator函数：[控制函数的执行过程，手工暂停和恢复代码执行]

        function* add(){

            console.log( 'start' );

            yield;

            console.log( 'end )

        }

        var a = add();

        a.next();

        // start

        a.next();

        // start end

    3.析构表达式：[通过表达式将对象或数组拆解成任意数量的变量]

        Ⅰ、对象：

            function add(){

                return {

                    code: 'ibm',

                    price: {

                        price1: 100,

                        price2: 200

                    }

                }

            }

            var {code, price: {price1}} = add();    --> 可访问变量：code,price1

        Ⅱ、数组：

            var arr = [1,2,3,4,5]

            var [a,,b,..c] = arr;                   --> a=1;b=3;c=[4,5]

四、表达式和循环

    1.箭头表达式：

        -无参数：() => {};

        -一参数：(a) => {}; || a => {}

        -多参数：(a,b) => {};

        *a => a;返回值只有一句，不需要{}

        *{}中是返回值

    2. for...of 循环：

        obj.forEach();  -->循环值，不能被打断

        for...in        -->循环键，可以被打断

        for...of        -->循环值，可以被打断

五、面向对象特性

    1.类：

        Ⅰ、声明

            1).访问控制符：

                * public[默认]  共有

                * private       私有(类的内部可以访问)

                * protected     私有(类的内部和子类可以访问)

        Ⅱ、类的构造函数(constructor)：只有类被实例化时调用，且只执行一次

            class Person {

                constructor(public name) {   //public声明

                    this.name = name;

                }

                eat() {

                    console.log( this.name )

                }

            }

            var son1 = new Person('son1');

            son1.eat();   --> // son1

        Ⅲ、继承  [extends继承，super在子类中指向父类]

          //*父类

            class Person {

                constructor(public name: string) {

                    console.log('haha');

                }

                eat() {

                    console.log('eating...');

                }

            }

          //*子类

            class Employee extends Person{

                constructor (public name: string, id: number) {

                    super(name);            //*必须要在子类中调用一次父类

                    console.log('xixi');

                }

                work() {

                    super.eat();

                    this.doWork();

                }

                private doWork() {

                    console.log('do work')

                }

            }

          //*类的实例

            var el = new Employee('David', 1);

            el.work();

            --> 输出：

                haha | xixi | eating... | do work

    2.泛型：参数化的类型，一般用来限制集合的内容   [数组内的值只能是 Person或者Person的子类或者实例]

        *接着上一个‘继承’的例子写：

            var workers: Array<Person> = [];

            workers[0] = new Person('David1');

            workers[1] = new Employee('David2', 1);

    3.接口：用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。

        Ⅰ、interface 作为属性的类型

            interface IPerson{

                name: string;

                age: number;

                add();

            }

            class Person {

                constructor(public config: IPerson) {}

            }

            var p = new Person({              //必须写入 name,age属性且类型正确

                name: 'david',

                age: 1,

                add(){}

            });

        Ⅱ、implements 作为类的类型

            interface Animal{

                eat();

                name: string;

            }

            class Person implements Animal{

                eat() {};                    //必须要写eat方法

                name;                        //必须要写name属性

            }

    4.模块：

        export 暴漏方法|属性|类

            export var a = 1;

            export var b = () => {};

            export class c {};

        import {a,b,c} from 'xxx'

    5.注解：为程序的元素(类，、方法、变量)加上更直观明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。

        告诉框架或者工具，如何使用。

        @Component声明注解

    6.类型定义文件：类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包，如JQuery

      类型定义文件  *.d.ts

      npm install -g typings
巴特西

typescript语法入门

最新文章

热门文章
