在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、基础类型1、布尔类型boolean: let isDone: boolean = false;
2、数字类型number 3、字符类型string 4、Symbol 类型 const sym = Symbol();
let obj = {
[sym]: "***",
};
5、数组类型(无关键字): TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 (1)第一种,可以在元素类型后面接上 // 定义存储各种类型数据的数组时
let arrayList: any[] = [1, false, 'any'];
(2)第二种方式是使用数组泛型, let list: Array<number> = [1, 2, 3];
6、元组 Tuple: 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。 使用元组时,必须提供每个属性的值。在元组初始化的时候,我们还必须提供每个属性的值,不然也会出现错误。 let x: [string, number];
x = ['Runoob', 1]; // 运行正常
x = [1, 'Runoob']; // 报错
console.log(x[0]); // 输出 Runoob
// 当访问一个已知索引的元素,会得到正确的类型:
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
// 当访问一个越界的元素,会使用联合类型替代:
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
7、枚举 enum:枚举类型用于定义数值集合。 enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2
8、any 类型 有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 在 TypeScript 中,任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型(也被称作全局超级类型)。
let value: any;
value.foo.bar; // OK
value.trim(); // OK
value(); // OK
new value(); // OK
value[0][1]; // OK
在许多场景下,这太宽松了。使用
any 类型,可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型,就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题,TypeScript 3.0 引入了 unknown 类型。9、Unknown 类型 就像所有类型都可以赋值给 let value: unknown;
value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK
对 let value: unknown;
let value1: unknown = value; // OK
let value2: any = value; // OK
let value3: boolean = value; // Error
let value4: number = value; // Error
let value5: string = value; // Error
let value6: object = value; // Error
let value7: any[] = value; // Error
let value8: Function = value; // Error
let value: unknown;
value.foo.bar; // Error
value.trim(); // Error
value(); // Error
new value(); // Error
value[0][1]; // Error
将 10、void 类型:用于标识方法返回值的类型,表示该方法没有返回值。 某种程度上来说,void 类型像是与 any 类型相反,它表示没有任何类型。当一个函数没有返回值时,你通常会见到其返回值类型是 void // 声明函数返回值为void
function warnUser(): void {
console.log("This is my warning message");
}
需要注意的是,声明一个 void 类型的变量没有什么作用,因为在严格模式下,它的值只能为 11、Null (表示对象值缺失)和 Undefined (用于初始化变量为一个未定义的值)类型 TypeScript 里, let u: undefined = undefined;
let n: null = null;
默认情况下 然而,当你指定了 12、object, Object 和 {} 类型 (1)object 类型是:TypeScript 2.2 引入的新类型,它用于表示非原始类型。也就是除 使用 declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
(2)Object 类型:Object 类型是所有 Object 类的实例的类型。 它由以下两个接口来定义: 2.1:Object 接口定义了 Object.prototype 原型对象上的属性; // node_modules/typescript/lib/lib.es5.d.ts
interface Object {
constructor: Function;
toString(): string;
toLocaleString(): string;
valueOf(): Object;
hasOwnProperty(v: PropertyKey): boolean;
isPrototypeOf(v: Object): boolean;
propertyIsEnumerable(v: PropertyKey): boolean;
}
2.2:ObjectConstructor 接口定义了 Object 类的属性 // node_modules/typescript/lib/lib.es5.d.ts
interface ObjectConstructor {
/** Invocation via `new` */
new(value?: any): Object;
/** Invocation via function calls */
(value?: any): any;
readonly prototype: Object;
getPrototypeOf(o: any): any;
// ···
}
declare var Object: ObjectConstructor;
Object 类的所有实例都继承了 Object 接口中的所有属性。 (3){} 类型:{} 类型描述了一个没有成员的对象。当你试图访问这样一个对象的任意属性时,TypeScript 会产生一个编译时错误。 但是,你仍然可以使用在 Object 类型上定义的所有属性和方法,这些属性和方法可通过 JavaScript 的原型链隐式地使用: // Type {}
const obj = {};
// "[object Object]"
obj.toString();
13、never,代表不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环) // 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {}
}
在 TypeScript 中,可以利用 never 类型的特性来实现全面性检查,具体示例如下: type Foo = string | number;
function controlFlowAnalysisWithNever(foo: Foo) {
if (typeof foo === "string") {
// 这里 foo 被收窄为 string 类型
} else if (typeof foo === "number") {
// 这里 foo 被收窄为 number 类型
} else {
// foo 在这里是 never
const check: never = foo;
}
}
注意在 else 分支里面,我们把收窄为 never 的 foo 赋值给一个显示声明的 never 变量。如果一切逻辑正确,那么这里应该能够编译通过。但是假如后来有一天你的同事修改了 Foo 的类型: type Foo = string | number | boolean;
然而他忘记同时修改 通过这个示例,我们可以得出一个结论:使用 never 避免出现新增了联合类型没有对应的实现,目的就是写出类型绝对安全的代码 二、TypeScript 断言1、类型断言 有时候你会遇到这样的情况,你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。 通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。类型断言好比其他语言里的类型转换,但是不进行特殊的数据检查和解构。它没有运行时的影响,只是在编译阶段起作用。TypeScript会假设你,程序员,已经进行了必须的检查。 类型断言有两种形式: // 一是“尖括号”语法:
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 另一个为as语法:
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 那么非空断言操作符到底有什么用呢?下面我们先来看一下非空断言操作符的一些使用场景。 function myFunc(maybeString: string | undefined | null) { const onlyString: string = maybeString; // Error const ignoreUndefinedAndNull: string = maybeString!; // Ok } (2)调用函数时忽略 undefined 类型 type NumGenerator = () => number; function myFunc(numGenerator: NumGenerator | undefined) { // Object is possibly 'undefined'.(2532) // Cannot invoke an object which is possibly 'undefined'.(2722) const num1 = numGenerator(); // Error const num2 = numGenerator!(); //OK } 3、确定赋值断言 在 TypeScript 2.7 版本中引入了确定赋值断言,即允许在实例属性和变量声明后面放置一个 let x: number; initialize(); // Variable 'x' is used before being assigned.(2454) console.log(2 * x); // Error function initialize() { x = 10; } 很明显该异常信息是说变量 x 在赋值前被使用了,要解决该问题,我们可以使用确定赋值断言: let x!: number; initialize(); console.log(2 * x); // Ok function initialize() { x = 10; } 通过 三、变量声明 1、ts 的变量命名规则:不能以数字开头,不能包含下划线_和美元符号$之外的特殊字符 2、声明变量方式: let [变量名] : [类型] = 值;
let [变量名] : [类型];
let [变量名] = 值;
let [变量名];
4种方式,没有类型那么类型就是any;没有值,那么值就是undefined。 |
请发表评论