TypeScript——基本类型
/**
* @布尔
*/
let isDone: boolean = false;
/**
* @数字
*/
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
/**
* @字符串
*/
let username: string = `Gene`;
let sentence: string = `Hello, my name is ${ name }.`
/**
* @数组类型
*/
let fibonacci1: number[] = [1, 1, 2, 3, 5];
let fibonacci2: Array<number> = [1, 1, 2, 3, 5];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
TypeScript——枚举类型
/**
* @数字枚举
*/
enum Direction {// Up的值为 0， Down的值为 1等等
Up,
Down,
Left,
Right,
}
enum Direction2 {// Up的值为 0， Down的值为 1等等
Up,
Down,
Left,
Right,
}
/**
* @字符枚举
*/
enum StudentGrade{
kindergarten= '幼儿园',
grade1='一年级',
grade2='二年級'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
TypeScript——函数类型
可选参数
类型提升中不强制要求必须传参，但要求这个参数必须在最后用？号标记
function buildName(firstName: string, lastName = "Smith", fullName?: string) {
return firstName + " " + lastName;
}
1
2
3
剩余参数
在最后用…变量名标记
function push(array: any[], ...items: any[]) {
items.forEach(function(item) {
array.push(item);
});
}
1
2
3
4
5
参数类型：
（1）单值类型
function fun(num:string) {
}
1
2
类型推断，第二个报错
（2）联合类型
注意，尽量不适用联合类型导致类型推导不完整
返回值类型
（1）单值类型
function fun() : string{
return "string"
}
1
2
3
可以直接类型推导它内部的函数
（2）联合类型
function fun() : string|number{
return "string"
}
1
2
3
（3）nerver类型
一定会产生错误或者死循环
function error(message: string): never {
throw new Error(message);
}
1
2
3
TypeScript——类/接口/对象/type
类
class Animal{
name: string;
constructor(value: string) {// 构造函数
this.name = value;
}
greet(distance: number = 0) {
return `Hello, ${this.name} move ${distance}`;
}
static origin = {x: 0, y:0}; // 静态属性
private greeting: string; // 私有属性
readonly name: string = 'onlyread'; // 只读属性
protected greet() { // 受保护
return 'Hello, ' + this.greeting;
}
public speed() { // 公有方法
console.log('Test');
}
set greet(value) { // set
this.name = value;
}
get speed() { // get
return this.name;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
接口
接口主要用于说明实体的结构，而类是结构的具体实现
？号————代表可选参数
T 号————代表动态泛型
结构声明
export interface EntityResponse<T> {//对象数据结构
code: number
errorMessage?: string
returnObject?:T
}
export interface PageResponse<T> {//分页数据结构
code: number
errorMessage?: string
returnObject?: {
total: number,
list: Array<T>,
}
}
export interface ResponseV0{//键值类型结构
[key: string]: any
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结构应用
（1）给js对象加断言约束
let responsVO:EntityResponse<string>={
code:200,
errorMessage:"",
returnObject:""
}
1
2
3
4
5
（2）给了class对象加结构约束
class ResponseVo <T> implements EntityResponse<T>{
code: number
errorMessage?: string
returnObject?:T
constructor(code: number,errorMessage?: string,returnObject?:T){
this.code=code;
this.errorMessage=errorMessage;
this.returnObject=returnObject;
}
}
1
2
3
4
5
6
7
8
9
10
（3）给方法参数加约束
这里用到了方法泛型
function fun <T>(response:EntityResponse<T>){
}
/*
注意，类实现了接口也可以作为参数被同意与java一样
*/
fun(new ResponseVo(200))
1
2
3
4
5
6
7
TypeScript——泛型
泛型类型
方法泛型
function fun <T>(response:EntityResponse<T>){
}
1
2
3
类泛型
class ResponseVo <T> {
code: number
errorMessage?: string
returnObject?:T
constructor(code: number,errorMessage?: string,returnObject?:T){
this.code=code;
this.errorMessage=errorMessage;
this.returnObject=returnObject;
}
}
1
2
3
4
5
6
7
8
9
10
接口泛型
export interface EntityResponse<T> {//对象数据结构
code: number
errorMessage?: string
returnObject?:T
}
1
2
3
4
5
泛型应用
约束/提示
直接加载类、方法参数、对象上时起到了约束的作用
加到返回值起到了提示的作用或者一些变量类型的推导
泛型变量传递
当接口需要泛型时可以由方法泛型来指定，类也是如此类实现了接口，可以由类再外部指定的泛型再传给接口；
function fun <T>(response:EntityResponse<T>){
}
1
2
3
泛型操作（待完善）
多泛型
class ResponseVo <T,U> implements EntityResponse<T>{}
1
泛型的下界
这个返回值的类型继承了EntityResponse
function request<T extends EntityResponse<T>>()
1
TypeScript——断言操作
语法断言
let str: string;//声明断言
let val: number = (str as string).length;//as 断言
let val2: number = (<string>str).length;//强转 断言
1
2
3
语句断言
if (typeof param === 'string') {
let temp = param; //ok 此处param为string
}
if ( str instanceof string) {
str ; //ok 此处str 为string
}
1
2
3
4
5
6
TypeScript——其他
类型别名——type
（1）应用方式
/*
基本使用
*/
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
}
else {
return n();
}
}
/*
泛型使用
*/
type Container<T> = { value: T };
/*
递归使用
*/
type Tree<T> = {
value: T;
left: Tree<T>;
right: Tree<T>;
}
/*
合并使用
*/
type LinkedList<T> = T & { next: LinkedList<T> };
interface Person {
name: string;
}
//var people: LinkedList<Person>;
//var s = people.name;
//var s = people.next.name;
//var s = people.next.next.name;
//var s = people.next.next.next.name;
/*
错误使用
*/
type Yikes = Array<Yikes>; // 右边不能引用自己
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
（2）逻辑操作
/**
* @Exclude<T, U>，T中排除U
*/
type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">; // "b" | "d"
/**
* @Extract<T, U>，T和U取并集
*/
type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">; // "a" | "c"
type T02 = Exclude<string | number | (() => void), Function>; // string | number
type T03 = Extract<string | number | (() => void), Function>; // () => void
/**
* @Extract，剔除null和undefined
*/
type T04 = NonNullable<string | number | undefined>; // string | number
/**
* @ReturnType<T> -- 获取函数返回值类型。
*/
function fun(s: string) {
return { a: 1, b: s };
}
type T14 = ReturnType<typeof fun>; // { a: number, b: string }y
/**
* @InstanceType<T> -- 获取构造函数类型的实例类型。
*/
class C {
x = 0;
y = 0;
}
type T20 = InstanceType<typeof C>; // C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
字面量类型
type Easing = "ease-in" | "ease-out" | "ease-in-out";
function rollDie(): 1 | 2 | 3 | 4 | 5 | 6 {
}
type Shape = Square | Rectangle | Circle;
interface Square {
kind: "square";
size: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
interface Circle {
kind: "circle";
radius: number;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
任意类型——any
任意类型则as之后则可以解决一切类型约束的限制问题，any类型不会有任何限制
let fuck=obj as any;
let fuck=(<any>obj );
1
2
索引类型查询操作符——keyof
function fun1(person:Person,str:keyof Person):void{
let person: Person = {
name: 'Jarid',
age: 35
};
fun1(person,"name");//是Person的key
fun1(person,"age");//是Person的key
fun1(person,"?");//不是Person的key，会推导出类型错误
1
2
3
4
5
6
7
8
9
索引访问操作符——T[K]
类型合并
interface ResponseVO {
code: number,
msg: string
}
interface ResponseVO {
data: string
}
let responseVO2: ResponseVO = {//报错，因为合并了
code: 1,
msg: "",
}
let responseVO1: ResponseVO = {//不报错
code: 1,
msg: "",
data: ""
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
TypeScript——symbols
用对象作为键去使用
let sym = Symbol();
let obj = {
[sym]: "value"
};
console.log(obj[sym]); // "value"
1
2
3
4
5
TypeScript——命名空间与模块系统（待更新）