前言
之前我们讲到了,如何做一个全栈项目,但是我们并没有使用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 作者:东东吖