共计 3424 个字符,预计需要花费 9 分钟才能阅读完成。
介绍
这是一篇 typescript 的语法说明书, 欢送拜访我的博客
装置
npm install -g typescript
tsc hello.ts 编译 ts 文件
数据类型
// boolean:
let isDone: boolean = false
// number, string, void, null, undefined,any
// union:
let myFavoriateNumber: string | number
// interfaces: 对行为的形象,而具体如何口头须要由类(classes)去实现(implement)interface: Person {
name: string;
age?: number; // age 是可选属性, 用?示意可选
[propName: string]: any; // 容许有任意的属性
readonly id: number // 只读属性
}
// array:
let fibonacci: number[] = [1, 1, 2, 3, 5]
函数
function buildName(firstName: string = 'cat', lastName?:string, ...items: any[]):string{let r: number[] = []
items.forEach(item => r.push(item))
return lastName ? firstName + lastName : firstName
}
// 函数重载
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('');
}
}
类型断言
interface Cat {
name: string;
run(): void;}
interface Fish {
name: string;
swim(): void;}
function isFish(animal: Cat | Fish) {
// 应用类型断言 "值 as" 的形式解决了联结类型变量只能拜访共有属性的问题
if(typeof (animal as Fish).swim === 'function') {return true;}
return false;
}
(window as any).foo = 1
申明与导出
// 申明全局变量
declare var
// 申明全局办法
declare function
// 申明全局类
declare class
// 申明全局枚举类型
declare enum
// 申明(含有子属性的)全局对象
declare namespace
// 申明全局类型
interface 和 type
// 导出变量
export
// 导出(含有子属性的)对象
export namespace
// ES6 默认导出
export default
// 导出模块
export = commonjs
// UMD 库申明全局变量
export as namespace
// 扩大全局变量
declare global
// 扩大模块
declare module
/// <reference /> 三斜线指令
// 在引入内部文件的时候,比方 jquery, 因为 ts 中在编译过程的时候,须要每个变量进行定义
declare var jQuery: (selector: string) => any
declare namespace JQuery {function ajax(url: string, settings?: any): void
}
类型别名
type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver
字符串字面量类型
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'
元祖
let tom: [string, number] = ['tom', 25]
枚举
// 默认第一个是 0,顺次递减少一
enum Days {sun, mon, tue, wed, thr, fir, sat}
enum Days {sun=7, mon=1, tue, wed, thr, fri, sat}
类
// 抽象类的形象办法,继承的类要具体实现
public, private, protect, static, readonly, abstract
接口
// 接口能够继承接口
// 一个类能够实现多个接口
// 接口能够继承类
interface Alarm {alert():void
}
class Door {}
class SecurityDoor extends Door implements Alarm {alert() {console.log('securitydoor')
}
}
泛型
// 在函数外部应用泛型变量的时候,因为当时不晓得它是哪种类型,所以不能随便的操作它的属性或办法
// 然而能够通过束缚的方法解决这个问题
interface Lengthwise {length: number;}
function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);
return arg;
}
// 泛型的写法
function createArray<T>(length: number, value: T):Array<T>{let result: T[] = []
for (let i = 0; i < length; i++) {result[i] = value
}
return result
}
create<string>(3, 'x')
// 多个类型参数
function swap<T, U>(tuple: [T, U]): [U, T] {return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]
// 泛型接口
nterface CreateArrayFunc<T> {(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {let result: T[] = [];
for (let i = 0; i < length; i++) {result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
// 泛型参数的默认类型
function createArray<T = string>(length: number, value: T): Array<T> {let result: T[] = [];
for (let i = 0; i < length; i++) {result[i] = value;
}
return result;
}
申明合并
// 函数的合并
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('');
}
}
接口的合并
interface Alarm {price: number;}
interface Alarm {weight: number;}
正文完