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
    评论
### 回答1: 1. 安装TypeScript:使用 npm 命令 "npm install -g typescript" 安装 TypeScript。 2. 创建TypeScript文件:创建一个名为 "main.ts" 的文件,在其中编写 TypeScript 代码。 3. 编译TypeScript文件:使用命令 "tsc main.ts" 编译 TypeScript 文件,生成同名的 JavaScript 文件。 4. 运行JavaScript文件:使用命令 "node main.js" 运行编译生成的 JavaScript 文件。 5. 添加类型注解:在变量前加上类型注解,如 "let message: string = 'Hello World'"。 6. 添加类型检查:使用 "tsc --noEmit" 命令只进行类型检查而不生成 JavaScript 文件。 这些步骤可以帮助你在5分钟内快速上手 TypeScript。 ### 回答2: TypeScript是一种静态类型的编程语言,它是JavaScript的超集。要快速上手TypeScript,你可以按照以下步骤进行: 1. 安装TypeScript:首先,你需要在你的计算机上安装TypeScript。你可以使用Node.js包管理器(npm)或者使用TypeScript官方提供的安装包进行安装。 2. 创建TypeScript文件:在你的项目目录下,创建一个以`.ts`扩展名结尾的TypeScript文件。例如,你可以创建一个名为`example.ts`的文件。 3. 编写TypeScript代码:在刚才创建的TypeScript文件中,你可以使用JavaScript的语法以及TypeScript的类型注解来编写代码。TypeScript提供了一些新的语法和特性,例如类、接口、泛型等。 4. 编译TypeScript代码:在终端中,进入到你的项目目录,并使用TypeScript编译器(tsc)将TypeScript代码编译成JavaScript代码。你可以使用以下命令进行编译: ``` tsc example.ts ``` 5. 运行JavaScript代码:在编译成功后,你将得到一个与TypeScript文件同名的JavaScript文件(`example.js`)。你可以使用Node.js或者在浏览器中运行该JavaScript文件来查看结果。 以上就是使用TypeScript快速上手的基本步骤。当你熟悉了TypeScript的基本语法和特性后,你可以进一步学习TypeScript的高级特性,如模块化、异步编程等。还可以结合一些TypeScript的开发工具,如编辑器插件、调试工具等,来提升你的开发效率。 ### 回答3: 要快速上手TypeScript,你可以按照以下步骤进行操作: 1. 安装TypeScript:首先,你需要在你的计算机上安装TypeScript编译器。你可以通过npm(Node Package Manager)来安装它,使用下面的命令: ``` npm install -g typescript ``` 2. 创建一个TypeScript文件:在你的项目中,创建一个后缀名为`.ts`的TypeScript文件。 3. 确定编译选项:在你的项目根目录下创建一个`tsconfig.json`文件,用于配置TypeScript编译器的选项。你可以根据需要选择不同的选项,比如目标版本、模块系统等。 4. 编写TypeScript代码:在TypeScript文件中编写你的代码。TypeScript是一种强类型的编程语言,它提供了类、接口、枚举等丰富的语言特性。 5. 编译TypeScript代码:使用以下命令将你的TypeScript代码编译为JavaScript代码: ``` tsc ``` 6. 运行JavaScript代码:在编译成功后,你将得到一个后缀名为`.js`的JavaScript文件。你可以使用任何支持JavaScript的环境(如浏览器、Node.js等)来运行这些代码。 7. 运行时类型检查:TypeScript还提供了运行时类型检查的功能。你可以使用像`typeof`、`instanceof`等运算符来进行类型检查,确保程序的运行过程中类型的正确性。 通过按照上述步骤进行操作,你就可以快速上手TypeScript,并开始使用它来开发你的项目了。当然,为了更好地掌握TypeScript的更高级特性和最佳实践,你可能需要进一步学习和实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值