TS基础

TS

TypeScript是JavaScript的一个超集, 主要提供了类型系统和ES6的支持, 它由Microsoft开发, 代码开源在GitHub上

与JS的区别

1. 类型系统: JavaScript 是一个弱类型语言, 对于变量的类型没有强调, 而TypeScript则对于类型的定义更加严谨和规范, 解决js的弱类型特性
2. ES6的支持
3. js是一种解释性语言, ts是一种编译性语言

优点

1. 增加了代码的可读性和可维护性
2. 包容性强, 即使因为类型编译失败, 也可以正常生成js文件
3. 活跃的社区

安装

npm install typescript -g

ts文件的后缀为.ts, react中ts文件的后缀为.tsx
主流IDE都支持TS, 包括代码补全, 接口提示, 跳转定义, 重构等

原始数据类型

string
number
booolean
null
undefined
enum
symbol

void: 函数无返回值
any: 任意值, 允许赋值为任意类型.

• 当声明变量的时候不对它进行任何操作, 返回的内容类型就是任意值any

类型推论

TypeScript会依照类型推论的规则推论出一个类型

• 如果没有初始值赋值, 则为any类型, 不进行类型推论
• 如果初始化赋值, 但是没有指定类型, 会根据初始值进行类型推论

联合类型

表示取值可以为多种类型中的一种, 示例: var muchType: string | number = "hello"

对象类型

可描述类的一部分抽象行为, 也可描述对象的结构形状

• 接口一般首字母大写, 有的变成语言上面建议接口的名称加上I前缀
• 赋值的时候, 变量的形状必须和接口的形状相同
• 接口属性不能初始化赋值
• 接口可以定义: 可选属性, 只读属性, 任意属性

数组类型

表示方法:

1. [类型+方括号]: var arr: number[] = [1, 2, 3]
2. Array<elemType> : var arr: Array<number> = [1, 2, 3]
3. Interface: interface Iarr { [index:number]:number}

函数类型

声明式类型函数

• function funcType(name: string, age: number):number{return age}

表达式类型函数

• var funcType: (name: string, age: number) => number = function(name: string, age: number):number{return age}
• 也可以使用接口的方法: interface funcType{(name: string, age: number): number}

可以使用重载对联合函数进行处理

类型断言

可以用来手动指定一个值的类型

类型断言不是类型转换, 断言成联合类型中不存在的类型是不允许的
语法: <类型>值 or 值as类型
在jsx语法(react的jsx语法的ts版) 只能使用 值as类型这种语法

• function getAssert(name: string | number) {return (<string>name).length}

类型别名

可以用来为一个类型设置一个别名

语法: type name = string | number var str:name = "10"
也可以用来约束指定字符串

枚举(enum)

可以用于取值被限定在一定范围内的场景

语法: enum days{sun, Mon, Tue, Wed, Thu, Fri, Sat}
枚举成员被赋值为从0开始递增的数字, 同时也会被枚举值到枚举名进行反向映射, 即双向映射

类型修饰符

1. public 公有
2. private 私有, 只在本类中可以使用, 子类中也不可以
3. protected 受保护, 只有本类和子类中可以使用

类的静态方法中, 不允许使用this

泛型

指在定义函数, 接口或类的时候, 不预先指定具体类型, 而是在使用的时候再指定类型的一种特性

泛型可以用来限定约束规范

undefined和null的异同

同:

1. 两者的布尔值都是false
2. 两者是js最基本的数据类型

异:

1. undfined表示不存在值, null表示空值

常用命令

tsc hello.ts 编译文件
tsc -v 查看版本号