typescript

111 阅读3分钟

1. 原始数据类型

布尔值: let isDone: boolean = false
数值:   let decLiteral: number = 6
字符串: let myName: string = 'Tom'
空值:   void
NullUndefined: 和`void`的区别是,`null``undefined`是所有类型的子类,比如 `number` 类型的变量
                  可以赋值给`undefined`

2. 任意值any

[1] 普通类型 被改变类型是不允许的
    let name = 'Tom'
        name = 7 //编译错误

[2] 如果是`any`类型,则允许赋值任意类型

[3] 可以这样认为,声明一个变量后,对他的任何操作,返回的内容类型都是任意值

3. 类型推导

let myFavoriteNumber
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成any类型,而完全不被类型检查

4. 联合类型

联合类型表示可以取值多种类型,比如:
let myFavoriteNumber: string | number

5. 对象的类型 --- 接口

interface Persion {
    name : string;
    age : number;
    sex? : number; // 可选属性
    [propName: string]: any; // 任意属性
    readonly id : number; // 只读属性
}

// 赋值的时候,变量的形状和接口的形状必须保持一致
let tom: Persion = {
    name : 'Tom',
    age : 25
};

6. 数组类型

// 类型 + [] 表示法
let fibonacci: number[] = [1, 1, 2, 3, 5];

// 数组泛型
let szArray<number> = [1,3,4,5];

// 类数组, arguments 是一个类数组
let args:number[] = arguments

// any 在3数组中的试用
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

7. 函数类型

//不要混淆了 typescript 和 es6 中的 => 箭头函数
Typescript 中 => 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

ES6中的 => 是箭头函数,应用十分广泛
(x,y) => return x+y

// 可选参数,lastName? 表示可选参数
function buildName(firstName: string, lastName?: string) {}

// 默认参数,lastName 是默认参数
function buildName(firstName: string, lastName: string = 'Cat') {}

// 剩余参数
function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

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

// 重载函数

8. 断言

interface  cat{  run() : void; }
interface fish{ swim() : void; }

// 假设 animal 是 Fish 判断 swim 是不是函数
function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') return true;
    return false;
}

// 这样会报错,断言只是欺骗编译器,无法避免运行时的错误
function swim(animal: Cat | Fish) {
    (animal as Fish).swim();
}

// 如果 ApiError 是一个接口时,就不能使用 instanceof 判断了
// 因为接口类型,在编译之后会删除,因此这样判断就是编译错误
// 因此需要使用断言判断更为稳妥
if (error instanceof ApiError)
if (typeof (error as ApiError).code === 'number')

// 将任何类型断言为 any, 最好不要这样乱用,容易出现意想不到的错误
(window as any).foo = 1

9. 类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

10. 字符串字面量类型

// 字符串字面量类型用来约束取值只能是某几个字符串中的一个
// 注意,类型别名与字符串字面量类型都是使用 `type` 进行定义
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) { // do something}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错,event 不能为 'dblclick'

11. 元组

let tom: [string, number] = ['Tom', 25];

12. 枚举

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

13. 查看插件是否安装

1`npm -v` 查看npm版本  
2、使用npm命令安装模块  
`npm install Module Name`  
例如安装jquery模块  
`npm install jquery`  
3、卸载模块 `npm uninstall Module Name`  
4、查看当前目录下已安装的node包  
`npm list`  
5、查看安装模块的版本  
`npm info Module Name`  
例如查看jquery版本:  
`npm info jquery`  
6、安装制定版本,例如安装jquery指定版本  
`npm install jquery@1.8.0`

// 虽然 TypeScript 不限制加号两侧的类型,但是我们可以借助 
// TypeScript 提供的类型系统,以及 ESLint 提供的代码检查功能,
// 来限制加号两侧必须同为数字或同为字符串[5]。这在一定程度上使得 
// TypeScript 向「强类型」更近一步了——当然,这种限制是可选的