TypeScript学习
转载
概念
- TypeScript 是 JavaScript 的一个超集，主要提供了
类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。
使用
- 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。
- tsc file.ts 转换为js文件
遇到问题
数据类型
- JavaScript 的类型分为两种：
原始数据类型（Primitive data types）和对象类型（Object types）。 - 原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。
boolean
let isDone: object = false; // ok
let isDone: object = new Boolean(1); // ok
//boolean代表基本类型 Boolean代表对象
// 变量接收的Ｂoolean类型的值，而不是对象
let isDone: boolean = new Boolean(1); //error
let isDone: Boolean = new Boolean(1); //ok
let isDone: boolean = Boolean(1); //ok
// 直接调用 Boolean 也可以返回一个 boolean 类型
Number
//十进制
let dec: number = 6;
//16进制
let hex: number = 0xf00d;
// 二进制
let binary: number = 0b1010;
// 8进制
let oct: number = 0o744
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
//其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。
// Infinity 属性用于存放表示正无穷大的数值。
// NaN NaN 属性是代表非数字值的特殊值。
string
let name: string = 'Xiaowang'
let age: number = 18;
// 字符串模板
let sentence: string = `my name is ${name} to age ${age}`
void
//JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void `表示没有任何返回值的函数`
function fun(): void {
console.log('no retuen!')
}
// 有返回类型的
function fun1(): number {
return 1;
}
//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：
//let unusable: void = undefined;
Null 和 Undefined
- undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null。
- 与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
let u: undefined = undefined; //ok
let n: null = null; // ok
let num: number = undefined; // ok
let u: undefined; //ok
let num: number = u;
let u: void; //error
let num: number = u;
// void 类型的变量不能赋值给 number 类型的变量 , void是类型不能是数值 但是undefined和null是可以的
any
// 对于普通的数据，在赋值过程中不允许类型改变
let name: string = 'xiaoyi' // error
name = 7;
// 对于任意数据类型，允许类型改变
let name: any = 'xiaoyi' // ok
name = 7;
- 声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
//声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
// 可以访问不存在的属性
let obj: any = 'xiaoyi'
obj.name // undefined
// 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：
let name; // ok 等价于 let name: any = undefined;
name = '123'
name = 123
类型推理 (Type Inference)
//如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let name; // let name: any = undefined;
let name = 'xiaoyi' // let name: string = 'xiaoyi';
name=7; //error
联合类型(Union Types)
- 表示取值可以为多种类型中的一种.
- 联合类型使用
|分隔每个类型。
let unionName: string | number;
unionName = 'xiaoyi'; //ok
unionName = 18 // ok
unionName = false // error 只能为string和number
- 当一个变量有
多个类型时候，只能访问此联合类型的所有类型里共有的属性或方法。
function getLength(something: string | number): number {
return something.length;
}
getLength('123'); // ok
getLength(123); // error对象的类型——接口(Interfaces)
- 它是对
行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。
//定义接口
interface Person {
name: string;
age: number;
}
// 使用
let obj: Person = {
name: 'xiaoyi',
age: 18
}
console.log(obj)
// { name: 'xiaoyi', age: 18 }
- 赋值的时候，定义的接口变量需要与赋值时候变量个数保持一直。
//定义接口
interface Person {
name: string;
age: number;
}
// ok
let obj: Person = {
name: 'xiaoyi',
age: 18
}
//error
let obj: Person = {
name: 'xiaoyi',
age: 18,
sno: '2017G121221'
}
console.log(obj)
// { name: 'xiaoyi', age: 18 }
- 可选属性－ 不希望完全匹配可以使用｀？｀去标识为可选属性（可选属性可加可不加）
interface Person {
name: string;
age?: number;
}
// ok
let tom: Person = {
name: 'Tom'
};
// ok
let tom: Person = {
name: 'Tom',
age: 18
};
//error 不允许添加未定义的属性
let tom: Person = {
name: 'Tom',
sno: '2017sddsfdsf'
};- 任意属性- [propName: string] 定义了任意属性取 string 类型的值。需要注意的是，一旦定义了任意属性，那么
确定属性和可选属性的类型都必须是它的类型的子集.
interface Person {
name: string;
age?: number;
//定义为string 类型
// [propName: string ]: any;
[propName: string ]: string;
}
//error
// 任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。
let tom: Person = {
name: 'Tom',
age: 25,
sno: '123'
};- 只读属性 -
readonly 定义只读属性
interface Person {
readonly id: string;
name: string;
age?: number;
}
// 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
let obj: Person = {
id: '89757',
name: 'Tom',
gender: 'male'
};
//error 只读不能被改变
obj.id = '122332'
