typescript 基础-白红宇

看到用的iview3.1版本要支持typescript,觉得现在UI都开始支持ts,是该了解一波

基础

原始数据类型

包括:布尔值、数值、字符串、null、undefined 以及 ES6 Symbol。

let isDone: boolean = false;// number string null undefined //可以用 void 表示没有任何返回值的函数function sayname(): void {    alert('Tom');}复制代码

任意值

any 表示允许赋值为任意类型。

let num: any = 'seven';num = 7;//变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：复制代码

联合类型

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

let num: string | number;num = 'seven';num = 7;复制代码

接口

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

interface Person {    name: string;    age: number;}let tom: Person = {    name: 'Tom',    age: 25};//约束了 tom 的形状必须和接口 Person 一致// 定义的变量比接口少了一些属性是不允许的：多一些属性也是不允许的：//可选属性interface Person {    name: string;    age?: number;}//仍然不允许添加未定义的属性：let tom: Person = {    name: 'Tom'};//任意属性interface Person {    name: string;    age?: number;    [propName: string]: any;}let tom: Person = {    name: 'Tom',    gender: 'male',    age:23};//一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性：//任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了//只读属性 readonly interface Person {    readonly id: number;}let tom: Person = {    id: 89757,};tom.id = 9527;//error复制代码

数组

类型+方括号

let fibonacci: number[] = [1, 1, 2, 3, 5];//泛型let fibonacci: Array
    
      = [1, 1, 2, 3, 5];//接口interface NumberArray {    [index: number]: number;}//只要 index 的类型是 number，那么值的类型必须是 number。let fibonacci: NumberArray = [1, 1, 2, 3, 5];//anylet list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];//类数组//常见的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：function sum() {    let args: IArguments = arguments;}复制代码

函数

//可选参数必须接在必需参数后面,TypeScript 会将添加了默认值的参数识别为可选参数,此时就不受「可选参数必须接在必需参数后面」的限制了function sum(x: number, y: number,z?:number): number {
   //?可选    return x + y;}//输入多余的（或者少于要求的）参数，是不被允许的//TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型let mySum: (x: number, y: number) => number = function (x: number, y: number): number {    return x + y;};//rest参数,是数组function push(array: any[], ...items: any[]) {    items.forEach(function(item) {        array.push(item);    });}复制代码

类型断言

手动指定一个值的类型

//1. 
    <类型>
     值//2. 值 as 类型 //tsx 语法（React 的 jsx 语法的 ts 版）中必须用这一种//类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的function getLength(something: string | number): number {    if ((
     
      something).length) {        return (
      
       something).length;    } else {        return something.toString().length;    }}复制代码

声明

//声明语句declare var jQuery: (selector: string) => any;jQuery('#foo');//声明文件// jQuery.d.tsdeclare var jQuery: (arg:string) => any;//约定声明文件以 .d.ts 为后缀,使用到的文件的开头，用「三斜线指令」表示引用了声明文件/// 
    jQuery('#foo');//第三方文件// @types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：npm install @types/jquery --save-dev复制代码

内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。内置对象是指根据标准在全局作用域（Global）上存在的对象

let b: Boolean = new Boolean(1);let e: Error = new Error('Error occurred');let d: Date = new Date();let r: RegExp = /[a-z]/;//BOM DOM对象 Document、HTMLElement、Event、NodeListlet body: HTMLElement = document.body;let allDiv: NodeList = document.querySelectorAll('div');document.addEventListener('click', function(e: MouseEvent) {  // Do something});//ts 写node//npm install @types/node --save-dev复制代码