TypeScript 基础语法

快速上手

本文档是为了当前端JS开发同事快速适应TS开发所准备的。因此，列举了一些常用的语法规则，便于工作中进行开发提高效率。学习TS主要有以下几大模块：

目录结构

用 [TOC]来生成目录：

---

基础类型

名称	key
布尔值	boolean
数字类型	number
字符串	string
数组类型	Array
枚举	enum
任意类型	any
类型断言

• 布尔值 let baseType: boolean = false;
• 数字类型 let baseType: number = 123456;
• 字符串 let baseType:string = 'string';
• 数组类型 let baseType:Array<number> = [1,2,3];

• 枚举

  
    enum Color { Red = 1,Green = 2,Blue = 4};
    let baseType:Color = Color.Red

• 任意类型

  
  let baseType: any = 1;
  baseType = 'a string'; // string
  baseType = false // boolean

• 类型断言

  
  let baseType: any = 'a string value';
  let str_length: number = (<string>baseType).length; // 断言进行类型检查

变量声明

>

• let

  
      let variable = 'Hello!';

• var

  
      var variable = 'Hello!';

• const

  
      const variable = 'Hello!';

• 对象解构

  
      let obj = {
          a: 'foo',
          b: 123,
          c: 'b00'
  }
  let {a,b} = obj; // 即：({a,b} = {a:'foo',b:123,c:'b00'});

• 函数声明

  
      type C = {a:string,b:number};
      function func ({a,b} = {a:'', b: 0}):void {
          // ...
      }
      func();  // 默认值： a === '', b  === 0

类

类的声明：

    class Greeter {
        greeting: string; // 内部属性
        constructor(message: string) {  // 构造函数
            this.greeting = message;
        }
        greet() { // 内部方法
            return 'Hello, ' + this.greeting;    
    }
   }
   let greeter = new Greeter('World');

类的继承：

    class Animal{
        name: string;
        constructor(value: string) {
            this.name = value;
        }
        greet(distance: number = 0) {
            return  `Hello, ${this.name} move ${distance}`;     // es6 语法
        }
   }
   class People extends Animal {
        construct(name: string) { 
            super(name);
        }
        greet(distance: number = 5) {
            super.greet(distance);
     }
   }
   let greeter = new Greeter('Cat');
   greeter.greet() // Hello, Cat move 0
   greeter.greet(34) // Hello, Cat move 34

类的修饰符：
static, privite、readonly、（默认）、protected、public

  // 默认公有
    class Greeter {
        static origin = {x: 0, y:0}; // 静态属性
        private greeting: string; // 私有属性
        readonly name: string = 'onlyread'; // 只读属性
        constructor(message: string) {  // 默认公有
            this.greeting = message;
        }
        protected greet() { // 受保护
            return 'Hello, ' + this.greeting;    
        }
        public speed() { // 公有方法
            console.log('Test');
        }
   }
   let greeter = new Greeter('World');

get、set方法：

  // 默认公有
    class Greeter {
        name: string = 'read';
        constructor(message: string = '') {  // 默认公有
            this.name = message;
        }
        set greet(value) { // set
            this.name = value; 
        }
        get speed() { // get
            return this.name;
        }
   }
   let greeter = new Greeter();
   greeter.set('Cat');
   greeter.get(); // Cat

函数

es6 函数写法：

    function func(x: number, y: number) {
        return x + y;
    }
    // 等价于：
    let func=  function(x: number, y: number):number{
        return x + y;
    } 
    //

模块

导出声明

export const num = 123;  // 导出常量
export class Animal { // 导出类
    speed(value: number) {
        return value;
    }
    export * from './baseClass'; // 导出整个模块
}

导入声明

    import {simpleModule as other} from './baseClass'; // 导入新模块，并重命名
    let obj = new other(); 
    // 整体导入
    import * from './baseClass';    

import 和 require
export 和 exports

命名空间

    namespace Validation {
    const numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

未完待续。。。