1、TypeScript是什么?
ts官网(https://www.typescriptlang.org/docs/handbook)原话是这样说的:
TypeScript is JavaScript with syntax for types.
TypeScript is a strongly typed programming language which
builds on JavaScript giving you better tooling at any scale.
意思是:typeScript是带有类型语法的JavaScript,后一句慢慢悟。为什么这么说呢?
TypeScript stands in an unusual relationship to JavaScript.
TypeScript offers all of JavaScript’s features, and an additional
layer on top of these: TypeScript’s type system.
typeScript和JavaScript是有不同寻常的关系,它包括了JavaScript的所有特性,并在顶层加了一层typeScript的类型系统。用数学集合来说:就是ts是js的超集,js是ts的子集,ts多出的东西就是类型系统。
2、TS基础知识点:
1. 类型推断(Types by Inference):
2. 定义类型(Defining Types):
当我们创建一个对象时:
const user = {
name: "Hayes",
id: 0,
};
使用ts的interface这个对象定义:
interface User {
name: string;
id: number;
}
使用interface创建对象:
const user: User = {
name: "Hayes",
id: 0,
};
当这样使用interface时,类型报错问题:
interface User {
name: string;
id: number;
}
const user: User = {
username: 'hh'
}
3. interface定义类(class):
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount('hh', 1);
还可以使用interface代替参数和返回格式:
function getAdminUser(): User {//返回User类型的参数
//...
}
function deleteUser(user: User) {//传User类型的参数
// ...
}
4. TS的元类型:
boolean, bigint, null, number, string, symbol and undefined,
last : void(return undefined or no return value)
5. Interfaces and Types
a.Types
type MyBool = true | false;
Types 构成: 分为联合构成和泛型。
b.联合类型(unions)
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
//联合类型可以处理不同的类型
function getLength(obj: string | string[]) {
//该函数可以接收字符串或者字符串数组
return obj.length;
}
- 变量条件判断常用:
typeof x === "string"
//判断x的类型是不是字符串
typeof x === "number"
//判断x的类型是不是数字类型
typeof x === "boolean"
//判断x的类型是不是Boolean类型
typeof x === "undefined"
//判断x的类型是不是undefined
typeof x === "function"
//判断x的类型是不是函数
Array.isArray(x)
//判断x的类型是不是数组
function利用unions和类型判断:
function wrapInArray(obj: string | string[]) {
if (typeof obj === "string") {
return [obj]; // (parameter) obj: string
}
return obj; // (parameter) obj: string[]
}
c.泛型(generics)
泛型主要是能提供一种变量型的类型,最常见的例子是数组类型,如果该数组类型没有带泛型,则该数组的元素可以是any
,但是如果该数组带了泛型,则该数组的元素只能是泛型描述的类型元素。
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
泛型的好处是可以根据它的定义来的:它可以声明自己定义的类型:
interface Backpack<Type> {
add: (obj: Type) => void;
get: () => Type;
}
// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;
// object is a string, because we declared it above as the variable part of Backpack.
const object = backpack.get();
// Since the backpack variable is a string, you can't pass a number to the add function.
backpack.add(23);
Argument of type 'number' is not assignable to parameter of type 'string'.
d.结构类型(Structural Type System)
在一个文件里,如果有两个对象有相同的类型,可以定义相同的结构类型:
interface Point {
x: number;
y: number;
}
function logPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
const point3 = { x: 12, y: 26, z: 89 };
logPoint(point3); // logs "12, 26"
const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // logs "33, 3"
const color = { hex: "#187ABF" };
logPoint(color);
/**
Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'.
Type '{ hex: string; }' is missing the following properties from type 'Point': x, y
*/
class和对象:
class VirtualPoint {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
const newVPoint = new VirtualPoint(13, 56);
logPoint(newVPoint); // logs "13, 56"