一、简介
TypeScript具有类型系统,且是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。Ts主要用于解决那些问题:
- js木有编译类型检查,写代码的时候木有错误,在运行的时候就发现错误一大堆,ts具有类型系统,可以解决此类问题
- js代码非常灵活,同一团队中,大神和小菜鸟写的代码各不相同,维护起来十分不便,统一采用ts开发js,使用相同的规则进行编码,能够比较好的解决此类问题
- js发展十分迅速,存在各种各样的版本和各种环境,在不同的环境中特性存在差异,为了满足各种环境,需要编写各异的代码,js通过制定编译环境可以将同一代码编译成对应环境的js脚本
- js在编译大型项目缺乏良好的模块及文件的组织,需要支持有模块及命名空间的概念,遵循CommonJs的规范,ts支持模块及命名空间,同时支持。
二、环境
1、安装
npm install -g typescript
2、VSC
- tsconfig.json:指定ts编译的一些参数信息
- “compilerOptions”:
Target:编译目标平台(es3,es5,e6,es2015)
Module:组织代码方式(commonjs,amd)
sourceMap:编译文件对应关系
outDir:输出目录 - “include”: 包含的编辑目录
- “exclude”:不包含的编译目录
- “compilerOptions”:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"lib": ["es2015", "es2016", "dom"]
},
"exclude": [
"node_modules",
"dist"
],
"include": [
"./src/**/*"
],
}
类型
- 布尔 (简单的true/false值)
let isTrue:boolean = true;
- 数字
let age:number = 29
let max:number = Number.MAX_VALUE
- 字符串
var word = "hello world"
- 数组(在类型后面直接使用[])
var numbers: number[] = [1, 2, 3];
使用Array泛型
var nums: Array<number> = [1, 2, 3];
- 枚举
enum 类型是对js类型的一个补充,使用枚举类型可以为一组数值选择一个友好的名称
enum Color { red, green, blue }
let sRed: Color: Color.red;
声明
var
最常用的关键字,用来声明对象,例如
var str:string = 'nihao'
function func(str:string):string{
var test:string = 'nihao';
return test;
}
var关键字存在一些弊端:
- 变量可以重复声明
- 变量声明可以滞后
- 没有块级作用域
function func(a){
if(a) {
var x1 = 2;
var x2 = 3;
b = x1+2;
}
return b;
};
console.log(func(true))
console.log(func(false))
let
为了解决 var 关键字的以上弊端,提出了 let关键字,基本用法和var关键字一样,如下:
function func(str:string):string{
let test:string = 'hello';
let test:string = 'hello1';
if(str.length){
let a1 = 1;
}
console.log(a1);
return test;
let a1 = 2;
}
const
定义的变量不可以修改
const demo_1:string = 'hello world';
demo_1 = 'x'; //err
函数
完整函数类型
完整函数类型包含两部分:参数类型和返回值类型
let sayHello:(word:string)=>string = function(word:string):string{
return "say" + word;
}
上诉写法过于复杂,ts提供类型推断,可以简化写法,如下所示
let sayHello = function(word:string):string{
return "say" + word;
}
参数类型
- 默认参数
默认参数可以指定参数默认值,函数调用时可以不用传递默认参数
let sayHello = function(word:string = 'hello world'):string{
return "say" + word;
}
sayHello();
- 可选参数
可选参数在参数后用 ? 来表示,可选参数只能在必须参数后
let sayHello = function(word?:string):string{
return "say" + word;
}
sayHello();
- 剩余参数
剩余参数表示不知道传递多个类型相同的参数可以使用,剩余参数只能用类型数组来表示,并在参数前加上省略号,剩余参数只能是最后一个参数
let sayHello = function(...words:string[]):string{
return "say" + words.join(' ');
}
sayHello();
Lambda和this
看如下所示的代码,调用out函数的this 对象被指定为全局变量导致调用失败
var obj = {
name: 'chuck',
say: function(){
return function(){
console.log(this.name);
}
}
}
var out = obj.say();
out();
在ts中,函数表达式变为使用lambda表达式( () => {} ),这样就会在函数创建的时候就指定’this’值
var obj = {
name: 'chuck',
say: function(word:string){
return (x:number) => {
console.log(this.name + world);
console.log(x)
}
}
}
var out = obj.say('1');
out(2);
编辑后的结果如下:
var obj = {
name: 'chuck',
say: function(word){
var _this = this;
return function(x){
console.log(_this.name + world);
console.log(x);
}
}
}
var out = obj.say('1');
out(2);
类
结构
ts中类的基本结构如图所示,在ts里,每个成员默认为public的,也存在 private 及 protected,private只能在自身类可用,protected可在继承类中使用
class Dog{
constructor(name:string="大黄"){
this.name = name;
}
name:string;
private age:number = 3;
protected sex:string = 'rose';
say(word:string):string{
return this.name + 'say' + word
}
}
let a:Dog = new Dog();
a.say('dog');
抽象类
抽象类使用abstract关键字来定义抽象类和在抽象类内部定义抽象方法,抽象类只能用派生类实例化,抽象方法必须在派生类中实现
abstract class animal{
abstract say(word:string):string;
move(steps:number):void{
console.log(steps);
}
}
继承
abstract class animal{
abstract say(word:string):string;
move(steps:number):void{
console.log(steps);
}
}
class Dog extends animal{
constructor(name:string='大黄'){
super();
this.name = name;
}
name:string;
private age:number = 3;
protected sex:string = 'rose';
say(word:string):string{
return this.name + 'say' + word;
};
move():void{
conosle.log('void');
}
}
let a:Dog = new Dog();
a.say('dog');
a.move();
面向对象最基本的模式就是对类型进行继承扩展,如上所示,Dog继承了抽象类animal,实现了抽象方法say,并重写了父类中的move方法
静态成员
类的静态成员,这些属性存在于类本身上面而不是类的实例上
class Utils{
static source:number = 0;
static log(logs:string):void{
console.log(logs);
}
}
let s = Utils.source;
Utils.log('error');
接口
结构
与C#或Java里接口的基本作用一样,ts也能够用它来明确的强制一个类去符合某种契约。如下所示,Squre类实现Shape接口。
interface Shape{
eara():number;
}
class Squre implements Shape{
width:number;
constructor(width:number){
this.width = width;
}
eara():number{
return this.width*this.width;
}
}
var sq.Shape = new Squre(5);
sq.eara();
继承
接口可以继承多个接口,使用extends关键字来继承多个接口,如下所示
interface Shape{
eara():number;
}
interface Type{
type:string;
}
interface Circle extends Shape,Type{
}
泛型
ts像C#和Java,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,ts中使用(<>)括起泛型类型
abstract class AbstractContext {
BizType: string;
}
class PoContext extends AbstractContext {
BizType: string = 'Po';
}
interface OperationInterface<T extends AbstractContext> {
getContext(): T;
}
class AbstractOperation<T extends AbstractContext> {
Context: T;
OpCode: string;
constructor(opCode: string, Context: T) {
this.OpCode = OpCode;
this.Context = Context;
}
}
class PoOperation extends AbstractOperation<PoContext> implements OperationInterface<PoContext> {
constructor(OpCode: string, Context: PoContext) {
super(OpCode, Context);
}
getContext(): PoContext {
return: this.Context;
}
}
模块
为了开发大型的代码程序,模块化是必须经历的一个过程。ts组织代码的方式主要包括内部使用的命名空间和外部使用的模块。
命名空间
当代码变得复杂的时候,要一种手段来组织代码,以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突,这时候我们使用命名空间。命名空间内的代码只在命名空间内才是可见的,对外部不可见。
namespace framework{
class Utils {
static isNullOrEmpty(input:string):boolean{
if(!input) {
return true;
}
return false;
}
}
}
console.log(framework.Utils.isNullOrEmpty('')); //err
外部模块
模块在其自身的作用域里执行,在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之一。
模块是自声明的;两个模块之间的关系是通过在文件级别上使用imports和exports建立的。
任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出。
export let num:number = 2;
export interface demo {
}
class Utils {
static isNullOrEmpty(input:string):boolean {
if (!input) {
return true;
}
return false;
}
}
export { Utils }
可以使用以下import形式之一来导入其他模块中的导出内容。
- 导入一个模块中的某个导出内容
import { Utils } from './test';
import { Utils as DemoUtils } from './test';
- 将这个模块导入到一个变量,并通过它来访问模块的导出部分
import * as demo from './test';
CommonJS和AMD都有一个exports对象的概念,它包含了一个模块的所有导出内容。ts模块支持export =语法,以配合传统的CommonJS和AMD的工作流。
export =语法定义一个模块的导出对象。它可以是类,接口,命名空间,函数或枚举。
若要导入一个使用了export =的模块时,必须使用TypeScript提供的特定语法import let = require(“module”)。