不关我的事 發表於 2019-11-26 23:23:00

TypeScript - 类型声明、枚举、函数、接口

<h1 id="可定义的类型">可定义的类型</h1>
<blockquote>
<p>以下所写的并不代表typescript的数据类型，而是在使用过程中可以用作定义的类型。这里只列举一些常见的，不代表只有以下这些</p>
</blockquote>
<ul>
<li>number : 数值类型；</li>
<li>string : 字符串类型；</li>
<li>boolean : 布尔类型；</li>
<li>Array : 数组类型；</li>
<li>Date : 日期；</li>
<li>RegExp : 正则；</li>
<li>Error : 错误类型；</li>
<li>any : 任意类型；</li>
<li>undefined : undefined；</li>
<li>null ：空类型；</li>
<li>Function : 函数；</li>
<li>Promise : Promise；</li>
<li>object : 对象类型；</li>
</ul>
<blockquote>
<p>为一个变量定义object类型时，意味着变量的值可以为数组、函数、Date等，就像js所定义的object。当需要实现一个对象时，可以使用接口来定义。</p>
</blockquote>
<ul>
<li>interface : 接口；</li>
</ul>
<blockquote>
<p>该类型需要通过interface关键词来实现</p>
</blockquote>
<ul>
<li>enum ：枚举类型；</li>
</ul>
<blockquote>
<p>该类型需要通过enum关键词来实现</p>
</blockquote>
<ul>
<li>void ：空类型；</li>
</ul>
<blockquote>
<p>该类型规定函数返回值，代表无返回值</p>
</blockquote>
<h1 id="类型声明">类型声明</h1>
<p><strong>1.单类型</strong></p>
<pre><code class="language-typescript">let str:string = 'hello'
</code></pre>
<p><strong>2.联合类型</strong><br>
以下值类型可以为string或number</p>
<pre><code class="language-typescript">let money:string|number = '100'
</code></pre>
<p><strong>3.数组</strong></p>
<pre><code class="language-typescript">//第一种
let arr:number[] =
//第二种个人比较喜欢这种，Array关键词能够第一眼就知道是数组
let arr:Array&lt;string|number&gt; =
</code></pre>
<p>Readonly关键字 数组只读</p>
<pre><code class="language-javascript">let arr:ReadonlyArray&lt;string&gt; = ['1']
//arr = '2'error
//arr.push('2')error
//arr.length = 10error
//let arr1 = arrerror
//arr = ['2']ok
</code></pre>
<p><strong>4.自定义类型</strong><br>
当一些复杂类型需要多次使用，可以通过type来自定义类型，便于复用</p>
<pre><code class="language-typescript">type GetMoney = ()=&gt;string|number
let getMoney:GetMoney = function(){
return '1000'
}
</code></pre>
<h1 id="枚举">枚举</h1>
<p>使用枚举我们可以定义一些带名字的常量，当枚举作为类型时，表示该属性只能为枚举中的某一个成员</p>
<p><strong>1.字符串枚举</strong></p>
<pre><code class="language-typescript">enum SEX{
man = '男',
woman = '女',
unknown = '未知'
}
let arr:Array&lt;SEX&gt; =
</code></pre>
<p><strong>2.数字枚举</strong></p>
<pre><code class="language-typescript">//不使用初始化器
enum Direction {
    Up,    //0
    Down,//1
    Left,//2
    Right, //3
}
</code></pre>
<pre><code class="language-typescript">//使用初始化器
enum Direction {
    Up = 1,//1
    Down,//2
    Left,//3
    Right, //4
}
</code></pre>
<p><strong>3.联合枚举</strong><br>
枚举类型本身变成了每个枚举成员的联合，它可以知道枚举里的值的集合</p>
<pre><code class="language-typescript">enum Direction {
    Up,   
    Down,
    Left,
    Right
}

let direction:Direction;
direction = Direction.Up // ok
direction = Direction.Down // ok
</code></pre>
<p>把direction声明为Direction类型，可以看成声明了一个联合类型 Direction.Up|Direction.Down|Direction.Left|Direction.Right<br>
<strong>4.反向映射</strong><br>
正向映射（ name -&gt; value） 反向映射（ value -&gt; name）<br>
数字枚举成员还具有反向映射， 要注意的是不会为字符串枚举成员生成反向映射</p>
<pre><code class="language-typescript">enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum; // "A"
</code></pre>
<p>TypeScript可能会将这段代码编译为下面的JavaScript：</p>
<pre><code class="language-javascript">var Enum;
(function (Enum) {
    Enum = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum; // "A"
</code></pre>
<p>简单说下以上JavaScript代码发生了什么：</p>
<ol>
<li>自执行函数为Enum添加属性，</li>
<li>Enum["A"] = 0赋值后返回0作为索引，</li>
<li>发生第二次赋值Enum = 'A'</li>
<li 0:a="">此时的Enum内部为</li>
</ol>
<h1 id="函数">函数</h1>
<p><strong>1.默认参数 可选参数</strong></p>
<pre><code class="language-javascript">//返回值为字符串数组
function foo(msg:string, msg1:string='world'):Array&lt;string&gt; {
return
}
say('hello')
</code></pre>
<p><strong>2.剩余参数</strong></p>
<pre><code class="language-javascript">function foo1(...arr:Array&lt;string&gt;):void {
arr.forEach(item=&gt;console.log(item))
}
say1('1','2')
</code></pre>
<p><strong>3.回调函数</strong></p>
<pre><code class="language-javascript">function foo3(cb:()=&gt;void) {
cb()
}
</code></pre>
<p><strong>4.表达式函数</strong></p>
<pre><code class="language-tjavascript">let foo4:(num:string)=&gt;void = function(){}
</code></pre>
<p><strong>5.Promise</strong></p>
<pre><code class="language-javascript">//第一种 为resolve定义类型
function asyncFn():Promise&lt;string&gt;{
    let p = new Promise((resolve:(val:string)=&gt;void)=&gt;{
      resolve('result')
    })
    return p
}
//第二种 声明返回值的泛型
function asyncFn():Promise&lt;string&gt;{
    let p = new Promise&lt;string&gt;((resolve)=&gt;{
      resolve('result')
    })
    return p
}
</code></pre>
<h1 id="接口interface">接口(interface)</h1>
<p>接口的作用是对值所具有的结构进行类型检查，为这些结构定义规定，让你的代码按照规定去执行。</p>
<p><strong>1.对象</strong></p>
<pre><code class="language-typescript">interface People{
readonly name: string;
height: number;
like?: string;
}
let worker:People = {name:'Joe',height:180}
</code></pre>
<blockquote>
<p>?: 可选属性<br>
readonly 属性只读</p>
</blockquote>
<p><strong>2.索引签名</strong><br>
添加任意数量的额外属性</p>
<pre><code class="language-typescript">interface People{
    readonly name: string;
    height: number;
    : any;
}
let worker:People = {
    name:'Joe',
    height:180,
    sex:'man',
    eat:function(){}
}
</code></pre>
<p><strong>3.继承</strong><br>
接口和类一样，可以使用继承，这样可以分割更多的模块，便于我们灵活的组合使用</p>
<pre><code class="language-typescript">interface People{
    say(msg:string):string
}
interface Man extends People{
    readonly name:string
}
let coder:Man = {
    name:'Wahfung',
    say(msg){
      return 'say:'msg
    }
}
</code></pre>
<p>多继承</p>
<pre><code class="language-typescript">interface Man extends People,SuperMan{
    readonly name:string
}
</code></pre>
<p><strong>4.定义函数</strong></p>
<pre><code class="language-typescript">interface SayHandler {
(people:string,msg:string):string
}
//参数名无需与接口的一致，甚至无需为参数规定类型，接口会自动进行判断
let sayMsg:SayHandler = function(p, m) {
let result = p+':'+m
return result
}
sayMsg('Joe','hello')
</code></pre>
<p><strong>5.为函数规定参数</strong></p>
<pre><code class="language-typescript">interface Car {
color: string;
brand?: string;
}
function CreateCar(config:Car):object{
    let price = 1000
    if(config.brand==='BMW'){
      price = 2000
    }
    return {color:config.color,price}
}
CreateCar({color:'red'})
</code></pre>
<p>使用es6解构参数重写👇</p>
<pre><code class="language-javascript">function CreateCar({color,brand}:Car):object{
    let price = 1000
    if(brand==='BMW'){
      price = 2000
    }
    return {color,price}
}
</code></pre>


</div>
<div id="MySignature" role="contentinfo">
    <div>作者：WahFung</div>
<div>出处：http://www.cnblogs.com/chanwahfung/</div>
<div>本文版权归作者和博客园共有，转载请贴出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div><br><br>
来源：https://www.cnblogs.com/chanwahfung/p/11939190.html
頁: [1]
查看完整版本: TypeScript - 类型声明、枚举、函数、接口