快速上手
本文档是为了当前端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); } } }
未完待续。。。