Typescript 基础知识
Typescript 就是 Javascript 的超集，所以首先你要知道 Javascript 基础知识
类型注解
类型注解在TypeScript中是记录函数或变量约束的简便方法。
// 布尔值
let isDone: boolean = false;
// 数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
// 字符串
let name: string = 'bob';
// 模板字符串，可定义多行文本和内嵌表达式
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }. I will be ${ age + 1 } years old nex month.`;
// 字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mouseove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello'), 'scroll'); // ok
handleEvent(document.getElementById('world'), 'dbclick'); // 报错, event 不能为 'dbclick'
// 数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
// person参数必须是string类型，且必须有参数
function greeter(person: string) {
return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
// 类型报错
// 枚举
enum Color { Red, Green, Blue };
let c: Color = Color.Green; // 1
// 手动赋值
enum Color { Red = 1, Green, Blue };
let c: Color = Color.Green;
// 根据值得到名字
enum Color { Red = 1, Green, Blue };
let colorName: string = Color[2];
console.log(colorName); // Green
// 手动赋值的枚举项可以不是数字，需要使用类型断言来让tsc无视类型检查
enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>'S' };
// 枚举会被编译为
var Days;
(function (Days) {
Days[Days['Sun'] = 0] = 'Sun';
Days[Days['Mon'] = 1] = 'Mon';
Days[Days['Tue'] = 2] = 'Tue';
Days[Days['Wed'] = 3] = 'Wed';
Days[Days['Thu'] = 4] = 'Thu';
Days[Days['Fri'] = 5] = 'Fri';
Days[Days['Sat'] = 6] = 'Sat';
})(Days || (Days = {}));
// 任意值(任意类型)
let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false;
// 与Object类型区别
let notSure: any = 4;
notSure.ifItExists();
notSure.toFixed();
let prettySure: Object = 4;
prettySure.toFixed(); // Error
// 空值
function warnUser(): void {
alert("This is my warning message");
}
// 声明一个void类型的变量，只能赋值为null或者undefined
let unusable: void = undefined;
// Never
// never 类型表示的是那些永不存在的值的类型
// null 和 undefined 是所有类型的子类型。而 void 类型则不是。
元组 Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 10]; // ok
x = [10, 'hello']; // error
// 类型约束
console.log(x[0].substr(1)); // ok
console.log(x[1].substr(1)); // error, 'number' does not have 'substr'
// 访问越界的元素，会使用联合类型替代
x[3] = 'world'; // ok
console.log(x[5].toString()); // ok
x[6] = true; // error, 布尔不是（string | number）类型
类型断言
- “尖括号”语法
let someValue:any = "this is a string";
let strLength: number = (<string>someValue).length;
- as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length
类型别名
用来给一个类型起个新名字。类型别名常用于联合类型。
// 使用 type 创建类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if ( typeof n === 'string' ) {
return n;
} else {
return n();
}
}
解构
- 解构数组
let input = [1, 2];
let [first, second] = input;
console.log(first); // 1
console.log(second); // 2
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
- 对象解构
let o = {
a: 'foo',
b: 12,
c: 'bar'
};
let { a, b } = o;
// 可以用没有声明的赋值，必需以括号括起来，否则{起始的语句会解析为一个块
({ a, b } = { a: 'baz', b: 101 });
// 使用...语法创建剩余变量
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
// 属性重命名
let { a: newName1, b: newName2 } = o;
// 相当于
let newName1 = o.a;
let newName2 = o.b;
// 指示类型
let { a, b }: { a: string, b: number } = o;
// 默认值，属性为undefined时使用缺省值
function keepWholeObject(wholeObject: { a: string, b?:number }) {
let { a, b = 1001 } = wholeObject;
}
function f({ a, b = 0 } = { a: '' }): void {
//...
}
f({ a: 'yes' }); // ok
f(); // ok, default to {a: ''}
f({}); // error, 'a' is required if you supply an argument
展开
// 数组展开，展开操作是浅拷贝
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
// 展开对象
let defaults = { food: 'spicy', price: '$$', ambiance: 'noisy' };
let search = { ...defaults, food: 'rich' };
// 展开，只包含自身的可枚举的属性
class C {
p = 1;
m() {
}
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error
类
class Student {
fullName: string;
// 构造函数
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
var user = new Student('Jane', 'M', 'User');
document.body.innerHTML = greeter(user);
更详细的可以关注Typescript官网
