TypeScript入门

于 2024-07-24 17:44:46 发布
阅读量447 收藏 8
点赞数 8
分类专栏： Java开发 文章标签： typescript javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuge_long/article/details/140669262
版权

一、TypeScript概述

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

编程语言，分为了“强类型语言”和“弱类型语言”。

强类型语言，对于数据类型要求非常严格，不允许不同类型的数据之间做隐式转换。

弱类型语言，对于数据类型要求不严格，不同的数据类型之间可以进行相互的转换。

  • 静态类型检查

    静态类型检查，指的是在代码编写的过程中，就开始对代码语法进行检查。也就是说，在代码运行之前，就可以检查出代码语法报错的地方。

    因此我们前端开发，会慢慢选择用 TS 来代替 JS，就是因为 JS 是弱类型语言，而 TS 属于强类型语言。

1、安装typeScript

  • 安装nodejs

    官网：https://nodejs.p2hp.com/download/

    nodejs的版本不要低于18

    安装完成后在cmd窗口输入 node -v命令即可查看安装的nodejs信息

  • 设置npm源

    由于npm服务器在国外下载比较慢，一般会改为国内的镜像服务器。在cmd窗口输入如下命令

    npm config set registry https://mirrors.huaweicloud.com/repository/npm/  #华为
或
npm config set registry https://registry.npmmirror.com  #阿里

  • 安装 typescript

    npm i -g typescript

    安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

    tsc -v
Version 5.5.3

二、TypeScript 数据类型与变量

typeScript 程序由以下几个部分组成：

  • 模块
  • 函数
  • 变量
  • 语句和表达式
  • 注释

TypeScript 区分大写和小写字符。

1、TypeScript 注释

  • 单行注释 ( // ) − 在 // 后面的文字都是注释内容。
  • 多行注释 (/* */) − 这种注释可以跨越多行。
// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/

2、TypeScript数据类型

  • 基本类型：数字 number、字符串 string、布尔值 boolean、空 null、未定义 undefined、唯一值 symbol、无穷大 bigInt

  • 引用类型：**数组 array、对象 object、**元组 tuple、枚举 enum、函数 function

  • 特殊类型：任意类型 any、任意类型 unknown、void、never

  • 高级类型：联合类型、交叉类型

3、TypeScript 变量

TypeScript 变量的命名规则：

  • 变量名称可以包含数字和字母。
  • 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
  • 变量名不能以数字开头。
语法：
  var [变量名] : [类型] = 值;
示例：
  var uname:string = "Runoob";

声明变量并初始值，但不设置类型，该变量可以是任意类型：

语法：
  var [变量名] = 值;
示例：
  var uname = "Runoob";
a、基本类型
var a: number = 1;
let b: string = 'hello';
const c: boolean = true;
let d: undefined = undefined;
let e: null = null;
b = 100;  // 报错
b、数组

默认情况下，在 TS 中，要求数组内部只能保存同一个类型的数据

let a: number[] = [1, 2, 3];let b: string[] = ['a', 'b'];
c、对象

可以通过 object 来设置对象的类型，但是设置成 object 类型后，不能单独访问对象内部的任意属性。

let a: object = {id: 1,name:'张三'};
console.log(a.id);  // 报错，不能确定 a 身上存在 id 属性

我们更常用的对象约束类型的方式，是针对对象中每一个属性以及每一个属性值的类型都一一进行约束：

let a: { id: number, name: string } = {id: 1,name: '张三'}
console.log(a.id);

如果有某一些属性是可有可无的，可以在约束类型时，在属性名后面添加 ?：

let a: { id: number, name: string, age?: number } = {id: 1,name:'张三',}
d、元组

从代码语法上来看，元组实际上就是数组，但是它和数组的区别在于，元组中可以报错不同类型的数据。

let a: [number, string, number] = [1, '2', 3];

元组语法要求，数组中的每一条数据，都必须对应着一个类型。

e、枚举

当数据中有一些不确定含义的数字时，可以定义一个枚举类型，来描述每一个数字所对应的含义：

enum GenderEnum {woman = 0,man = 1,unknown = 2}

定义好的枚举类型，既可以当作类型来用，也可以当作值来用：

let student: { name: string, gender: GenderEnum } = {name: '张三',gender: GenderEnum.man,}
f、any 和 unknown

any 和 unknown 都可以用来表示任意类型的数据。

let a: any = 1;
a = 'hello';
let b: unknown = 1;
b = 'hello';
let c: boolean = true;
c = a;   // 不报错// 
c = b;   // 报错

any 和 unknown 的区别在于：

  1. any 类型的数据可以再次赋值给其他任意类型；unknown 类型的数据只能赋值给其他的 unknown 或 any；
  2. 数据一旦设置为 any 类型后，会关闭 TS 的类型检查；数据设置为 unknown 后，还是会进行类型检查。
g、void

void，当一个函数内部没有设置返回值时，返回值的类型就是 void：

const foo = (): void => {}
h、never

never 用来表示永远都不会有值的数据的类型：

const foo = (): never => {while(true) { }}

TS 中的函数可以像 JS 中一样的使用，但是 TS 中要求对函数进行类型约束：

  1. 约束参数的类型；
  2. 约束返回值的类型；
  3. 约束函数自身的类型；

三、TypeScript函数

1、基本语法

语法结构：

function 函数名(形参: 参数类型, 形参: 参数类型): 返回值类型 {    
    return 返回值;
}

函数名(数据, 数据);

示例代码：

方式一：
function foo(x: number, y: number): number {    
    return x + y;
};
foo(1, 2);//调用函数foo

方式二：【推荐】
const bar = (x: number, y: number): number => {    
    return x + y;
}
bar(10, 20);//调用函数bar

2、函数参数

a、参数默认值
function foo(x: number, y: number = 0): number {
    return x + y;
};
foo(1, 2);

注意：带有默认值的参数通常放在所有形参的最后。

b、不定参数
const bar = (y: number, ...x: number[]) => {

}
bar(10, 20, 30, 40);

注意：不定参数通常放在所有形参的最后。

c、可选参数
function foo(x: number, y?: number) {
    
};
foo(1);

注意：可选参数通常放在所有形参的最后。

3、函数自身的类型约束

TS 是一个可选的静态的类型系统，可以用来约束变量、函数的参数和返回值。仅需要在变量、函数的参数和返回值位置加上" : 类型 "

  • 变量

    let name:string;

  • 函数

    const bar=(x: number,y: number)=>{
    return x + y;
}
console.log(bar(1,2));

四、TypeScript高级类型

1、类型别名

类型别名的作用，就是对已经存在的类型进行重命名。

type bool = boolean; //为boolean类型取别名bool
let a: bool = true; //使用别名bool做为数据类型

通常，我们可以对一个对象的类型，进行别名配置

type StudentItem = { id: number, name: string, age?: number };
let a: StudentItem = {id: 1,name: '张三',}

2、联合类型

联合类型就是通过 | 来定义多个类型，数据只要匹配多个类型中的任意一个即可

let a: number | string | boolean = 'hello';

当数组中需要包含多个类型的数据时，就可以通过联合类型来设置数组内部数据的类型。

let a: (number | string)[] = [1, 2, 3, '4', '5']

联合类型和类型别名可以一起使用

type NumStr = number | string;
let a: NumStr[] = [1, 2, 3, '4', '5'];
let b: NumStr = 'hello';

3、交叉类型

交叉类型就是通过 & 来将多个类型合并成一个类型。

type Person = {id: number,name: string,age: number};
type Address = {province: string,city: string};
let student: Person & Address = {id: 1,name: '张三',age: 20,province:'四川',city: '成都'};

注意：交叉类型通常只能用来对象类型身上，将多个对象合并成一个对象。

交叉类型也可以和类型别名一起使用

type Person = {id: number,name: string,age: number};
type Address = {province: string,city: string,};
type StudentItem = Person & Address;
let student: StudentItem = {id: 1,name:'张三',age: 20,province:'四川',city:'成都'};

五、类型断言

类型断言是一种方式，可以手动指定变量的类型，非空断言是一种类型断言的特殊形式，

类型断言，指的是在某些特殊情况下，我们比 TS 更加确定数据的类型。因此，这种时候我们可以通过断言的方式来断定数据的类型。

1、基本语法

断言提供了两种语法：

  1. <>
  2. as：推荐用 as

语法结构如下：

<类型>数据 as 类型

示例代码：

let arr: number[] = [1, 2, 3, 4];   //定义数组

//查找数组中>=2的元素，返回的值为number
const result = arr.find((item) => {
	return item >= 2;
})
改为如下则会报错，因为ts不知道结果的类型
const result: number = arr.find((item) => {
	return item >= 2;
})

上面的情况我们很确定结果的类型number但是ts无法确定，可以使用断言确定其返回值果就是number类型
const result: number=<number>arr.find((item)=>{
	return item>=2
})

也可以写成如下形式
const result: number = arr.find((item) => {
    return item >= 2;
}) as number;

2、非空断言

TS 中可以通过 ! 来对数据进行非空断言，断定数据不会是 undefined 或 null。

语法结构：

数据!

示例代码：

const result: number = arr.find((item) => {
    return item >= 2;
})!

六、接口 interface

1、接口和对象

接口，可以用来定义对象或函数的类型。

a、基本语法

  • 语法

    interface 接口名 {
    属性名: 数据类型;
    属性名: 数据类型;
}

  • 示例 ：

    	//定义接口
    interface StudentItem {
        id: number;
        name: string;
        age: number;
    }

	//将接口做为数据类型
    const student: StudentItem = {
        id: 1,
        name: '张三',
        age: 20,
    }
b、可选属性

在接口中使用？修饰的属性在使用时可以不指定值

  //定义接口
  interface StudentItem {
        id: number;
        name: string;
        age?: number;
    }
    
    //创建对象
    const student: StudentItem = {
        id: 1,
        name: '张三',
    }
c、只读属性

在接口中使用readonly 修饰的属性不能重新赋值

    //定义接口
    interface StudentItem {
        readonly id: number; //id属性被设置为只读
        name: string;
        age: number;
    }
    
    //创建对象
    const student: StudentItem = {
        id: 1,
        name: '张三',
        age: 20,
    }
    
    //改变对象中属性的值
    student.id = 2;  // 报错

2、接口和函数

语法：
    interface 接口名 {
        属性名: 数据类型;
        属性名: 数据类型;
    }

示例:
    interface BarFn {
        (x: number, y: number): number
    }
    
    const bar: BarFn = (x, y) => {
        return x + y;
    }
    
    bar(1, 2);

3、接口和接口

在一个接口中，可以去使用另一个接口，同理，也可以使用当前接口自身。

interface MenuItem {
    id: number,
    title: string,
    children?: MenuItem[]
}

const menusData: MenuItem[] = [
    {
        id: 1,
        title: '首页'
    },
    {
        id: 2,
        title: '用户管理',
        children: [
            {
                id: 3,
                title: '用户列表'
            },
            {
                id: 4,
                title: '用户分组'
            }
        ]
    }
]
蜗牛学苑_武汉
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超细致的TypeScript入门与实战
weixin_43805705的博客
08-22 1418
本文向大家介绍TypeScript基础知识及用法，帮助大家快速了解，在前端项目中使用这门技术。TypeScript的类型推断跟 VS Code 的良好搭配让代码效率有了极大提升。静态类型检测，会提示一些潜在的问题，使得开发者代码更严谨，低级错误早发现早解决。同时TypeScript类型定义使得代码的可读性增强，统一规范，可有效降低项目维护成本。
TypeScript入门指南案例教程.zip
07-17
通过学习这个TypeScript入门指南案例教程，你将了解到如何在实际项目中应用上述概念，逐步掌握TypeScript的使用，从而提高开发效率，降低维护成本。同时，熟悉TypeScript也能为参与诸如Angular、React或Vue等现代...
TypeScript入门教程
SoSalty的博客
03-06 747
TypeScript 是由微软公司在 2012 年正式发布，现在也有 8 年的不断更新和维护了，TypeScript 的成长速度是非常快的，现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集，也就是说 TypeScript 是建立在 JavaScript 之上的，最后都会转变成 JavaScript。TypeScript 的一个最主要特点就是可以定义静态类型，英文是 Static Typing。那到底是什么意思呢？
TypeScript入门基础
Better_Xing的博客
11-02 1382
TypeScript入门基础
TypeScript入门案例
技术记录薄
10-17 686
TypeScript的安装与使用
TypeScript 入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-27 1787
安装TypeScript：首先，你需要在本地安装TypeScript。你可以通过npm（Node Package Manager）来安装TypeScript。创建TypeScript文件：创建一个新的文件，例如hello.ts，并在文件中编写TypeScript代码。编译TypeScript文件：这将会在同一目录下生成一个hello.js的JavaScript文件。类型注解和类型推断：TypeScript是一种静态类型的编程语言，它引入了类型注解和类型推断的概念。
typescript入门
\@_@/?的博客
11-29 43
图片来源: 黑马程序员—鸿蒙开发教程—typescript入门。
TypeScript入门教程——pdf文档
03-16
**TypeScript 入门教程** TypeScript 是一种由微软开发的强类型、静态类型的超集语言，它在 JavaScript 的基础上增加了许多新特性，如...阅读提供的 "TypeScript入门教程——pdf文档"，将能更全面地掌握这些知识点。
TypeScript入门指南初学者必备.zip
07-22
**TypeScript入门指南初学者必备** TypeScript是JavaScript的一个超集，由Microsoft开发，它引入了静态类型系统和一些高级编程特性，提升了代码的可维护性和可读性，尤其适合大型项目开发。对于初学者来说，掌握...
vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用
白白的博客
07-15 632
vue检测页面手指滑动距离，执行回调函数，使用混入mixin的语法，多个组件都可以使用
Next.js静态导出与动态路由优化
天涯学馆
07-20 1045
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 556
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 972
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 882
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 976
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 485
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值