最近学习的TypeScript知识点

TypeScript是什么,与JavaScript的区别

百度会说:
TypeScript是一种由微软开发的超集JavaScript的强类型编程语言。它在JavaScript的基础上添加了可选的静态类型类等高级特性,使得开发人员能够更容易地编写大型JavaScript应用程序。由于它是JavaScript的超集,所以所有的JavaScript代码都是合法的TypeScript代码。

也就是说TypeScript是对JavaScript的拓展
TypeScript更类似后端的编程语言,还拥有面向对象语言的属性
而JavaScript更像文本语言
举例:

JavaScript

// JavaScript

// 定义一个变量x,并将其初始化为整数10
let x = 10;

// 现在将x的值更改为字符串"JavaScript"
x = "JavaScript";
//也就是x可以被任意赋值,无论是整形还是字符串类型

TypeScript

// TypeScript

// 定义一个变量x,指定为整型,并将其初始化为10
let x: number = 10;

// 尝试将x的值更改为字符串"hello"
// 这会导致编译错误,因为x已经被指定为整型,不能赋值为字符串
x = "hello";

所以TypeScript有更强的编程语言的特性

typeScript和angular有什么区别

TypeScript是一种编程语言
而Angular是一个Web框架(由Google开发的Web前端框架),它使用TypeScript作为其主要开发语言,但也可以使用JavaScript或其他类型的语言。

tsc

TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。
要编译 TypeScript 文件,可使用如下命令:

tsc filename.ts

一旦编译成功,就会在相同目录下生成一个同名 js 文件

基础类型 number string boolen

在TypeScript中,有三种基本的类型:数字、字符串和布尔值。使用关键字let声明一个变量,并指定它的类型:

let age: number = 25;
let name: string = "John Doe";
let isStudent: boolean = true;

复杂类型

除了基本类型,TypeScript还支持复杂类型
包括数组对象。数组类型可以指定为某种类型的数组,如下所示:

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["John", "Jane", "Joe"];

可以通过下标来访问数组中的元素,并调用数组的方法:

console.log(numbers[0]); // 1
console.log(numbers.length); // 5

names.push("Alice");
console.log(names); // ["John", "Jane", "Joe", "Alice"]

Array数组

Array数组是JavaScript语言中的一种数据结构,它允许你将多个值存储在一个集合中。Array数组可以包含任意类型的值,并且可以通过数字索引来访问数组中的元素。

可以定义一个Array数组,并使用下标的形式添加元素,如下所示:

let arr = [];

arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

可以使用下标来访问数组中的元素,如下所示:

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

也可以使用for循环遍历Array数组,如下所示:

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 1
// 2
// 3

元组 混合类型数组

元组是TypeScript语言中的一种特殊数据类型,它允许你将多个不同类型的值存储在一个集合中。元组的每个元素都有自己的类型,并且可以通过数字索引来访问。

let tuple: [string, number, boolean] = ["hello", 42, true];

按下标输出里面的内容

console.log(tuple[0]); // "hello"
console.log(tuple[1]); // 42
console.log(tuple[2]); // true

也可以使用解构赋值的方式来将元组的元素赋值给多个变量,
也就是,不按照1下标来读取,而是自己给他命名如下所示:

let [word, num, flag] = tuple;
console.log(word); // "hello"
console.log(num); // 42
console.log(flag); // true

Map对象(存储key和value)

Map对象是JavaScript语言中的一种数据结构,它允许你将键值对存储在一个集合中。与普通的对象不同,Map对象允许你使用任意类型的值作为键,而不仅仅是字符串。

let map = new Map();

map.set(1, "one");
map.set(2, "two");
map.set(3, "three");

然后,你可以使用键来访问Map中的元素,如下所示:

console.log(map.get(1)); // one
console.log(map.get(2)); // two
console.log(map.get(3)); // three

使用for来遍历map

**for (let key of map.keys()) {
  console.log(key);
}
// 1
// 2
// 3
for (let value of map.values()) {
  console.log(value);
}
// one
// two
// three
for (let entry of map.entries()) {
  console.log(entry);
}
// [1, "one"]
// [2, "two"]
// [3, "three"]

创建基本类型的对象并指明属性

对象类型可以指定为某种类型的对象,并指定它的属性和属性类型,如下所示:

let person: {
  name: string;
  age: number;
  isStudent: boolean;
} = {
  name: "John Doe",
  age: 25,
  isStudent: true
};

创建函数

function add(x: number, y: number): number {
  return x + y;
}

类和接口

class Person {
  name: string;
  age: number;
  isStudent: boolean;

  constructor(name: string, age: number, isStudent: boolean) {
    this.name = name;
    this.age = age;
    this.isStudent = isStudent;
  }
//set方法

  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

用let继承类

let john = new Person("John Doe", 25, true);
john.greet(); // Hi, my name is John Doe

let jane = new Person("Jane Smith", 30, false);
jane.greet(); // Hi, my name is Jane Smith

接口

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
  greet(): void;
}

用let继承接口

let john: Person = {
  name: "John Doe",
  age: 25,
  isStudent: true,
  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

命令空间

命名空间是TypeScript语言中的一种特殊语法,它允许你将相关的代码组织到单独的模块中。命名空间可以解决同名类型定义的冲突问题,并且可以通过编译器的模块系统来处理命名空间之间的依赖关系。

代码实例,创建的命名空间
使用了export关键字来导出定义的类型,就可以在其它地方使用。

namespace MyNamespace {
  export interface MyInterface {
    // ...
  }

  export class MyClass {
    // ...
  }

  export function myFunction() {
    // ...
  }
}

其它模块中通过命名空间的名字来访问它定义的类型,实例:

import { MyInterface, MyClass, myFunction } from "./my-namespace";

let obj: MyInterface = { /* ... */ };
let instance = new MyClass();
myFunction();

补充:

在不同的编程语言中,对象的概念和实现方式可能会有所不同。

比如在 C++ 中,对象是一种类的实例,而在 JavaScript 中,对象是一种独立的数据类型。在 C++ 中,对象通常由类定义,而在 JavaScript 中,对象可以直接定义和创建。

不同的语言还有不同的特性和实现细节,比如说C++中有继承和重载等特性,而javascript中没有。

在 JavaScript 中,对象是一种类型,它可以存储多个属性和值,每个属性都可以有不同的类型。一个对象可以由多个键值对组成,键值对之间由逗号分隔。一个对象是由一个或多个键值对组成的,键值对之间由逗号分隔,键和值之间由冒号分隔。

对象可以用{}包含,例如:
let person = { name: “John”, age: 30 };

这样的话就能够用person.name或person[“name”]来访问"John"了。

对象可以用来存储复杂的数据结构,例如一个用户的信息,一个商品的信息等。

对象在不同的编程语言中可能有着不同的实现方式,但是基本的概念都是类似的。

在 TypeScript 中,函数的返回值可以通过在函数名后面添加冒号和类型来进行类型定义。

function add(a: number, b: number): number {
  return a + b;
}

let result: number = add(1, 2);
console.log(result); // output: 3

冒号后面的函数的返回值类型。这样,在调用函数时,编译器会检查其返回值是否符合类型,并在不符合时抛出错误。这样就能保证代码的类型安全性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

不惭_

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

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

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

打赏作者

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

抵扣说明:

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

余额充值