// 类型注解
let var1: string;
// 类型推论
const var2 = true;
// var2 = 'sss'
// 原始类型: string number boolean undefined null symbol void ...
let var3: string | number;
// 类型数组
let arr: string[];
// 任意类型
let varAny: any;
// 函数类型约束, string参数类型, number返回类型
function greet(person: string): number {
return 233
}
// void类型(没有返回值)
function warn(): void {
const a = 0;
}
// 对象object, 不是原始类型就是对象类型
function fn1(o: object) {
//
}
// 正确的姿势
function fn2(o: { props: number }) {
// 传入的参数必须有props属性
}
// 类型别名type,自定义类型
type Prop = { props: number }
// function fn3(o: Prop) { }// 等同于fn2
// type 和interface的区别, 基本上完全相同
// 类型断言
const someValue: any = 'this is a string'
const strLen = (someValue as string).length
// 联合类型
let union: string | number
union = '1'
union = 1
// 交叉类型 主要作用是拓展类型
type First = { first: number }
type Second = { second: number }
// 拓展新的type
type FirstAndSecond = First & Second;
function fn4(param: FirstAndSecond): FirstAndSecond {
return { first: 1, second: 2 } // fisrt 和second 必须都有
}
// 函数
/**
* 1. 设置了参数就是必填参数
* 2. 默认值
* 3. 可选参数,位置一般是放在参数的最后
*/
function greeting(person: string, msg = 'abc', msg2?: string): string {
return ''
}
// 函数重载 和java类似: 场景主要是源码和框架,函数用参数的类型、个数、返回值的类型来区分同名的函数
// 先声明,在实现
// 同名的声明可以有多个
function watch(cb1: () => void): void;
function watch(cb1: () => void, cb2: (v1: any, v2: any) => void): void;
// 实现
function watch(cb1: () => void, cb2?: (v1: any, v2: any) => void) {
if (cb1 && cb2) {
// 执行重载2
} else {
// 执行重载1
}
}
// class
class Parent {
private _foo = "foo"; // 私有属性,不能在类的外部访问
protected bar = "bar"; // 保护属性,可以在子类中访问
// 参数属性:构造函数参数加修饰符,能够定义为成员属性
constructor(public tua = "tua") { }
// 方法也有修饰符
// private someMethod() { }
// 存取器:属性方式访问,可添加额外逻辑,控制读写性
get foo() {
return this._foo;
}
set foo(val) {
this._foo = val;
}
}
class Child extends Parent {
}
const p = new Parent()
const c = new Child()
// 接口仅约束结构,不要求实现,使用更简单
interface Person {
firstName: string;
lastName: string;
}
// greeting函数通过Person接口约束参数解构
function greeting1(person: Person) {
return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
greeting1({ firstName: 'Jane', lastName: 'User' }); // 正确
// greeting1({firstName: 'Jane'}); // 错误
// 泛型
// 不用泛型
// interface Result {
// ok:0|1;
// data: Feature[];
// }
// 使用泛型
interface Result<T> {
ok: 0 | 1;
data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T> {
return { ok: 1, data };
}
// 用尖括号方式指定T为string
getResult<string>('hello')
// 用类型推断指定T为number
getResult(1)
ts总结
最新推荐文章于 2024-08-24 15:28:03 发布
本文详细总结了 TypeScript 的基础知识,包括类型系统、接口、泛型等,并结合实际项目经验,探讨了如何在 JavaScript 项目中引入 TypeScript 提升代码质量和可维护性。
摘要由CSDN通过智能技术生成