TypeScript 快速上手

为什么要学TypeScript

简单来说比 js 更健壮、易维护和拓展。

  • ts 的最大优势之一是它引入了静态类型系统。这意味着你可以在编译时捕获错误,而不是在运行时。

  • ts 支持接口、类和模块等面向对象编程的概念,这有助于组织和维护大型代码库。

TypeScript 演练场:https://www.typescriptlang.org/zh/play

注意:ts 还是要编译为 js,才能在浏览器或者Node.js环境中运行

1. 类型注解

let str1: string = 'hello'
str1 = 10	//报错
  • 约束 str1 只能为 string 类型
  • str1 = 10,在 js 里是可以的,但 ts 会报错:Type ‘number’ is not assignable to type ‘string’.

2. 类型推断,不建议使用

let str2 = 'hello'
  • 省略了类型声明,根据字面量,会自动推断 str2 为字符串类型

3. 类型断言

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2)
console.log(result * 5)	 //报错
  • 报错:‘result’ is possibly ‘undefined’.

    虽然我们认为,result 肯定是3,但程序推断也可能是undefined。ts比较严格,result 未明确类型,undefined * 5就会变为–>NaN

正确写法,加上 as number 来约束 result 的类型

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2) as number
console.log(result * 5)	 //成功打印
  • 如果写 as any,就会回到最原始的任意类型(不建议写)

4. 基础类型和联合类型

let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
let v4: string | null = null	//联合类型:v4只能被分配string 或 null类型
let v5: 1 | 2 | 3 = 2;		//限定值只能从1, 2, 3中选一个

5. 数组

let arr1: number[] = [1, 2, 3]
let arr2: Array<string> = ['a', 'b', 'c']

6. 元组

功能:指定数组的元素个数和每个元素的类型

let t1: [string, number, boolean?] = ['a', 1, true]
  • ? 为可选项,该位置可不填,但是填了之后只能是对应的类型

7. 枚举

enum MyEnum {
    A,
    B,
    C
}

console.log(MyEnum.A)   //0
console.log(MyEnum.B)   //1
console.log(MyEnum.C)   //2

console.log(MyEnum[0])  //"A"
console.log(MyEnum[1])  //"B"
console.log(MyEnum[2])  //"C"

8. 函数

function MyFn1(a: number, b: string): string {
 return a + b;
}
//a 和 b 规定了约束了参数的类型
//():string 约束了返回值的类型。可以为 void 表示函数无返回值
function MyFn2(a: boolean, b = 10, c?: string, ...rest: number[]): boolean {
 return a;
}
//b 和 c 都为可选项
//b 不填则默认为 10,c 不填默认没有
//...rest 为剩余参数,且剩余值为一个数组结构,则可对其进行约束,为...rest: number[]
//注意,必选参数在左,可选参数在右,否则报错

//使用
const f: boolean = MyFn2(true, 20, "zx", 1, 2, 3, 4, 5);
console.log(f);		//true 

9. 接口

//正常定义对象类型
const obj = {
 name: "zhangsan",
 age: 20,
};

//使用接口
interface Person {
 name: string;
 age: number;
};

//使用该接口来定义对象
const p1: Person = {
 name: "zhangsan",
 age: 10,
};

10. 类型别名

//若很多参数都需要定义约束类型
let a: string | number = 10;
let b: string | number = 'a';
let c: string | number = 30;//则使用类型别名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 'a';
let c: MyType = 30;

11. 泛型

//对函数定义泛型
function myFn<T>(a: T, b: T, ...r: T[]): T[] {
 return [a, b, ...r];
}

//使用
//也可以 const arr = myFn(1, 2, 3, 12, 3); 因为 ts 支持类型推断
const arr: number[] = myFn<number>(1, 2, 3, 12, 3);
console.log(arr);

//输出
[1, 2, 3, 12, 3] 
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值