TypeScript 简介

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了TypeScript 简介，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路 - 153742079 (群名称规则：城市 + 昵称)。

TypeScript 是什么

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

安装 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,3];   

let list: Array<number> = [1,3]; 
// tsc => var list = [1,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：

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

=> tsc =>  

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

需要注意的是，声明一个 void 类型的变量没有什么作用，因为它的值只能为 undefined 或 null：

let unusable: void = undefined;

Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string 和 number 类型的元组。

let x: [string,number];

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

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

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

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

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

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

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

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

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

TypeScript Assertion

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

通过类型断言这种方式可以告诉编译器，"相信我，我知道自己在干什么"。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

类型断言有两种形式：

  • "尖括号"语法

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@H_502_129@ No types@H_502_129@
Arrow function@H_502_129@ Arrow function (ES2015)@H_502_129@
Function types@H_502_129@ No Function types@H_502_129@
required and Optional parameters@H_502_129@ All parameters are optional@H_502_129@
Default parameters@H_502_129@ Default parameters@H_502_129@
Rest parameters@H_502_129@ Rest parameters@H_502_129@
Overloaded function@H_502_129@ No overloaded functions@H_502_129@

箭头函数

  • 常见语法

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

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

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

myBooks.forEach((title,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',id: number): string {
    return name + id;
}

剩余参数

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

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

TypeScript Array

数组解构

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

数组展开运算符

let two_array = [0,1];
let five_array = [...two_array,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 关系。

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

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 - 表示编译器将检测没有使用的变量或参数

猜你在找的Angularjs相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作