殷为有你 發表於 2021-1-9 09:06:00

TypeScript 中的interface接口

<h1 id="使用接口约束类型">使用接口约束类型</h1>
<pre><code class="language-ts">interface Girl {
name: string;
age: number;
bust: number;
}

const screenResume = (girl: Girl) =&gt; {
girl.age &lt; 24 &amp;&amp; girl.bust &gt;= 90 &amp;&amp; console.log(girl.name + "进入面试");
girl.age &gt; 24 || (girl.bust &lt; 90 &amp;&amp; console.log(girl.name + "你被淘汰"));
};

const getResume = (girl: Girl) =&gt; {
console.log(girl.name + "年龄是:" + girl.age);
console.log(girl.name + "胸围是:" + girl.bust);
};
const girl = {
name: "大脚",
age: 18,
bust: 94,
};

screenResume(girl);
getResume(girl);
</code></pre>
<p>接口和类型别名很像,但是类型别名可以直接给类型,比如string,而接口必须代表对象。</p>
<h1 id="接口非必选值的定义">接口非必选值的定义</h1>
<pre><code class="language-ts">// 使用 ? 来标记可选值
interface Girl {
name: string;
age: number;
bust: number;
waistline?: number;
}
const getResume = (girl: Girl) =&gt; {
console.log(girl.name + "年龄是:" + girl.age);
console.log(girl.name + "胸围是:" + girl.bust);
girl.waistline &amp;&amp; console.log(girl.name + "腰围是:" + girl.waistline);
};
</code></pre>
<hr>
<h1 id="允许加入任意值">允许加入任意值</h1>
<pre><code class="language-ts">interface Girl {
name: string;
age: number;
bust: number;
waistline?: number;
: any;
}
const girl = {
name: "大脚",
age: 18,
bust: 94,
waistline: 21,
sex: "女",
};
const getResume = (girl: Girl) =&gt; {
console.log(girl.name + "年龄是:" + girl.age);
console.log(girl.name + "胸围是:" + girl.bust);
girl.waistline &amp;&amp; console.log(girl.name + "腰围是:" + girl.waistline);
girl.sex &amp;&amp; console.log(girl.name + "性别是:" + girl.sex);
};
</code></pre>
<h1 id="接口里的方法">接口里的方法</h1>
<pre><code class="language-ts">interface Girl {
name: string;
age: number;
bust: number;
waistline?: number;
: any;
say(): string;
}

const girl = {
name: "大脚",
age: 18,
bust: 94,
waistline: 21,
sex: "女",
say() {
    return "欢迎光临 ,红浪漫洗浴!!";
},
};
</code></pre>
<h1 id="接口和类的约束">接口和类的约束</h1>
<pre><code class="language-ts">class XiaoJieJie implements Girl {
name = "刘英";
age = 18;
bust = 90;
say() {
    return "欢迎光临 ,红浪漫洗浴!!";
}
}
</code></pre>
<h1 id="接口间的继承">接口间的继承</h1>
<pre><code class="language-ts">interface Teacher extends Girl {
teach(): string;
}
</code></pre>
<hr>
<p>参考:<br>
技术胖——TypeScript从入门到精通(08. TypeScript中的interface接口)<br>
技术胖——TypeScript从入门到精通(09. TypeScript中的interface接口 2)</p><br><br>
来源:https://www.cnblogs.com/xch-jiang/p/14254107.html
頁: [1]
查看完整版本: TypeScript 中的interface接口