TypeScript 这篇就够了

已于 2024-02-22 15:26:32 修改
阅读量1k 收藏 23
点赞数 48
文章标签： typescript javascript 前端 前端框架
于 2024-02-22 15:25:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69183322/article/details/136234444
版权

目录

一、TypeScript的概述

二、TypeScript 官网

2.1TypeScript 官网地址

2.2安装TypeScript

三、TypeScript 语法

3.1 基本语法

3.2 类型系统

3.3 语句

3.4 函数

3.5 类和模块

3.6 高级特性

3.7 类型检查

一、TypeScript的概述

        TypeScript 是一种由微软开发和维护的开源编程语言。它是 JavaScript 的一个带类型系统的超集，编译为普通的 JavaScript，用于开发大型应用程序。TypeScript 为 JavaScript 语言添加了可选的静态类型、类、接口等特性，为大型团队和项目提供了更好的开发体验。
以下是 TypeScript 的关键特性：
        1. 静态类型：TypeScript 强制执行静态类型，这有助于在编译时捕捉错误，而不是在运行时，这可以使得调试和维护代码更加容易。
        2. 类型注解：开发者为变量、函数参数和返回类型提供类型信息，TypeScript 使用这些信息进行类型检查。
        3. 类和模块：TypeScript 支持 ES6 类和模块，这使得代码的组织和可重用性更好。
        4. 接口：TypeScript 使用接口来定义对象的结构和函数的形状，从而实现更健壮的 API 和更好的文档。
        5. 泛型：TypeScript 支持泛型，允许开发者创建可以与不同类型一起工作的组件，从而提高代码的重用性和类型安全性。
        6. 兼容性：TypeScript 旨在与现有的 JavaScript 代码和库兼容，允许开发者在项目中逐步采用 TypeScript。
        7. 工具链：TypeScript 拥有丰富的工具链，包括代码检查器、格式化器和包管理器，帮助维护代码质量和促进协作。

二、TypeScript 官网

2.1TypeScript 官网地址

TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)icon-default.png?t=N7T8https://www.tslang.cn/

2.2安装TypeScript

npm install -g typescript

三、TypeScript 语法


3.1 基本语法

  1. - 类型注解
  2. - 变量声明
  3. - 函数声明
  4. - 类声明
  5. - 接口
  6. - 泛型
  7. - 枚举
  8. - 类型推断

示例：

// 类型注解
let stringVar: string = "Hello, World!";
let numberVar: number = 42;
let boolVar: boolean = true;

// 变量声明
let uninitiatedVar: any; // 没有初始化的变量
uninitiatedVar = "Hello, TypeScript!";

// 函数声明
function add(a: number, b: number): number {
  return a + b;
}

// 箭头函数
const subtract = (a: number, b: number): number => {
  return a - b;
};

// 类声明
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(): string {
    return "Hello, " + this.greeting;
  }
}

// 实例化类
let greeter = new Greeter("TypeScript");
console.log(greeter.greet());

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

// 实现接口
function printPerson(person: Person): void {
  console.log(person.name + " is " + person.age + " years old.");
}

// 泛型
function identity<T>(arg: T): T {
  return arg;
}

// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 类型推断
let inferredVar = 42; // 类型为 number
let anotherInferredVar = "This is a string"; // 类型为 string

// 类型守卫
function isString(value: any): value is string {
  return typeof value === "string";
}

let str: string | number = "This is a string";
if (isString(str)) {
  console.log(str.toUpperCase());
} else {
  console.log(str + 10);
}

// 箭头函数使用类型守卫
const toUpperCase = (s: string): string => s.toUpperCase();

// 模块导入
import { Greeter } from './Greeter';

// 使用模块
let greeterFromModule = new Greeter("TypeScript");
console.log(greeterFromModule.greet());

3.2 类型系统

  1. - number
  2. - string
  3. - boolean
  4. - null 和 undefined
  5. - 数组和元组
  6. - 枚举类型
  7. - 联合类型
  8. - 交叉类型
  9. - 类型别名
  10. - 泛型类型

// 基本类型
let numberVar: number = 42;
let stringVar: string = "Hello, TypeScript!";
let boolVar: boolean = true;

// null 和 undefined
let nullVar: null = null;
let undefinedVar: undefined = undefined;

// 数组和元组
let numberArray: number[] = [1, 2, 3];
let stringArray: string[] = ["Hello", "World"];

// 元组类型
let tupleType: [string, number] = ["Hello", 123];

// 枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 联合类型
let unionType: string | number = "Hello";

// 交叉类型
interface PartialPerson {
  name?: string;
  age?: number;
}

let partialPerson: PartialPerson = { name: "Alice" };

// 类型别名
type Point = { x: number; y: number };
let point: Point = { x: 1, y: 2 };

// 泛型类型
function identity<T>(arg: T): T {
  return arg;
}

let identityFunction: <T>(arg: T) => T = identity;

// 泛型类
class Box<T> {
  private content: T;

  constructor(content: T) {
    this.content = content;
  }

  getContent(): T {
    return this.content;
  }
}

let box = new Box<string>("Hello, World!");
console.log(box.getContent());

// 泛型接口
interface Container<T> {
  getContent(): T;
}

class MyArray<T> implements Container<T> {
  private data: T[];

  constructor(initialData: T[]) {
    this.data = initialData;
  }

  getContent(): T {
    return this.data[0];
  }
}

let myArray = new MyArray<string>(["Hello", "World"]);
console.log(myArray.getContent());


3.3 语句

  1. - 条件语句（if, switch）
  2. - 循环语句（for, while, do-while）
  3. - 跳转语句（break, continue, return）
  4. - 声明语句（var, let, const）
  5. - 空语句（;）
  6. - 赋值语句
  7. - 表达式语句
  8. - 异步语句（async function, await）

示例：

// 条件语句
if (true) {
  console.log("条件为真");
} else {
  console.log("条件为假");
}

// 使用 switch 语句
switch (true) {
  case true:
    console.log("条件为真");
    break;
  case false:
    console.log("条件为假");
    break;
}

// 循环语句
// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while 循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do-while 循环
i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

// 跳转语句
// break 跳出循环
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

// continue 跳过当前循环迭代
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

// return 退出函数
function myFunction() {
  if (true) {
    return "Hello, World!";
  }
  console.log("This line won't be executed");
}

// 声明语句
let varDeclaration: number = 42;
const constDeclaration: string = "Hello";

// 空语句
// 可以用作占位符
;

// 赋值语句
let assignement = 42;

// 表达式语句
console.log("Expression statement: " + (2 + 2));

// 异步语句
// async 函数
async function asyncGreet() {
  return "Hello, Async!";
}

// await 表达式
async function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

fetchData();

3.4 函数

  1. - 函数声明
  2. - 箭头函数
  3. - 函数类型
  4. - 匿名函数
  5. - 构造函数
  6. - 函数表达式
  7. - 箭头函数表达式

示例：

// 函数声明
function add(x: number, y: number): number {
  return x + y;
}

// 调用函数
let result = add(1, 2);
console.log(result); // 输出： 3

// 箭头函数
const subtract = (x: number, y: number): number => {
  return x - y;
};

// 调用箭头函数
result = subtract(10, 5);
console.log(result); // 输出： 5

// 函数类型
type MyFunction = (x: number, y: number) => number;

// 匿名函数
const myAnonymousFunction: MyFunction = function(x, y) {
  return x * y;
};

// 调用匿名函数
result = myAnonymousFunction(2, 3);
console.log(result); // 输出： 6

// 构造函数
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(): string {
    return "Hello, " + this.greeting;
  }
}

// 创建构造函数的实例
let greeter = new Greeter("TypeScript");
console.log(greeter.greet()); // 输出： Hello, TypeScript

// 函数表达式
const myFunctionExpression: MyFunction = function(x, y) {
  return x + y;
};

// 调用函数表达式
result = myFunctionExpression(4, 5);
console.log(result); // 输出： 9

// 箭头函数表达式
const myArrowFunctionExpression: MyFunction = (x, y) => {
  return x - y;
};

// 调用箭头函数表达式
result = myArrowFunctionExpression(10, 2);
console.log(result); // 输出： 8

3.5 类和模块

  1. - 类声明
  2. - 构造函数
  3. - 类继承
  4. - 模块导入导出
  5. - 命名空间

示例：

// 类声明
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(): string {
    return "Hello, " + this.greeting;
  }
}

// 构造函数
let greeter = new Greeter("TypeScript");
console.log(greeter.greet()); // 输出： Hello, TypeScript

// 类继承
class Greeter2 extends Greeter {
  greeting2: string;
  constructor(message: string, greeting2: string) {
    super(message); // 调用父类的构造函数
    this.greeting2 = greeting2;
  }
  greet2(): string {
    return "Hello, " + this.greeting2;
  }
}

let greeter2 = new Greeter2("TypeScript", "World");
console.log(greeter2.greet()); // 输出： Hello, TypeScript
console.log(greeter2.greet2()); // 输出： Hello, World

// 模块导入导出
// 定义一个模块
export class Greeter3 {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(): string {
    return "Hello, " + this.greeting;
  }
}

// 导入模块
import { Greeter3 } from "./Greeter3"; // 假设Greeter3模块在当前目录下的Greeter3.ts文件中

let greeter3 = new Greeter3("TypeScript");
console.log(greeter3.greet()); // 输出： Hello, TypeScript

// 命名空间
namespace MyNamespace {
  export class Greeter4 {
    greeting: string;
    constructor(message: string) {
      this.greeting = message;
    }
    greet(): string {
      return "Hello, " + this.greeting;
    }
  }
}

// 导入命名空间
import { Greeter4 } from "./MyNamespace"; // 假设MyNamespace模块在当前目录下的MyNamespace.ts文件中

let greeter4 = new MyNamespace.Greeter4("TypeScript");
console.log(greeter4.greet()); // 输出： Hello, TypeScript

3.6 高级特性

  1. - 装饰器（Decorators）
  2. - 代理（Proxies）
  3. - Reflect API
  4. - 解构赋值
  5. - 模板字符串
  6. - 默认参数
  7. - 可选链（Optional Chaining）
  8. - 扩展运算符（Spread Operator）
  9. - Promise 和 async/await

示例：

// 装饰器（Decorators）
@myDecorator
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(): string {
    return "Hello, " + this.greeting;
  }
}

function myDecorator(constructor: Function) {
  console.log("Decorator called for " + constructor.name);
}

// 代理（Proxies）
const handler = {
  get(target, prop) {
    return target[prop] * 2;
  }
};

const numberProxy = new Proxy({}, handler);
numberProxy.a = 5;
console.log(numberProxy.a); // 输出： 10

// Reflect API
let obj = { a: 1, b: 2 };
console.log(Reflect.has(obj, "a")); // 输出： true

// 解构赋值
let { a, b } = obj;
console.log(a, b); // 输出： 1 2

// 模板字符串
const name = "TypeScript";
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出： Hello, TypeScript!

// 默认参数
function greet(name: string, greeting: string = "Hello") {
  console.log(greeting, name);
}
greet("TypeScript"); // 输出： Hello TypeScript

// 可选链（Optional Chaining）
const user = {
  info: {
    name: "TypeScript",
    age: 5
  }
};
console.log(user.info.name); // 输出： TypeScript
console.log(user?.info?.name); // 输出： TypeScript

// 扩展运算符（Spread Operator）
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出： [1, 2, 3, 4, 5]

// Promise 和 async/await
async function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  return data;
}

fetchData().then((data) => {
  console.log(data);
});

3.7 类型检查

  1. - 类型断言
  2. - 类型守卫（type guards）
  3. - 类型查询（type queries）
  4. - 索引签名
  5. - 映射类型
  6. - 条件类型

示例：

// 类型断言
const myNumber: number = 42;
const myString: string = myNumber.toString(); // 类型断言

// 类型守卫（type guards）
function isString(value: any): value is string {
  return typeof value === "string";
}

function printLength(value: any) {
  if (isString(value)) {
    console.log(value.length);
  } else {
    console.log("Not a string");
  }
}

printLength("Hello"); // 输出： 5
printLength(123); // 输出： Not a string

// 类型查询（type queries）
const myVar: any = "Hello, World!";
const length: number = (myVar as string).length; // 类型查询

// 索引签名
interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // 输出： Hello

// 映射类型
type MyMapType = {
  [key: string]: number;
};

const myMap: MyMapType = {
  a: 1,
  b: 2
};

// 条件类型
type IfTrue<T, TResult extends true> = T extends true ? TResult : never;
type MyConditionalType = IfTrue<true, string>; // string

type IfFalse<T, TResult extends false> = T extends false ? TResult : never;
type MySecondConditionalType = IfFalse<false, number>; // number

探索星辰大海
关注
TypeScript 入门看这一篇就够了！
张旭乾 - 全栈工程师/海归
06-09 1690
目录这里写目录标题简介什么是 TypeScript为什么用 TypeScript编写和运行 TS 代码Node TSCDenotsconfig.json基本语法基本类型隐式显式组合类型类型别名对象类型(interface)接口作为函数参数类型数组类型泛型tuple（元组）总结 简介 我第一次使用 TypeScript 是16年在读研的时候，学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言，没想到还能这么通用。后来在写作业的时候，发现 Ty
Vue3+TypeScript？看这一篇就够了
m0_67266171的博客
03-01 3415
1、TypeScript快速上手 1.1 初识 TypeScript TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。 TypeScript扩展了J
TypeScript这一片就够了！
qq_75069372的博客
04-07 872
typescript 泛型 接口 枚举 类 类型别名
学习typescript这一章就够了
qq_37872192的博客
03-10 407
因为本人主要是分享使用h5游戏引擎进行开发方面的小知识，所以此教程主要是针对一直使用javascript开发想尝试使用typescript作为游戏开发语言的同学，所以这里只讲解开发中最常用的ts基础语法，保证看完本章之后能够看懂并开发cocos creator/laya air游戏引擎的Typescript代码，要求读者有javascript基础并了解ES6特性。除了本章内容外ts还有很多其他的但...
学习TypeScript4这一篇就够了
热门推荐
轻松的小希
11-25 3万+
目录第一章 TypeScript4简介1.1、TypeScript4简介1.2、TypeScript4安装1.3、TypeScript4项目初始化1.4、TypeScript4开发工具第二章 TypeScript4数据类型2.1、布尔类型2.2、数字类型2.3、字符串类型2.4、数组类型2.5、元组类型2.6、枚举类型2.7、null类型2.8、undefined类型2.9、any类型2.10、void类型2.11、never类型2.12、组合类型第三章 TypeScript4函数3.1、函数定义3.2、函
【TypeScript】TS 看这一篇就够了
一个前端开发者
02-06 5498
目标：能够理解TypeScript中有哪些数据类型可以将 TS 中的常用基础类型细分为两类：JS 已有类型原始类型，简单类型（复杂数据类型（数组，对象，函数等）TS 新增类型联合类型自定义类型（类型别名）接口元组字面量类型枚举void泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中需求：创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)
ts（typescript）看这篇就够了
05-06 1151
自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。symbol类型的值是通过Symbol构造函数创建的。// 可选的字符串keySymbols是不可改变且唯一的。// falsesymbols是唯一的像字符串一样，symbols也可以被用做对象属性的键。// "value"Symbols也可以与计算出的属性名声明相结合来声明对象的属性和类成员。// "C"我们提过使用var。
TypeScript看这篇就够了
qq_43733543的博客
06-09 979
TypeScript看这篇就够了
上手TypeScript，这一篇文章就够了
前端蜗牛君
05-04 1265
本文知识图谱分基础、进阶和实战三个部分，分别如下： 这三份知识图谱里罗列的知识看似很多，实际上除了进阶部分的泛型、高级类型（二）和实战部分需要稍微费点脑细胞外，其他的都很好理解。 本文罗列的知识点比官方文档精简，但基本能覆盖日常开发需要用的 TS 知识，学完之后应付开发完全没问题。 引言 但我其实只了解了 TS 一些很零碎的概念，因为日常工作是一个拧螺丝的过程，只需要把别人的代码复制粘贴过来能跑就行，我不必知道某个类型为什么要这么写。 如今工作快3年了，我还是只停留在会用的阶段，虽然这也没有影响我正常
angular2入门，就这一篇就够了
01-27
Angular2.x是在2016年9月发布，基于当时的新标准ECMAScript 6(ES6)进行开发，这使得它与Angular1.x有着显著的区别，犹如Java与JavaScript之间的差异，学习Angular2.x意味着需要掌握全新的编程思想和技术栈。...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2008
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4431
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
vue上传预览CAD文件
只会写bug
09-24 557
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 824
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 215
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
vue单点登录异步执行请求https://xxx.com获取并处理数据
最新发布
m0_65360496的博客
09-27 109
vue单点登录异步执行请求https://xxx.com获取并处理数据
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 360
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
PlayerYK的专栏
09-25 194
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
"TypeScript 基础篇学习文档总结与完结
TypeScript 学习文档-基础篇（完结） 本文档为TypeScript初学者提供了全面的基础知识，从初识TypeScript，到为什么使用TypeScript，再到常用类型的介绍，都进行了详细的讲解。内容包括TypeScript的基本概念、特点、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

探索星辰大海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值