TypeScript 基础

原始数据类型在 typescript 的应用

原始数据类型包括：布尔值、数值、字符串、null、undefined

let isDone: boolean = false;
// new Boolean(1)是一个对象不是布尔值
let createByNewBoolean: boolean = new Boolean(1);
// Boolean是一个布尔值
let createBoolean: boolean = Boolean(1);

// 下面的数值都是number类型
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

// 下面都是字符串类型
let myName: string = 'Tom';
let myAge: number = 25;

// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

// undefined与void的区别是：undefined和null是所有基础类型的子类型，可以赋给number、string等基础类型，但是void类型就不能赋给number、string等基础类型
let u: undefined = undefined;
let n: null = null;

// 这样不会报错
let num: number = undefined;
let num2: string = undefined;
// 这样也不会报错
let u2: undefined;
let num3: number = u2;

function alertName(): void {
  alert('My name is Tom');
}
let unusable: void = undefined;

任意值在 typescript 的应用

任意值（Any）用来表示允许赋值为任意类型

let number: any = 'seven';
number = 7;
number.number = 1;
number.number.number = 2;
number.set = function() {};
// 未声明类型的变量可以看做是任意类型
let number2;
number2 = 10;
number2 = 11;

类型推论

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// 报错
// Type '7' is not assignable to type 'string'.
// 等价于
let myFavoriteNumber2: string = 'seven';
myFavoriteNumber = 7;

联合类型

表示取值可以为多种类型中的一种

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

let myFavoriteNumber2: string | number;
myFavoriteNumber2 = true;

// 当ts不确定联合类型是的变量是哪个类型的时候，访问此联合类型的所有类型里共有的属性或方法
function getLength(something: string | number): number {
  return something.length;
}

// 当ts不确定联合类型是的变量是哪个类型的时候，访问此联合类型的所有类型里共有的属性或方法
function getLength(something: string | number): string {
  return something.toString();
}

// 联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length);
myFavoriteNumber = 7;
// 被推断成string了，所以后来赋值是number，不存在length方法
console.log(myFavoriteNumber.length);

对象类型

使用接口（Interfaces）来定义对象的类型

// 约束了对象的形状必须和Person一致
interface Person {
  name: string;
  age: number;
}

let tom: Person = {
  name: 'Tom',
  age: 25
};

// 约束了对象的形状必须和Person一致，比接口少了一些属性是不允许的，反之多了也不允许
// 赋值的时候，变量的形状必须和接口的形状保持一致
interface Person {
  name: string;
  age: number;
}

let tom: Person = {
  name: 'Tom'
};

// 不用完全匹配一个形状，可以用可选属性，但是不能添加未定义属性
interface Person {
  name: string;
  age?: number;
}
let tom: Person = {
  name: 'tom'
};

// 接口允许任意属性
interface Person {
  name: string;
  age?: number;
  [prop: string]: any;
}
let person: Person = {
  name: 'tom',
  listen: function() {}
};

// 接口允许任意属性，确定属性和可选属性的类型必须都是任意属性的子级
interface Person {
  name: string;
  age?: number;
  [prop: string]: string;
}
let person: Person = {
  name: 'tom',
  listen: function() {}
};

// 只读属性，只读属性在对象赋值的就要传入，其他地方传入会报错
interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [prop: string]: any;
}
let person: Person = {
  id: 1,
  name: 'tim',
  age: 18,
  say() {}
};
// 只读属性赋值会报错
person.id = 2;

数组类型

使用「类型 + 方括号」、数组泛型或接口定义数组，类数组只能通过接口定义

类型+[] 来定义数组，有类型限制

// 类型+[] 来定义数组，有类型限制
let arr: number[] = [1, 2, 3, 4];
let arr2: string[] = ['a', 'b'];
let arr3: any[] = ['a', 1, false, null, undefined];
let arr3: number[] = [1, 'a'];

用泛型来定义数组，也是有类型限制

// 用泛型来定义数组，也是有类型限制
let arr: Array<number> = [1, 23, 3, 0, 45];
let arr3: Array<any> = [1, false, null, undefined, void 0, function hello() {}, '1'];

用接口表示数组

// 用接口表示数组
interface ArrayInterface {
  [prop: number]: number;
}
let arr: ArrayInterface = [1, 2, 3, 4, 5, 6];

interface ArrayInterface2 {
  [prop: string]: any;
}
let arr2: ArrayInterface2 = [false, null, 1, 'a'];

函数类型

函数的形参类型，输出类型都要被定义

定义函数类型

// 定义一个函数类型
// 输出是number
function sum(x: number, y: number): number {
  return x + y;
}
sum(1, 2);
// 输出是any
var sum2 = function(x: string, y: any): any {
  var result = x + y;
  console.log(result);
};
sum2('boolean', false);
// 推导出一个函数类型
var sum3: (x: number, y: number) => number = function(x: number, y: number): number {
  return x + y;
};
// 形参可选:可选参数后面不允许再出现必选参数
function sum4(x: number, y: number, z?: number): number {
  if (z) {
    return x + y + z;
  } else {
    return x + y;
  }
}
sum4(1, 2, 3);
sum4(1, 2);
// 参数默认值
function sum5(x?: string = 'hello', y: string): string {
  return x + y;
}
sum5(undefined, 'world');

接口定义函数类型

// 用接口定一个函数
interface Func {
  (x: number, y: number): boolean;
}
let func: Func = function(x, y) {
  return false;
};
func(1, 2);

类型断言

手动指定一个值的类型

// 一个函数，输入类型是联合类型，但是不确定输入是什么类型，进行类型断言，如果不断言就会访问联合类型的共有属性与方法
function sum(x: string | number): number {
  if ((<string>x).length) {
    return (<string>x).length;
  } else {
    return x.toString().length;
  }
}
sum(1);
sum('1');

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令

// 引入Zepto库，需要重新定义$（Zepto）
declare var Zepto: (selector: string) => any;
// 引入jQuery库，需要重新定义$（jQuery）
declare function jQuery(selector: string): any;
// 重新定义类
declare class Animal {
  name: string;
  constructor(name: string);
  sayHi(): string;
}
// export的用法
declare const name: string;
declare function getName(): string;
declare enum Directions {
  Up,
  Down,
  Left,
  Right
}
interface Options {
  data: any;
}
export { name, getName, Animal, Directions, Options };
// export default 的用法
declare function foo(): string;
export default foo;

Zepto('#id');
jQuery('.class');
new Animal('Tom');

内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型，所有内置对象，TypeScript 核心库的定义中不包含 Node.js 部分，需要引入第三方声明文件：npm install @types/node --save-dev

// 内置对象
let b: Boolean = new Boolean(1);
let e: Error = new Error('error');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

let body: HTMLElement = document.body;
let div: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {});