TypeScript

原创已于 2025-12-12 17:45:27 修改 · 226 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

于 2025-12-12 14:24:05 首次发布

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;

b[0]=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 都会认为结果是 number

interface 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('小狗')