东东吖带你打通全栈,TypeScript快速入门!

前言

之前我们讲到了,如何做一个全栈项目,但是我们并没有使用ts,所有今天我们主要了解ts相关的基础知识。

还不了解之前的全栈项目的,可以先去看我之前的文章,本文也会放在全栈专栏。需要进技术交流群的可以加我微信,有聊前端技术的群,有聊g技术的全栈群,也有聊生活的群。我的微信:fangdongdong_25

TypeScript是一种由微软开发的开源编程语言,它是JavaScript的超集,可以编译成纯JavaScript代码。TypeScript提供了静态类型检查、类、接口、泛型等特性,使得JavaScript代码更加可靠、易于维护。

原始类型和对象类型

TypeScript中的原始类型包括:number、string、boolean、null、undefined和symbol。对象类型包括:object、array、function、class、interface等。

let num: number = 123;
let str: string = 'hello';
let bool: boolean = true;
let nul: null = null;
let und: undefined = undefined;
let sym: symbol = Symbol();

let obj: object = { name: 'Tom' };
let arr: number[] = [1, 2, 3];
let func: (x: number, y: number) => number = function(x, y) { return x + y; };
class Person {}
interface Animal {}

数组的类型标注

TypeScript中的数组类型标注有两种方式:类型[]和Array<类型>

let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3];

## 元组

元组是一种特殊的数组类型,它可以指定每个元素的类型和个数。

let tuple: [string, number] = ['Tom', 18];

 对象的类型标注

对象的类型标注可以使用接口或类型别名。

interface Person {
  name: string;
  age: number;
}

type Animal = {
  name: string;
  age: number;
};

let person: Person = { name: 'Tom', age: 18 };
let animal: Animal = { name: 'Cat', age: 2 };

 修饰接口属性

接口的属性可以使用readonly、?、[propName: string]等修饰符。

interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

let person: Person = { id: 1, name: 'Tom' };
person.name = 'Jerry';
person.age = 18;
person.gender = 'male';

 类型断言、非空断言或可选链

类型断言可以将一个变量指定为某个类型,非空断言可以将一个变量指定为非空值,可选链可以避免访问空值的属性或方法。

let str: any = 'hello';
let len1: number = (<string>str).length;
let len2: number = (str as string).length;

let obj: { name?: string } = {};
let name1: string = obj.name!;
let name2: string = obj?.name;

##  类型别名

类型别名可以给一个类型起一个新的名字,方便重复使用。

type Name = string;
type Age = number;

let name: Name = 'Tom';
let age: Age = 18;

类型查询操作符

类型查询操作符可以获取一个变量的类型。

let obj: { name: string } = { name: 'Tom' };
type Person = typeof obj;

泛型

泛型可以让函数或类适用于多种类型。

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

let num: number = identity(123);
let str: string = identity('hello');

以上是TypeScript的基础知识介绍,希望对新手有所帮助。如果您需要进一步了解TypeScript,可以参考官方文档:www.typescriptlang.org/docs/ ,中文文档为 :www.tslang.cn/docs/home.h…

官方文档提供了详细的TypeScript教程和参考手册,包括基础类型、变量声明、接口、类、函数、泛型、枚举、类型推断、类型兼容性、高级类型、命名空间、模块、装饰器、Mixins等内容。此外,官方文档还提供了TypeScript的工具和编辑器支持,如tsconfig.json、tsc、ts-node、VS Code等。

原文链接:https://juejin.cn/post/7221966100807319613 作者:东东吖

(0)
上一篇 2023年4月14日 上午11:14
下一篇 2023年4月15日 上午10:05

相关推荐

发表回复

登录后才能评论