TypeScript

介绍#

官方介绍: TypeScript is JavaScript with syntax for types.

翻译过来就是: “TypeScrip是带有类型语法的JavaScript。”

历史#

2012年10月，微软发布了首个公开版本的TypeScript。2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。

安装#

1
> npm install -g typescript

数据类型#

  • 与js中数据类型一致，增加了枚举类型

  • number

  • string

  • boolean

  • undefined

  • BigInt

  • Symbol

  • Object

函数返回类型

  • void

  • never

1
2
3
4
let a: any; // any类型, 可以赋值任意类型的值
let hello = 'hello';  // 隐式any类型, 赋值时推断出string类型
let helloworld: string = `${hello} world`;
console.log(helloworld);
1
2
3
4
5
// 数组
let list1: number[] = [1, 2, 3];
console.log(list1);

let list2: Array<number> = [1, 2, 3];

  • 枚举

1
2
3
4
5
   // 枚举, 默认从0开始(没有初始值时)
   enum Color { Red = '#fe5f55', Green = '#fff1c1', Blue = '#293462' };
// 限制变量c的值只能为枚举中的值
   let c: Color = Color.Green;
   console.log(c);  // #fff1c1
1
2
3
4
5
// void, 表示没有任何类型, 一般用于函数返回值, 其值只能为undefined或null
function warnUser(): void {
    console.log('This is my warning message');
}
console.log(warnUser());  // undefined
1
2
3
4
5
6
7
8
9
// never, 表示永远不会有返回值的类型, 一般用于函数返回值
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 自动推断返回类型为never
function error_(message: string) {
    return error("Something failed");
}

解构赋值#

1
2
3
4
5
6
7
let obj = {
    name: 'zhangsan',
    age: 18,
}
let { name, age }: { name: string, age: number } = obj;
type C = { name: string, age: number };
let { name: name1, age: age1 }: C = obj;

接口interface#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 预定义对象中属性的类型
interface Person {
    // 只读属性
    readonly name: string;
    age: number;
    // 可选属性
    isAdmin?: boolean;
}
type P = Person;
let zhangsan: P = {
    name: 'zhangsan',
    age: 18,
};

只读属性#

  • 做为变量使用的话用 const`，

  • 若做为属性则使用readonly。

1
2
3
4
// 只读数组
let arr: ReadonlyArray<number> = [1, 2, 3];
// let newArr:number[] = arr;  // "readonly number[]" 为 "readonly"，不能分配给可变类型 "number[]"
let newArr: number[] = arr as number[];  // 类型断言, it's ok

接口与type#

  • type可实现的interfere都可以实现

  • 区别: type不可新增属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface User {
    name: string,
    age: number,
}
interface VIPUser extends User {
    money: number,
}
let jam: VIPUser;
// 可向已定义的接口添加新属性height
interface User {
    height: number,
}
let rose: User = {
    name: 'rose',
    age: 18,
    height: 165
}
1
2
3
4
5
6
7
8
9
type User = {
    name: string,
    age: number,
}
type VIPUser = User & {
    money: number,
}
// 不能再向User中添加新属性
let jack: VIPUser;

泛型#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * T 代表泛型，具体什么类型是调用这个方法的时候决定的
 * @param arg 
 * @returns 
 */
function fun<T>(arg: T): T {
    return arg;
}

/**
 * 泛型类, data的类型由实例化的时候决定
 */
class Data<T> {
    data: T;
}

枚举作类型#

1
2
3
4
5
   // 枚举, 默认从0开始(没有初始值时)
   enum Color { Red = '#fe5f55', Green = '#fff1c1', Blue = '#293462' };
// 限制变量c的值只能为枚举中的值
   let c: Color = Color.Green;
   console.log(c);  // #fff1c1

函数参数#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 
 * @param id 多类型参数
 */
function moreType(id: number | string) {

}
/**
 * 
 * @param id 可选参数
 */
function optional(id?: number) {

}
/**
 * 
 * @param fun 当参数为函数时
 */
function doFun(fun: (str: string) => void) {
    fun('hello typrScript');
}

相关链接#