ts语法特性
- 类 Classes
- 接口 Interfaces
- 模块 Modules
- 类型注解 Type annotations
- 编译时类型检查 Compile time type checking
- Arrow 函数
安装TS
$ npm install -g typescript
编译ts成js文件
tsc filename.ts
TS基础类
布尔值 boolean
let isDone:boolean = false;
数字 number
let age:number = 18
字符串 string
let name:string ="张三"
模板字符串形式：
let name:string = `我的名字${name}`
数组
let arr:number\[\] =1,2,3
let arr:Array<number> = 1,2,3
元组
let x :string,number = '1',2
error:
let y :number,string = '1',2 //不能将类型"string"分配给类型"number"
枚举 enum
enum sex {boy='男', gril='女'}
let sex1:sex=sex.boy
任意值 any
let a:any="123"
空值 void
function message(): void {
console.log("Hello")
}
let name:void= null
（只能赋值undefined或null）
Null和Undefined
let name:null = null
let name:undefined = undefined
Never
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() :never{
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
类型断言
let myname: any = "zhangsan";
let mynamelen :number = (<string>myname).length
let myname1 :any ="zhangsan"
let myname1len :number = (myname1 as string).length
接口Interface
interface pbjparams {
name: string,//必有
age?:number//可以有
}
let infoobj = {
name: 'zs',
age: 18
}
function namefun(infoobj: pbjparams) {
console.log(infoobj.name)
}
namefun(infoobj)
只读属性 readonly
interface pbjparams {
readonly name: string,
age?:number
}
let infoobj:pbjparams = {
name: 'zs',
}
infoobj.name = 'ls'//无法为"name"赋值，因为它是只读属性
let a: number\[\] = 1, 2, 3, 4;let b: ReadonlyArray<number> = a;
b0=2 //类型"readonly number\[\]"中的索引签名仅允许读取
a=b //类型 "readonly number\[\]" 为 "readonly"，不能分配给可变类型 "number\[\]"。
a = b as number\[\]//可以：b 当作类型 number\[\] 来看待
只读属性 readonly和const 的使用
- 变量使用const
- 属性使用 readonly
额外的属性检查
1.断言
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
// ...
return {color:'red', area: 100}
}
let mySquare = createSquare({ colour: "red", width: 100 }) //类型"{ colour: string; width: number; }"的参数不能赋给类型"SquareConfig"的参数。
let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig)
2.索引签名
interface MyObject
{
name: string;
age: number;
propName: string: any; // 允许额外的字符串键属性
}
- 对象可以有可选属性 name（字符串）和 age（数字）；
- 除此之外，还可以有任意其他字符串键名的属性 ，其值可以是任意类型（
any）。- 索引签名的值类型必须兼容接口中所有已知属性的类型。//propName: string]: string会报错 改为propName: string]: string|number
只有在以下场景才建议使用：
| 场景 | 说明 |
|---|---|
| 接收外部不可控数据 | 如 API 响应、用户配置文件、第三方库输出 |
| 实现类似字典/哈希表的结构 | 例如 { [id: string]: User } |
| 需要高度动态的对象 | 且你愿意放弃部分类型安全 |
3.将这个对象赋值给一个另一个变量
let squareOptions = { sex: "男",name:'zs' };
let mySquare = createSquare(squareOptions);
函数类型
interface 接口名 {
(参数列表): 返回类型;
}
interface AddFunction {(a: number, b: number): number;
}
// 使用该接口定义函数
const add: AddFunction = (x, y) => x + y;
// 调用
console.log(add(2, 3)); // 输出 5
字符串索引签名
interface Dict {
key: string: number;
}
- 无论你用什么字符串去访问这个对象（如
d["a"]、d.foo），TypeScript 都会认为结果是numberinterface Dict {
key: string: number;
};
let b: Dict = {
"a": 1,
"b": 2
}
console.log(b"a"); //1
类类型
interface Animal {
name: String;
move(): string
}
class Dog implements Animal {
name: String;
constructor(name: string) {
this.name = name
}
move() {
return '移除方法'
}
}
let p = new Dog('小狗')