Typescript语法简单汇总

桑吉發表於 2020-2-22 22:29:00

1、Typescript原始数据类型：
string
number
boolean
null
undefined
enum
symbol
空值一般采用void表示，void可以表示变量，也可以表示函数返回值。
2、Typescript中的任意值：
任意值（any）用来表示允许赋值为任意类型。
申明一个变量为任意值后，对它的任何操作，返回的内容的类型都是任意值。
变量如果在申明的时候如果未指定其类型，那么它会被识别为任意值类型。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="16">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;let a; // a是任意类型\na = 5;\na = 'a';\n\nconsole.log(a);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">let a; // a是任意类型
a = 5;
a = 'a';

console.log(a);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
3、Typescript的类型推论：
Typescript会依照类型推论的规则推断出一个类型。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="15">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;let b = 1; // b是number类型\nb = 2;\nconsole.log(b);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">let b = 1; // b是number类型
b = 2;
console.log(b);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
如果定义的时候没有赋值，不管之后有没有被赋值，都会被推断出any类型而完全不被类型检查。
4、Typescript联合类型：
联合类型表示取值可以为多种类型中的一种。
只能访问此联合类型内的所有类型里共有的属性和方法。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="14">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;const a: string | number = 1;\nconsole.log(a.length); // 报错：Property 'length' does not exist on type 'number'\nconsole.log(a.toString());&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">const a: string | number = 1;
console.log(a.length); // 报错：Property 'length' does not exist on type 'number'
console.log(a.toString());</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
5、Typescript中对象类型-接口：
可描述类的一部分抽象行为，也可描述对象的结构形状。
接口一般首字母大些，有的编程语言建议接口的名称前加上“I”前缀。
赋值的时候变量的形状必须跟接口的形状保持一致。
接口中可定义可选属性，只读属性，任意属性。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="13">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;\ninterface Istate1 {\n name: string;\n age: number;\n}\n\nconst obj1: Istate1 = {\n name: \&quot;Tom\&quot;,\n age: 10\n}\n\n// 可选属性\ninterface Istate2 {\n name: string;\n age?: number;\n}\n\nconst obj2: Istate2 = {\n name: \&quot;张三\&quot;,\n age: 18\n}\n\nconst obj3: Istate2 = {\n name: \&quot;李四\&quot;\n}\n\n// 属性个数不确定的时候， any必须是任意类型\ninterface Istate3 {\n name: string|number;\n age?: number;\n : any;\n}\n\nconst obj33: Istate3 = {\n name: 'Jay',\n age: 20,\n sex: \&quot;men\&quot;,\n isMary: false\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">
interface Istate1 {
name: string;
age: number;
}

const obj1: Istate1 = {
name: "Tom",
age: 10
}

// 可选属性
interface Istate2 {
name: string;
age?: number;
}

const obj2: Istate2 = {
name: "张三",
age: 18
}

const obj3: Istate2 = {
name: "李四"
}

// 属性个数不确定的时候， any必须是任意类型
interface Istate3 {
name: string|number;
age?: number;
: any;
}

const obj33: Istate3 = {
name: 'Jay',
age: 20,
sex: "men",
isMary: false
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="12">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 只读属性\ninterface Istate4{\n name: string;\n readonly age: number;\n}\n\nconst obj4: Istate4 = {\n name: \&quot;Jack\&quot;,\n age: 55\n}\n\nobj4.age = 56; // Cannot assign to 'age' because it is a read-only property.&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 只读属性
interface Istate4{
name: string;
readonly age: number;
}

const obj4: Istate4 = {
name: "Jack",
age: 55
}

obj4.age = 56; // Cannot assign to 'age' because it is a read-only property.</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
6、Typescript数组类型：
1) 可采用"类型[]"法表示；
2) 可采用数组泛型“Array<类型>”表示法；
3) 可采用接口表示法。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="11">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// “类型[]”表示法\nconst arr1: number[] = ;\nconst arr2: string[] = [\&quot;1\&quot;, \&quot;2\&quot;, \&quot;3\&quot;];\nconst arr3: any[] = ;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// “类型[]”表示法
const arr1: number[] = [1, 2, 3, 4, 5];
const arr2: string[] = ["1", "2", "3"];
const arr3: any[] = [1, '2', true];</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="10">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// \&quot;Array&lt;类型&gt;\&quot;表示法\nconst arr4: Array&lt;number&gt; = ;\nconst arr5: Array&lt;string&gt; = [\&quot;1\&quot;, \&quot;2\&quot;, \&quot;3\&quot;];\nconst arr6: Array&lt;any&gt; = ;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// "Array<类型>"表示法
const arr4: Array<number> = [1, 2, 3];
const arr5: Array<string> = ["1", "2", "3"];
const arr6: Array<any> = [1, "2", true];</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="9">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 接口表示法\ninterface Istate{\n name: string;\n age: number;\n}\n\ninterface Iarr{\n : Istate;\n}\n\nconst arr7: Iarr = [\n {\n name: 'Bill',\n age: 66\n },\n {\n name: \&quot;Pony\&quot;,\n age: 51\n }\n];\n\nconst arr8: Istate[] = [\n {\n name: 'Bill',\n age: 66\n },\n {\n name: \&quot;Pony\&quot;,\n age: 51\n }\n];\n\nconst arr9: Array&lt;Istate&gt; = [\n {\n name: 'Bill',\n age: 66\n },\n {\n name: \&quot;Pony\&quot;,\n age: 51\n }\n];&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 接口表示法
interface Istate{
name: string;
age: number;
}

interface Iarr{
: Istate;
}

const arr7: Iarr = [
{
 name: 'Bill',
 age: 66
},
{
 name: "Pony",
 age: 51
}
];

const arr8: Istate[] = [
{
 name: 'Bill',
 age: 66
},
{
 name: "Pony",
 age: 51
}
];

const arr9: Array<Istate> = [
{
 name: 'Bill',
 age: 66
},
{
 name: "Pony",
 age: 51
}
];</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
7、Typescript函数类型：
函数约束：有函数本身的参数约束，返回值约束；
还有函数本身赋值的变量的约束；
可采用重载的方式才支持联合类型的函数关系。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="8">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 申明式类型的函数\nfunction funType(name: string, age: number): number{\n return age;\n}\n\nconst ageNum: number = funType(\&quot;Tom\&quot;, 18);\n\n// 函数参数不确定\nfunction funType2(name: string, age: number, sex?: string): number{\n return age;\n}\n\nconst age2Number = funType2(\&quot;Tom\&quot;, 18, \&quot;男\&quot;);\n\n// 函数参数的默认值\nfunction funType3(name=\&quot;Tom\&quot;, age=18): number{\n return age;\n}\n\nconst age3Number = funType3();\nconsole.log(age3Number)&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 申明式类型的函数
function funType(name: string, age: number): number{
return age;
}

const ageNum: number = funType("Tom", 18);

// 函数参数不确定
function funType2(name: string, age: number, sex?: string): number{
return age;
}

const age2Number = funType2("Tom", 18, "男");

// 函数参数的默认值
function funType3(name="Tom", age=18): number{
return age;
}

const age3Number = funType3();
console.log(age3Number)</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="7">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 表达式类型的函数\nconst funType4 = function(name: string, age: number): number{\n return age;\n}\n\nconst funType: (name: string, age: number) =&gt; number= function(name: string, age: number): number{\n return age;\n}\n\ninterface IfunType6{\n (name: string, age: number): number;\n}\n\nconst funType6: IfunType6 = function(name: string, age: number): number{\n return age;\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 表达式类型的函数
const funType4 = function(name: string, age: number): number{
return age;
}

const funType: (name: string, age: number) => number= function(name: string, age: number): number{
return age;
}

interface IfunType6{
(name: string, age: number): number;
}

const funType6: IfunType6 = function(name: string, age: number): number{
return age;
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="6">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 对于联合类型的函数可以采用重载的方式\n// 输入是number，输出也是number\n// 输入是string，输出也是string\nfunction getValue(value: number): number;\nfunction getValue(value: string): string;\nfunction getValue(value: number|string): number|string{\n return value;\n}\n\nconst a: number = getValue(1);\nconst b: string =getValue(\&quot;1\&quot;);\n&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 对于联合类型的函数可以采用重载的方式
// 输入是number，输出也是number
// 输入是string，输出也是string
function getValue(value: number): number;
function getValue(value: string): string;
function getValue(value: number|string): number|string{
return value;
}

const a: number = getValue(1);
const b: string =getValue("1");
</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
8、Typescript类型断言：
类型断言可以用来手动指定一个值的类型。
语法：<类型>值或者值 as 类型。
在tsx语法（React的jsx语法的ts版）必须采用后面一种。
类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 类型断言只能断言联合类型中存在的类型\nfunction getAssert(name: string|number){\n //return (&lt;string&gt;name).length;\n return (name as string).length;\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 类型断言只能断言联合类型中存在的类型
function getAssert(name: string|number){
//return (<string>name).length;
return (name as string).length;
}</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
9、Typescript类型别名：
类型别名可以用来给一个类型起一个新名字。
采用关键字，比如“type name = string | number”。
例子中name就表示可以设置字符串或者数值类型。
也可用type来约束取值只能是某些字符串中的一个，如：
type eventNames = "click" | "scroll" | "mousemove"
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 类型别名\n//const str: string|number = \&quot;1\&quot;;\n\ntype strType = string | number | boolean;\nlet str: strType = \&quot;1\&quot;\nstr = 1;\nstr = true;\nconsole.log(str);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 类型别名
//const str: string|number = "1";

type strType = string | number | boolean;
let str: strType = "1"
str = 1;
str = true;
console.log(str);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="3">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 对于接口也可以采用类型别名\ninterface MuchType1{\n name: string;\n}\n\ninterface MuchType2{\n age: number;\n}\n\ntype MuchType = MuchType1 | MuchType2;\n\nconst obj1: MuchType = {\n name: \&quot;Jack\&quot;\n}\n\nconst obj2: MuchType = {\n age: 20\n}\n\nconst obj3: MuchType = {\n name: \&quot;Jay\&quot;,\n age: 22\n}\n\nconsole.log(obj1);\nconsole.log(obj2);\nconsole.log(obj3);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 对于接口也可以采用类型别名
interface MuchType1{
name: string;
}

interface MuchType2{
age: number;
}

type MuchType = MuchType1 | MuchType2;

const obj1: MuchType = {
name: "Jack"
}

const obj2: MuchType = {
age: 20
}

const obj3: MuchType = {
name: "Jay",
age: 22
}

console.log(obj1);
console.log(obj2);
console.log(obj3);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="2">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 限制字符串的选择\ntype sex = \&quot;男\&quot; | \&quot;女\&quot;;\n\nfunction getSex(s: sex): string{\n return s;\n}\n\ngetSex(\&quot;男\&quot;);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 限制字符串的选择
type sex = "男" | "女";

function getSex(s: sex): string{
return s;
}

getSex("男");</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
10、Typescript枚举：
枚举（enum）类型用于取值被限定在一定范围内的场景。
采用关键字enum定义，比如：enum days{Sun， Mon, Tue, Wed, Thu, Fri, Sat}。
枚举成员会被赋值为从0开始递增的数字，同时也会被枚举值到枚举名进行反向映射。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="1">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 使用枚举可以定义一些有名字的数字常量\nenum Days{\n Sun,\n Mon,\n Tue,\n Wed, \n Thu, \n Fri, \n Sat\n}\n\nconsole.log(Days.Sun); // 0\nconsole.log(Days.Sat); // 6\nconsole.log(Days); // {0: \&quot;Sun\&quot;, 1: \&quot;Mon\&quot;, 2: \&quot;Tue\&quot;, 3: \&quot;Wed\&quot;, 4: \&quot;Thu\&quot;, 5: \&quot;Fri\&quot;, 6: \&quot;Sat\&quot;, Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, …}\nconsole.log(Days === \&quot;Sun\&quot;); // True&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 使用枚举可以定义一些有名字的数字常量
enum Days{
Sun,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}

console.log(Days.Sun); // 0
console.log(Days.Sat); // 6
console.log(Days); // {0: "Sun", 1: "Mon", 2: "Tue", 3: "Wed", 4: "Thu", 5: "Fri", 6: "Sat", Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, …}
console.log(Days[0] === "Sun"); // True</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
11、Typescript类的装饰符：
public、private和protected。
12、Typescript泛型：
泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型的一种特性。
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="0">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;// 函数中使用泛型\nfunction createArr&lt;T&gt;(length: number, value: T): Array&lt;T&gt;{\n const arr = [];\n for(let i = 0; i&lt;length; i++){\n arr = value;\n }\n\n return arr;\n}\n\nconst strArr: string[] = createArr(8,\&quot;a\&quot;);\nconsole.log(strArr);\nconst numArr: number[] = createArr(6, 1);\nconsole.log(numArr);\n\n// 接口当中使用泛型\ninterface Icreate{\n &lt;T&gt;(name: string, value: T): Array&lt;T&gt;;\n}\n\nconst func: Icreate = function&lt;T&gt;(name: string, value: T): Array&lt;T&gt;{\n return [];\n}\n\nconst strArr2: number[] = func(\&quot;Jack\&quot;, 3);&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">// 函数中使用泛型
function createArr<T>(length: number, value: T): Array<T>{
const arr = [];
for(let i = 0; i<length; i++){
 arr = value;
}

return arr;
}

const strArr: string[] = createArr(8,"a");
console.log(strArr);
const numArr: number[] = createArr(6, 1);
console.log(numArr);

// 接口当中使用泛型
interface Icreate{
<T>(name: string, value: T): Array<T>;
}

const func: Icreate = function<T>(name: string, value: T): Array<T>{
return [];
}

const strArr2: number[] = func("Jack", 3);</code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
来源：https://www.cnblogs.com/samve/p/12347658.html

頁: [1]

琼殿技术论坛's Archiver

Typescript语法简单汇总