typescript

2018-07-07

TypeScript 初识

TypeScript VS JavaScript

tsVsjs

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言, TypeScript 是 JavaScript 的一个超集

TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。

主要特点：

TypeScript 增加了静态类型、类、模块、接口和类型注解
可以在编译阶段就发现大部分错误

JavaScript 和 TypeScript 的主要差异

TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序

TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展
JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript
TypeScript 通过类型注解提供编译时的静态类型检查
TypeScript 中的数据要求带有明确的类型，JavaScript不要求
TypeScript 为函数提供了缺省参数值
TypeScript 引入了 JavaScript 中没有的“类”概念
TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中

Hello World

$ npm install -g typescript
$ touch hello.ts
$ vim hello.ts
$ tsc hello.ts # 生成hello.js
$ node hello.js

hello.ts

function sayHello(person: string) {
    return 'Hello, ' + person;
}
 
let user = 'Itxing';
console.log(sayHello(user));

基础

数据类型

boolean number string null undefined object 以及ES6新类型

let isDone: boolean = false;

let myAge: number = 18;

let myName: string = 'Itxing';

let sentence: string = `Hello, my name is ${myName}.
I will be ${myAge + 1} years old next month.`;

# JavaScript 没有空值（Void）的概念，在 TypeScirpt 中，可以用 void 表示没有任何返回值的函数
function showMyName(): void {
    console.log('my name is itxing')
}

function getMyName(): string {
    return 'itxing'
}

任意值

1 2	let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7;

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

1
2
3

let something;
something = 'seven';
something = 7;

等价于

1
2
3

let something: any;
something = 'seven';
something = 7;

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论推断出一个类型

1 2	let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; # 报错 Type 'number' is not assignable to type 'string'

事实上，等价于

1 2	let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7; # 报错 Type 'number' is not assignable to type 'string'

联合类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;


function getString(something: string | number): string {
    return something.toString();
}

接口

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

interface Person {
    name: string;
    age: number;
}
let me: Person = {
    name: 'itxing',
    age: 18,
};

可选属性

interface Person {
    name: string;
    age?: number;
}
let me: Person = {
    name: 'itxing',
}
或
let me: Person = {
    name: 'itxing',
    age: 18,
}

任意属性

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let me: Person = {
    name: 'itxing',
    blog: 'https://itxing666.github.io/',
}

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性 age属性类型必须是blog的属性类型

数组

「类型 + 方括号」表示法

1	let list: number[] = [1, 2, 3, 4, 5]

数组泛型

1	let list: Array<number> = [1, 2, 3, 4, 5]

用接口表示数组

interface NumberArray {
    [index: number]: number;
}
let list: NumberArray = [1, 2, 3, 4, 5]

数组中出现

1	let list: any[] = ['itxing', 18, { blog: 'https://itxing666.github.io/' }];

函数

在 JavaScript 中，有两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式（Function Expression）

# 函数声明
function sum(x, y) {
    return x + y;
}

# 函数表达式
let mySum = function (x, y) {
    return x + y;
};

一个函数有输入和输出，要在 TypeScript 中对其进行约束

function sum(x: number, y: number): number {
    return x + y
}

let mySum = function (x: number, y: number): number {
  return x + y;
};

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};

可选参数

function buildName(firstName?: string, lastName: string) {
  if (firstName) {
    return firstName + ' ' + lastName;
  } else {
    return lastName;
  }
}
let myName = buildName('it', 'xing');
或
let myName = buildName('xing');

参数默认值

1
2
3

function buildName(firstName: string, lastName: string = 'Liu') {
  return firstName + ' ' + lastName;
}

重载

允许一个函数接受不同数量或类型的参数时，作出不同的处理

重载是多态的一种实现方式


function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}