TypeScript的类型

魏允彬的跳绳世界 發表於 2019-11-9 20:35:00

⒈TypeScript的类型
　　JavaScript语言的数据类型包括以下7种：
　　　　1.boolean（布尔），true || false
　　　　2.null，表明null值得特殊关键字，JavaScript是大小写敏感的，不要误写成Null或者NULL
　　　　3.undefined，变量未定义时的属性
　　　　4.number，表示数字，例如1、1.2等等
　　　　5.string，表示字符串，例如：“Hello World！”
　　　　6.symbol，一种数据类型（在ES6种新添加的类型），表示该实例唯一且不可改变。
　　　　7.object（对象），通常而言，可以将对象视为存放值得命名容器
　　JavaScript的类型都是在运行时进行处理，我们并不能在代码阶段来获知类型，因此在代码复杂的情况下，缺乏类型约束的代码可能会导致一些潜在的隐患。
　　因为TypeScript是JavaScript的超集，所以TypeScript支持与JavaScript几乎相同的数据类型
　　　　1.boolean类型。
<div class="cnblogs_code">
<pre>let areYouOk: boolean = true</pre>
</div>
　　　　2.null
　　　　TypeScript里，<code>undefined</code>和<code>null</code>两者各自有自己的类型分别叫做<code>undefined</code>和<code>null</code>。和 <code>void</code>相似，它们的本身的类型用处不是很大：
<div class="cnblogs_code">
<pre>let n: null = null;</pre>
</div>
　　默认情况下<code>null</code>和<code>undefined</code>是所有类型的子类型。就是说你可以把 <code>null</code>和<code>undefined</code>赋值给<code>number</code>类型的变量。
　　然而，当你指定了<code>--strictNullChecks</code>标记，<code>null</code>和<code>undefined</code>只能赋值给<code>void</code>和它们各自。这能避免 很多常见的问题。也许在某处你想传入一个 <code>string</code>或<code>null</code>或<code>undefined</code>，你可以使用联合类型<code>string | null | undefined</code>。　
　　注意：我们鼓励尽可能地使用<code>--strictNullChecks</code>　　
　　　　3.undefined
　　　　TypeScript里，<code>undefined</code>和<code>null</code>两者各自有自己的类型分别叫做<code>undefined</code>和<code>null</code>。和 <code>void</code>相似，它们的本身的类型用处不是很大：
<div class="cnblogs_code">
<pre>let u: undefined = undefined;</pre>
</div>
　　默认情况下<code>null</code>和<code>undefined</code>是所有类型的子类型。就是说你可以把 <code>null</code>和<code>undefined</code>赋值给<code>number</code>类型的变量。
　　然而，当你指定了<code>--strictNullChecks</code>标记，<code>null</code>和<code>undefined</code>只能赋值给<code>void</code>和它们各自。这能避免 很多常见的问题。也许在某处你想传入一个 <code>string</code>或<code>null</code>或<code>undefined</code>，你可以使用联合类型<code>string | null | undefined</code>。
　　注意：我们鼓励尽可能地使用<code>--strictNullChecks</code>
　　　　4.number
<div>　　　　和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ES6中引入的二进制和八进制字面量。</div>
<div class="cnblogs_code">
<pre>let a: number = 6;
let b: number = 1_000_000;
let c: number = 0xf00d;
let d: number = 0b1010;
let e: number = 0o744;</pre>
</div>
　　　　5.string
　　　　和JavaScript一样，TypeScript使用双引号（""）或单引号（'‘）表示字符串
<div class="cnblogs_code">
<pre>let firstName: string = "fan";
let lastName: string = 'qi';　　</pre>
</div>
<div>　　　　还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式</div>
<div>
<div class="cnblogs_code">
<pre>let fullName: string = `fanqi`;
let age: number = 25;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;</pre>
</div>
　　　　这与下面定义<code>sentence</code>的方式效果相同：
<div class="cnblogs_code">
<pre>let sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";</pre>
</div>
　　　　6.<code>symbol</code>类型的值是通过<code>Symbol</code>构造函数创建的。
<div class="cnblogs_code">
<pre>let sym1 = Symbol();

let sym2 = Symbol("key"); // 可选的字符串key</pre>
</div>
　　　　7.object
<code>　　object</code>表示非原始类型，也就是除<code>number</code>，<code>string</code>，<code>boolean</code>，<code>symbol</code>，<code>null</code>或<code>undefined</code>之外的类型。
<div class="cnblogs_code">
<pre>let obj:object = {"name":"fanqi"}; </pre>
</div>
　　　　8.数组【支持两种方式定义】
　　　　　　Ⅰ直接在元素类型后面加上[]，表示由此类型元素组成的一个数组。
<div class="cnblogs_code">
<pre>let list: number[] = ;</pre>
</div>
　　　　　　Ⅱ第二种方式是使用数组泛型，<code>Array<元素类型></code>
<div class="cnblogs_code">
<pre>let list: Array<number> = ;</pre>
</div>
　　　　9.元组
　　　　元组类型允许表示一个已知元素类型和数量的数组，各元素的类型不必相同。
　　　　例如，定义一对值分别为 <code>string</code>和<code>number</code>类型的元组。
<div class="cnblogs_code">
<pre>// 声明元组类型
let x: ;
// 初始化元组
x = ['hello', 10]; // 成功
// Initialize it incorrectly
x = ; //错误，将在IDE种给出提示</pre>
</div>
<div class="cnblogs_code">
<pre>let x: ;
x = ['hello', 10];
console.log(x[1].substr(1)); //错误，将给出提示，'number'类型不包含'substr'方法</pre>
</div>
　　　　10.枚举
<code>　　　　enum</code>类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
<div class="cnblogs_code">
<pre>enum Color {Red, Green, Blue}
let c: Color = Color.Green;</pre>
</div>
　　　　默认情况下，从<code>0</code>开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 <code>1</code>开始编号：
<div class="cnblogs_code">
<pre>enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;</pre>
</div>
　　　　或者，全部都采用手动赋值：
<div class="cnblogs_code">
<pre>enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;</pre>
</div>
　　枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
<div class="cnblogs_code">
<pre>enum Color {Red = 1, Green, Blue}
let colorName: string = Color;

console.log(colorName);// 显示'Green'因为上面代码里它的值是2</pre>
</div>
　　　　11.Any
　　　　有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 <code>any</code>类型来标记这些变量：
<div class="cnblogs_code">
<pre>let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean</pre>
</div>
　　　　在对现有代码进行改写的时候，<code>any</code>类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。你可能认为 <code>Object</code>有相似的作用，就像它在其它语言中那样。但是 <code>Object</code>类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：
<div class="cnblogs_code">
<pre>let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.</pre>
</div>
　　　　当你只知道一部分数据的类型时，<code>any</code>类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：
<div class="cnblogs_code">
<pre>let list: any[] = ;
list[1] = 100;</pre>
</div>
　　　　12.Void
　　　　某种程度上来说，<code>void</code>类型像是与<code>any</code>类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 <code>void</code>：
<div class="cnblogs_code">
<pre>function warnUser(): void {
console.log("This is my warning message");
}</pre>
</div>
　　　　声明一个<code>void</code>类型的变量没有什么大用，因为你只能为它赋予<code>undefined</code>和<code>null</code>：
<div class="cnblogs_code">
<pre>let unusable: void = undefined;</pre>
</div>
　　　　13.Never
<code>　　never</code>类型表示的是那些永不存在的值的类型。例如， <code>never</code>类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 <code>never</code>类型，当它们被永不为真的类型保护所约束时。
<code>　　never</code>类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是<code>never</code>的子类型或可以赋值给<code>never</code>类型（除了<code>never</code>本身之外）。即使 <code>any</code>也不可以赋值给<code>never</code>。
　　下面是一些返回<code>never</code>类型的函数：
<div class="cnblogs_code">
<pre>// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}</pre>
</div>
⒉变量声明
　　let和const是ES6中新增的变量声明方式。在TypeScript中，let和const的使用方式与ES6中一摸一样，推荐大家使用let和const进行赋值而不推荐使用var去进行赋值。
　　详细介绍可以查看https://www.cnblogs.com/fanqisoft/p/11828839.html
⒊类型推断
　　在声明变量时即使不声明变量的类型，TypeScript依然可以根据指定的变量进行类型推断。
　　当我们赋值一个string再将一个number赋值的时候，编译器将会给出提示。
　　无论是TypeScript的类型推断还是我们声明了变量类型，一旦赋予了错误的值会触发TypeScript的编译时报错，这个编译时报错为我们带来了严格的类型检查。
<div class="cnblogs_code">
<pre>let fullName = 'fanqi'; // fullName as string
fullName = 25; //Error,不能将number赋值到string</pre>
</div>
⒋类型断言
　　通过类型推断有时会得到变量正确的类型，但常常我们会遇到另外一种情况，你会比TypeScript更了解这个值的类型，这样的情况经常发生，你会清楚的知道编译器的类型推断不太确切，应该由更准确的类型。
　　而通过类型断言，我们可以明确的告知编译器，我们究竟想干什么。这是一种修正方案，在别的语言里，我们将会使用类型转换来表达这样一种情况。
　　这个操作并不会在运行时里起到任何影响，正如TypeScript的宣言一样，它仅仅在编译时起作用。这非常像Word的语法检查，是提醒和报错，而不会阻止你继续写字。
　　类型断言有两种形式。其一是“尖括号”语法，这也是大部分编程语言中常用的语法形式：
<div class="cnblogs_code">
<pre>let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;</pre>
</div>
　　另一种则使用<code>as关键字</code>：
<div class="cnblogs_code">
<pre>let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;</pre>
</div>
　　两种形式是等价的。至于具体使用哪一种形式取决于个人的偏好。然而，当你在TypeScript里使用JSX时，只有 <code>as</code>语法是被允许的，如果非要有什么原因的话，大概是由于尖括号在JSX种已经用于表达泛型了。
　　
 
　　　　　　
</div>
　　 
来源：https://www.cnblogs.com/fanqisoft/p/11827665.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript的类型