TypeScript 简介

时间  2019-11-05 标签 typescript 简介

建了个群有兴趣的朋友能够加一下 QQ 群：Angular 修仙之路(1)群 - 153742079 (已满)，请加 Angular 修仙之路(2)群 - 648681235。html

TypeScript 是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，并且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript 扩展了 JavaScript 的句法，因此任何现有的 JavaScript 程序能够不加改变的在 TypeScript 下工做。TypeScript 是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。node

typescript-and-es-feature

安装 TypeScript

$ npm install -g typescript

编译 TypeScript 文件

$ tsc app.ts # app.ts => app.js

TypeScript 数据类型

Boolean 类型

let isDone: boolean = false; // tsc => var isDone = false;

Number 类型

let count: number = 10;  // tsc => var count = 10

String 类型

let name: string = 'Semliker'; // tsc => var name = 'Semlinker'

Array 类型

let list: number[] = [1,2,3]; // tsc => var list = [1,2,3];   

let list: Array<number> = [1,2,3]; 
// tsc => var list = [1,2,3];

Enum 类型

enum Direction {
    NORTH，
    SOUTH，
    EAST，
    WEST
}; 

let dir: Direction = Direction.NORTH;

Any (动态类型)

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; 

=> tsc =>  

var notSure = 4;
notSure = "maybe a string instead";
notSure = false;

Void

某种程度上来讲，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你一般会见到其返回值类型是 void：react

// 声明函数返回值为void
function warnUser(): void { 
    console.log("This is my warning message");
}

=> tsc =>  

function warnUser() {
    console.log("This is my warning message");
}

须要注意的是，声明一个 void 类型的变量没有什么做用，由于它的值只能为 undefined 或 null：typescript

let unusable: void = undefined;

Tuple

元组类型容许表示一个已知元素数量和类型的数组，各元素的类型没必要相同。好比，你能够定义一对值分别为 string 和 number 类型的元组。shell

let x: [string, number];

x = ['semlinker', 10]; // 正常赋值

x = [10, 'semlinker']; // 类型不匹配

当访问一个已知索引的元素，会获得正确的类型：express

console.log(x[0].substr(1)); // OK

// Error, 'number' does not have 'substr' method
console.log(x[1].substr(1));

当访问一个越界的元素，会使用联合类型替代：npm

x[3] = 'world'; // OK, 字符串能够赋值给(string | number) 类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString 方法

x[6] = true; // Error, 布尔不是(string | number) 类型

TypeScript Assertion

有时候你会遇到这样的状况，你会比 TypeScript 更了解某个值的详细信息。一般这会发生在你清楚地知道一个实体具备比它现有类型更确切的类型。编程

经过类型断言这种方式能够告诉编译器，"相信我，我知道本身在干什么"。类型断言比如其余语言里的类型转换，可是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起做用。json

类型断言有两种形式：数组

  • "尖括号"语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

  • as 语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript Union Types and Type Aliases

Union Types

let greet = (message: string | string[]) => {
  if(message instanceof Array) {
    let messages = "";
    message.forEach((msg) => {
      messages += ` ${msg}`;
    });
    console.log("Received messages ", messages);
  } else {
    console.log("Received message = ", message);
  }
};

greet('semlinker');
greet(['Hello', 'Angular']);

Type Aliases

type Message = string | string[];
let greet = (message: Message) => { 
  // ... 
};

TypeScript Function

TypeScript 函数与 JavaScript 函数的区别

TypeScript JavaScript
Types No types
Arrow function Arrow function (ES2015)
Function types No Function types
Required and Optional parameters All parameters are optional
Default parameters Default parameters
Rest parameters Rest parameters
Overloaded function No overloaded functions

箭头函数

  • 常见语法

myBooks.forEach(() => console.log('Done reading'));

myBooks.forEach(title => console.log(title));

myBooks.forEach((title, idx, arr) => 
  console.log(idx + '-' + title);
);

myBooks.forEach((title, idx, arr) => {
  console.log(idx + '-' + title);
});

  • 使用示例

// 未使用箭头函数
function Book() {
  let self = this;
  self.publishDate = 2016;
  setInterval(function() {
    console.log(self.publishDate);
  }, 1000);
}

// 使用箭头函数
function Book() {
  this.publishDate = 2016;
  setInterval(() => {
    console.log(this.publishDate);
  }, 1000);
}

参数类型和返回类型

function createUserId(name: string, id: number): string {
  return name + id;
}

函数类型

let IdGenerator: (chars: string, nums: number) => string;

function createUserId(name: string, id: number): string {
  return name + id;
}

IdGenerator = createUserId;

可选参数及默认参数

// 可选参数
function createUserId(name: string, age?: number, 
  id: number): string {
    return name + id;
}

// 默认参数
function createUserId(name: string = 'Semlinker', age?: number, 
  id: number): string {
    return name + id;
}

剩余参数

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

TypeScript Array

数组解构

let x: number, let y: number ,let z: number;
let five_array = [0,1,2,3,4];
[x,y,z] = five_array;

数组展开运算符

let two_array = [0,1];
let five_array = [...two_array,2,3,4];

数组循环

let colors: string[] = ["red", "green", "blue"];
for(let i in colors) {
  console.log(i);
}

TypeScript Object

对象解构

let person = {
  name: 'Semlinker',
  gender: 'male'
};

let {name, gender} = person;

对象展开运算符

let person = {
  name: 'Semlinker',
  gender: 'male',
  address: 'Xiamen'
};

// 组装对象
let personWithAge = {...person, age: 31};

// 获取除了某些项外的其它项
let {name, ...rest} = person;

TypeScript Interface

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动须要由类（classes）去实现（implements）。

TypeScript 中的接口是一个很是灵活的概念，除了可用于对类的一部分行为进行抽象之外，也经常使用于对「对象的形状（Shape）」进行描述。

对象的形状

interface Person {
  name: string;
  age: number;
}

let semlinker: Person = {
  name: 'Semlinker',
  age: 31
};

可选 | 只读属性

interface Person {
  readonly name: string;
  age?: number;
}

TypeScript Class

在面向对象语言中，类是一种面向对象计算机编程语言的构造，是建立对象的蓝图，描述了所建立的对象共同的属性和方法。

在 TypeScript 中，咱们能够经过 Class 关键字来定义一个类：

class Greeter {
   static cname: string = 'Greeter'; // 静态属性
   greeting: string; // 成员属行

   constructor(message: string) { // 构造函数 - 执行初始化操做
     this.greeting = message;
   }

    static getClassName() { // 静态方法
      return 'Class name is Greeter';
    }
    
    greet() { // 成员方法
      return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

TypeScript Accessors

在 TypeScript 中，咱们能够经过 getter 和 setter 方法来实现数据的封装和有效性校验，防止出现异常数据。

let passcode = "hello angular 5";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "hello angular 5") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

TypeScript Inheritance

继承 (Inheritance) 是一种联结类与类的层次模型。指的是一个类 (称为子类、子接口) 继承另外的一个类 (称为父类、父接口) 的功能，并能够增长它本身的新功能的能力，继承是类与类或者接口与接口之间最多见的关系；继承是一种 is-a 关系。

class-inheritance

在 TypeScripe 中，咱们能够经过 extends 关键字来实现继承：

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
sam.move();

TypeScript Generics

泛型（Generics）是容许同一个函数接受不一样类型参数的一种模板。相比于使用 any 类型，使用泛型来建立可复用的组件要更好，由于泛型会保留参数类型。

泛型接口

interface GenericIdentityFn<T> {
    (arg: T): T;
}

泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

使用示例

interface Hero { // Hero 接口
    id: number;
    name: string;
}

getHeroes(): Observable<Hero[]> {
  return Observable.of([
     { id: 1, name: 'Windstorm' },
     { id: 13, name: 'Bombasto' },
     { id: 15, name: 'Magneta' },
     { id: 20, name: 'Tornado' }
  ]);
}

上面 getHeroes(): Observable<Hero[]> 表示调用 getHeroes() 方法后返回的是一个 Observable 对象，<Hero[]> 用于表示该 Observable 对象的观察者，将会收到的数据类型。示例中表示将会返回 <Hero[]> 英雄列表。

tsconfig.json 简介

tsconfig.json 的做用

  • 用于标识 TypeScript 项目的根路径

  • 用于配置 TypeScript 编译器

  • 用于指定编译的文件

tsconfig.json 重要字段

  • files - 设置要编译的文件的名称

  • include - 设置须要进行编译的文件，支持路径模式匹配

  • exclude - 设置无需进行编译的文件，支持路径模式匹配

  • compilerOptions - 设置与编译流程相关的选项

tsconfig.json - compilerOptions

字段 说明
target Desired ECMAScript version (es3,es5,es2015,es2016,es2017, or esNext)
rootDir Root directory of input files
listFiles Print file names processed by the compiler
outDir Directory to contain compiled results
outFile File to contain concatenated results
watch Watch input files
removeComments Remove comments from generated output
noLib Don't include the main library, lib.d.ts, in the compilation process
alwaysStrict Specifies whether strict mode should be enabled
noEmitOnError Don't generate output if any errors were encounted
noImplicitThis Raise an error on this expressions with implied any type
noUnuseLocals Report errors on unused parameters
noImplicitAny Print a warning for every variable that isn't explicitly declared
suppressImplicit Any IndexErrors Suppress Implicit AnyIndexError
skipLibCheck Suppress type checking of declarations files
experimental Decorators Enable support for ES7 decorators
declaration Generate declaration file(*.d.ts) for the TypeScript code
declarationDir Place declaration files in the given directory
module The formate of the generated module (commonjs, amd, system, umd, or es2015)
noEmitHelpers Do not insert custom helper functions in generated output
emitDecoratorMetadata Insert metadata for TypeScript decorations
isolatedModule Always insert imports for unresolved files
jsx Generate JSC code (preserve or react)
moduleResolution Strategy for resolving module (node or classic)

tsconfig.json 示例

{
  "files": ["src/app/app.ts"],
  "compilerOptions": {
    "target": "es5",
    "removeComments": true,
    "alwaysStrict": true,
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

  • alwaysStrict - ES 5 代码将在严格模式下执行

  • noEmitOnError - 表示当发生错误的时候，编译器不要生成 JavaScript 代码

  • noUnusedLocals 和 noUnusedParameters - 表示编译器将检测没有使用的变量或参数

联系我们 沪ICP备2021010478号-7