TypeScript

翎珑發表於 2019-12-2 11:19:00

<div>
<h3>什么是 TypeScript？</h3>
<code>TypeScript</code> 是 <code>JavaScript</code> 的类型的超集，它可以编译成纯 <code>JavaScript</code>。编译出来的 <code>JavaScript</code> 可以运行在任何浏览器上。<code>TypeScript</code> 编译工具可以运行在任何服务器和任何系统上。<code>TypeScript</code> 是开源的。
<h3>为什么选择TypeScript</h3>
TypeScript 增加了代码的可读性和可维护性
<ul>
<li>
<div class="reset-3c756112--listItemContent-756c9114" data-key="097b92017dfa4ac9a0f31b46863b4eff">
类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
</div>
</li>
<li>
<div class="reset-3c756112--listItemContent-756c9114" data-key="c7ebcac243384403944627b2789d4339">
可以在编译阶段就发现大部分错误，这总比在运行时候出错好
</div>
</li>
<li data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJsaXN0LXVub3JkZXJlZCUyMiUyQyUyMmlzVm9pZCUyMiUzQWZhbHNlJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCUyQyUyMm5vZGVzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIyYmxvY2slMjIlMkMlMjJ0eXBlJTIyJTNBJTIybGlzdC1pdGVtJTIyJTJDJTIyaXNWb2lkJTIyJTNBZmFsc2UlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNyVCMSVCQiVFNSU5RSU4QiVFNyVCMyVCQiVFNyVCQiU5RiVFNSVBRSU5RSVFOSU5OSU4NSVFNCVCOCU4QSVFNiU5OCVBRiVFNiU5QyU4MCVFNSVBNSVCRCVFNyU5QSU4NCVFNiU5NiU4NyVFNiVBMSVBMyVFRiVCQyU4QyVFNSVBNCVBNyVFOSU4MyVBOCVFNSU4OCU4NiVFNyU5QSU4NCVFNSU4NyVCRCVFNiU5NSVCMCVFNyU5QyU4QiVFNyU5QyU4QiVFNyVCMSVCQiVFNSU5RSU4QiVFNyU5QSU4NCVFNSVBRSU5QSVFNCVCOSU4OSVFNSVCMCVCMSVFNSU4RiVBRiVFNCVCQiVBNSVFNyU5RiVBNSVFOSU4MSU5MyVFNSVBNiU4MiVFNCVCRCU5NSVFNCVCRCVCRiVFNyU5NCVBOCVFNCVCQSU4NiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIyYmxvY2slMjIlMkMlMjJ0eXBlJTIyJTNBJTIybGlzdC1pdGVtJTIyJTJDJTIyaXNWb2lkJTIyJTNBZmFsc2UlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSU4RiVBRiVFNCVCQiVBNSVFNSU5QyVBOCVFNyVCQyU5NiVFOCVBRiU5MSVFOSU5OCVCNiVFNiVBRSVCNSVFNSVCMCVCMSVFNSU4RiU5MSVFNyU4RSVCMCVFNSVBNCVBNyVFOSU4MyVBOCVFNSU4OCU4NiVFOSU5NCU5OSVFOCVBRiVBRiVFRiVCQyU4QyVFOCVCRiU5OSVFNiU4MCVCQiVFNiVBRiU5NCVFNSU5QyVBOCVFOCVCRiU5MCVFOCVBMSU4QyVFNiU5NyVCNiVFNSU4MCU5OSVFNSU4NyVCQSVFOSU5NCU5OSVFNSVBNSVCRCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIyYmxvY2slMjIlMkMlMjJ0eXBlJTIyJTNBJTIybGlzdC1pdGVtJTIyJTJDJTIyaXNWb2lkJTIyJTNBZmFsc2UlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBMiU5RSVFNSVCQyVCQSVFNCVCQSU4NiVFNyVCQyU5NiVFOCVCRSU5MSVFNSU5OSVBOCVFNSU5MiU4QyUyMElERSUyMCVFNyU5QSU4NCVFNSU4QSU5RiVFOCU4MyVCRCVFRiVCQyU4QyVFNSU4QyU4NSVFNiU4QiVBQyVFNCVCQiVBMyVFNyVBMCU4MSVFOCVBMSVBNSVFNSU4NSVBOCVFMyU4MCU4MSVFNiU4RSVBNSVFNSU4RiVBMyVFNiU4RiU5MCVFNyVBNCVCQSVFMyU4MCU4MSVFOCVCNyVCMyVFOCVCRCVBQyVFNSU4OCVCMCVFNSVBRSU5QSVFNCVCOSU4OSVFMyU4MCU4MSVFOSU4NyU4RCVFNiU5RSU4NCVFNyVBRCU4OSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">
<div class="reset-3c756112--listItemContent-756c9114" data-key="b7fbad1910774ba4862da18ab65e525b">
增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等
 
</div>
</li>
</ul>
</div>
<h3>安装 TypeScript</h3>
<div class="cnblogs_code">
<pre>npm install -g typescript</pre>
</div>
　编译一个 <code>TypeScript</code> 文件 , <code>TypeScript</code> 编写的文件以 <code>.ts</code> 为后缀，用 <code>TypeScript</code> 编写 <code>React</code> 时，以 <code>.tsx</code> 为后缀。
<div class="cnblogs_code">
<pre>tsc hello.ts 编译命令会声场hello.js文件</pre>
</div>
　hello.ts:　
<div class="cnblogs_code">
<pre>function sayHello(person: string) {
return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));　　</pre>
</div>
 
生成的hello.js
 
<div class="cnblogs_code">
<pre>function sayHello(person) {
return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));</pre>
</div>
　　
<code>TypeScript</code> 中，使用 <code>:</code> 指定变量的类型，<code>:</code> 的前后有没有空格都可以。 <code class="code-81e98f88" data-slate-leaf="true">person</code> 参数类型为 <span data-offset-key="6df16eceeb0743d3bb23427b9ecef0d9:5" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJwZXJzb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNSU4RiU4MiVFNiU5NSVCMCVFNyVCMSVCQiVFNSU5RSU4QiVFNCVCOCVCQSUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJzdHJpbmclMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlNUQlN0QlNUQlN0QlNUQlN0Q="><code class="code-81e98f88" data-slate-leaf="true">string</code>
<code>TypeScript</code> 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。
 
 错误演示： <code class="code-81e98f88" data-slate-leaf="true">person</code> 参数类型为 <span data-offset-key="6df16eceeb0743d3bb23427b9ecef0d9:5" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJwZXJzb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNSU4RiU4MiVFNiU5NSVCMCVFNyVCMSVCQiVFNSU5RSU4QiVFNCVCOCVCQSUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJzdHJpbmclMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlNUQlN0QlNUQlN0QlNUQlN0Q="><code class="code-81e98f88" data-slate-leaf="true">string 传值为数组</code>
<div class="cnblogs_code">
<pre>function sayHello(person: string) {
return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));</pre>
</div>
<pre>编辑器中会提示错误，编译的时候也会出错 </pre>
<div class="cnblogs_code">
<pre>index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.</pre>
</div>
 
<h3>TypeScript中数据类型介绍</h3>
<ul>
<li>定义布尔类型 //ts声明布尔类型的变量 <code>let flag:boolean=true; </code></li>
<li>ts中定义数值类型 <code>let count:number=100</code></li>
<li>ts中定义字符类型 <code>let str:string='hello world'</code></li>
<li>ts定义void类型:<code class="code-81e98f88" data-slate-leaf="true">void</code><span data-offset-key="15629:2" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMnZvaWQlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFOCVBMSVBOCVFNyVBNCVCQSVFNiVCMiVBMSVFNiU5QyU4OSVFNCVCQiVCQiVFNCVCRCU5NSVFOCVCRiU5NCVFNSU5QiU5RSVFNSU4MCVCQyVFNyU5QSU4NCVFNSU4NyVCRCVFNiU5NSVCMCVFRiVCQyU5QSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE"> 表示没有任何返回值的函数：</li>
<li>
<div class="cnblogs_code">
<pre>function print:void(params){
console.log(params);
}
//声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let unusable: void = undefined;</pre>
</div>
</li>
<li>ts中定义undefined类型 <code>let a:undefined=undefined</code></li>
<li>ts中定义null <code>let b:null=null</code></li>
<li><code class="code-81e98f88" data-slate-leaf="true">undefined</code> 和 <code class="code-81e98f88" data-slate-leaf="true">null</code> 是所有类型的子类型。也就是说 <code class="code-81e98f88" data-slate-leaf="true">undefined</code> 类型的变量，可以赋值给 <code class="code-81e98f88" data-slate-leaf="true">number</code><span data-offset-key="15664:10" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMnVuZGVmaW5lZCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJjb2RlJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJTIwJUU1JTkyJThDJTIwJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMm51bGwlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNiU5OCVBRiVFNiU4OSU4MCVFNiU5QyU4OSVFNyVCMSVCQiVFNSU5RSU4QiVFNyU5QSU4NCVFNSVBRCU5MCVFNyVCMSVCQiVFNSU5RSU4QiVFMyU4MCU4MiVFNCVCOSU5RiVFNSVCMCVCMSVFNiU5OCVBRiVFOCVBRiVCNCUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJ1bmRlZmluZWQlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNyVCMSVCQiVFNSU5RSU4QiVFNyU5QSU4NCVFNSU4RiU5OCVFOSU4NyU4RiVFRiVCQyU4QyVFNSU4RiVBRiVFNCVCQiVBNSVFOCVCNSU4QiVFNSU4MCVCQyVFNyVCQiU5OSUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJudW1iZXIlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNyVCMSVCQiVFNSU5RSU4QiVFNyU5QSU4NCVFNSU4RiU5OCVFOSU4NyU4RiVFRiVCQyU5QSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE"> 类型的变量：</li>
<li>
<div class="cnblogs_code">
<pre>// 这样不会报错
let num: number = undefined;

// 这样也不会报错
let u: undefined;
let num: number = u;</pre>
</div>
</li>
<li>ts中定义any(任意类型:变量值可以为任意类型),<span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBNiU4MiVFNiU5RSU5QyVFNiU5OCVBRiVFNCVCOCU4MCVFNCVCOCVBQSVFNiU5OSVBRSVFOSU4MCU5QSVFNyVCMSVCQiVFNSU5RSU4QiVFRiVCQyU4QyVFNSU5QyVBOCVFOCVCNSU4QiVFNSU4MCVCQyVFOCVCRiU4NyVFNyVBOCU4QiVFNCVCOCVBRCVFNiU5NCVCOSVFNSU4RiU5OCVFNyVCMSVCQiVFNSU5RSU4QiVFNiU5OCVBRiVFNCVCOCU4RCVFOCVBMiVBQiVFNSU4NSU4MSVFOCVBRSVCOCVFNyU5QSU4NCVFRiVCQyU5QSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">如果是一个普通类型，在赋值过程中改变类型是不被允许的：<code class="code-81e98f88" data-slate-leaf="true">any</code><span data-offset-key="276b8c0a0b324566ab55156abe66394d:2" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMmFueSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJjb2RlJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJTIwJUU3JUIxJUJCJUU1JTlFJThCJUVGJUJDJThDJUU1JTg4JTk5JUU1JTg1JTgxJUU4JUFFJUI4JUU4JUEyJUFCJUU4JUI1JThCJUU1JTgwJUJDJUU0JUI4JUJBJUU0JUJCJUJCJUU2JTg0JThGJUU3JUIxJUJCJUU1JTlFJThCJUUzJTgwJTgyJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlNUQlN0QlNUQlN0QlNUQlN0QlNUQlN0Q="> 类型，则允许被赋值为任意类型。 <code>let anyData:any=''</code></li>
<li>
<div class="cnblogs_code">
<pre>//普通类型会报错
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

//any类型不会报错
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;</pre>
</div>
</li>
<li>定义数组：</li>
</ul>
第一种:元素类型后面加一个[] 
<div class="cnblogs_code">
<pre>// 定义一个组成元素为数字的数组
let arr1:number[]=[1,2,3,4]
//定义一个字符数组
let arr2:string[]=['jack','robin','pony']
// 定义一个对象数组
let arr3:object[]=[
{name:'jack',age:1967},
{name:'robin',age:1968},
{name:'pony',birthday:1974}
]</pre>
</div>
<ul>
<li>第二种:使用数组泛型,<code>Array<元素类型></code></li>
</ul>
<div class="cnblogs_code">
<pre>//定义一个组成元素为字符的数组
let arr1:Array<string>=['jack','robin','pony']
//定一个数字数组
let arr2:Array<number>=[1,2,3,4]
//定义一个对象数组
let arr3:Array<object>=[
{name:'jack',age:1967},
{name:'robin',age:1968},
{name:'pony',birthday:1974}
]</pre>
</div>
<ul>
<li>对象的定义</li>
</ul>
　　　　方案1：
　　　　
<div class="cnblogs_code">
<pre>// 在对象名后面使用一个{}来进行对象属性值类型的约束
let obj:{name:string,age:number,isMarry:boolean}={
name:'zs',
age:30,
isMarry:false
}</pre>
</div>
　　　　方案2：
定义了一个接口 <code class="code-81e98f88" data-slate-leaf="true">Person</code>，接着定义了一个变量 p1<code class="code-81e98f88" data-slate-leaf="true"></code>，它的类型是 <code class="code-81e98f88" data-slate-leaf="true">Person</code>。这样，我们就约束了 p1<code class="code-81e98f88" data-slate-leaf="true"></code> 的形状必须和接口 <code class="code-81e98f88" data-slate-leaf="true">Person</code><span data-offset-key="16a5c65b67db4b41a63538f70398c42d:10" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBRSU5QSVFNCVCOSU4OSVFNCVCQSU4NiVFNCVCOCU4MCVFNCVCOCVBQSVFNiU4RSVBNSVFNSU4RiVBMyUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJQZXJzb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFRiVCQyU4QyVFNiU4RSVBNSVFNyU5RCU4MCVFNSVBRSU5QSVFNCVCOSU4OSVFNCVCQSU4NiVFNCVCOCU4MCVFNCVCOCVBQSVFNSU4RiU5OCVFOSU4NyU4RiUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJ0b20lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFRiVCQyU4QyVFNSVBRSU4MyVFNyU5QSU4NCVFNyVCMSVCQiVFNSU5RSU4QiVFNiU5OCVBRiUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJQZXJzb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFMyU4MCU4MiVFOCVCRiU5OSVFNiVBMCVCNyVFRiVCQyU4QyVFNiU4OCU5MSVFNCVCQiVBQyVFNSVCMCVCMSVFNyVCQSVBNiVFNiU5RCU5RiVFNCVCQSU4NiUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJ0b20lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNyU5QSU4NCVFNSVCRCVBMiVFNyU4QSVCNiVFNSVCRiU4NSVFOSVBMSVCQiVFNSU5MiU4QyVFNiU4RSVBNSVFNSU4RiVBMyUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJQZXJzb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNCVCOCU4MCVFOCU4NyVCNCVFMyU4MCU4MiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE"> 一致。
 <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBRSU5QSVFNCVCOSU4OSVFNyU5QSU4NCVFNSU4RiU5OCVFOSU4NyU4RiVFNiVBRiU5NCVFNiU4RSVBNSVFNSU4RiVBMyVFNSVCMCU5MSVFNCVCQSU4NiVFNCVCOCU4MCVFNCVCQSU5QiVFNSVCMSU5RSVFNiU4MCVBNyVFNiU5OCVBRiVFNCVCOCU4RCVFNSU4NSU4MSVFOCVBRSVCOCVFNyU5QSU4NCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">定义的变量比接口少了一些属性是不允许的,<span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBNCU5QSVFNCVCOCU4MCVFNCVCQSU5QiVFNSVCMSU5RSVFNiU4MCVBNyVFNCVCOSU5RiVFNiU5OCVBRiVFNCVCOCU4RCVFNSU4NSU4MSVFOCVBRSVCOCVFNyU5QSU4NCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">多一些属性也是不允许的,赋值的时候，变量的形状必须和接口的形状保持一致<span data-offset-key="8f81b38d6a30490383df21a20d51c3a5:2" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOCVCNSU4QiVFNSU4MCVCQyVFNyU5QSU4NCVFNiU5NyVCNiVFNSU4MCU5OSVFRiVCQyU4QyVFNSU4RiU5OCVFOSU4NyU4RiVFNyU5QSU4NCVFNSVCRCVBMiVFNyU4QSVCNiVFNSVCRiU4NSVFOSVBMSVCQiVFNSU5MiU4QyVFNiU4RSVBNSVFNSU4RiVBMyVFNyU5QSU4NCVFNSVCRCVBMiVFNyU4QSVCNiVFNCVCRiU5RCVFNiU4QyU4MSVFNCVCOCU4MCVFOCU4NyVCNCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJib2xkJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgwJTgyJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlNUQlN0QlNUQlN0QlNUQlN0QlNUQlN0Q=">。
<div class="cnblogs_code">
<pre>// 使用接口定义属性值的类型
interface Person={
name:string;
age:number;
isMarry:boolean;
}
// 创建对象的时候引用该接口, 进行属性值类型的约束
let p1:Person={
name:'zs',
age:30,
isMarry:false
}</pre>
</div>
 
<h3>函数的定义</h3>
<span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSU4NyVCRCVFNiU5NSVCMCVFNiU5QyU4OSVFOCVCRSU5MyVFNSU4NSVBNSVFNSU5MiU4QyVFOCVCRSU5MyVFNSU4NyVCQSVFRiVCQyU4QyVFOCVBNiU4MSVFNSU5QyVBOCUyMFR5cGVTY3JpcHQlMjAlRTQlQjglQUQlRTUlQUYlQjklRTUlODUlQjYlRTglQkYlOUIlRTglQTElOEMlRTclQkElQTYlRTYlOUQlOUYlRUYlQkMlOEMlRTklOUMlODAlRTglQTYlODElRTYlOEElOEElRTglQkUlOTMlRTUlODUlQTUlRTUlOTIlOEMlRTglQkUlOTMlRTUlODclQkElRTklODMlQkQlRTglODAlODMlRTglOTklOTElRTUlODglQjAlRUYlQkMlOEMlRTUlODUlQjYlRTQlQjglQUQlRTUlODclQkQlRTYlOTUlQjAlRTUlQTMlQjAlRTYlOTglOEUlRTclOUElODQlRTclQjElQkIlRTUlOUUlOEIlRTUlQUUlOUElRTQlQjklODklRTglQkUlODMlRTclQUUlODAlRTUlOEQlOTUlRUYlQkMlOUElMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">　　函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到
        加入了类型的约束,只要体现在参数和返回值上面
　　1.  <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSU4NyVCRCVFNiU5NSVCMCVFNSVBMyVCMCVFNiU5OCU4RSVFNyU5QSU4NCVFNyVCMSVCQiVFNSU5RSU4QiVFNSVBRSU5QSVFNCVCOSU4OSVFOCVCRSU4MyVFNyVBRSU4MCVFNSU4RCU5NSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">函数声明的类型定义
<div class="cnblogs_code">
<pre>function sum(a:number,b:number):string{
return '求和结果为:'+(a+b);
}</pre>
</div>
　<span style="color: rgba(255, 0, 0, 1)" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOCVCRSU5MyVFNSU4NSVBNSVFNSVBNCU5QSVFNCVCRCU5OSVFNyU5QSU4NCVFRiVCQyU4OCVFNiU4OCU5NiVFOCU4MCU4NSVFNSVCMCU5MSVFNCVCQSU4RSVFOCVBNiU4MSVFNiVCMSU4MiVFNyU5QSU4NCVFRiVCQyU4OSVFNSU4RiU4MiVFNiU5NSVCMCVFRiVCQyU4QyVFNiU5OCVBRiVFNCVCOCU4RCVFOCVBMiVBQiVFNSU4NSU4MSVFOCVBRSVCOCVFNyU5QSU4NCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJib2xkJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">输入多余的（或者少于要求的）参数，是不被允许的
<span style="color: rgba(255, 0, 0, 1)" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOCVCRSU5MyVFNSU4NSVBNSVFNSVBNCU5QSVFNCVCRCU5OSVFNyU5QSU4NCVFRiVCQyU4OCVFNiU4OCU5NiVFOCU4MCU4NSVFNSVCMCU5MSVFNCVCQSU4RSVFOCVBNiU4MSVFNiVCMSU4MiVFNyU5QSU4NCVFRiVCQyU4OSVFNSU4RiU4MiVFNiU5NSVCMCVFRiVCQyU4QyVFNiU5OCVBRiVFNCVCOCU4RCVFOCVBMiVBQiVFNSU4NSU4MSVFOCVBRSVCOCVFNyU5QSU4NCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJib2xkJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">  　　2. 函数表达式定义
<div class="codeLine-a3169fbc" data-key="22233">
<div class="cnblogs_code">
<pre>let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
};</pre>
</div>
注意不要混淆了 TypeScript 中的 <code class="code-81e98f88" data-slate-leaf="true">=></code> 和 ES6 中的 <code class="code-81e98f88" data-slate-leaf="true">=></code>。
<p class="blockParagraph-544a408c" style="margin-left: 30px" data-key="22248" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNiVCMyVBOCVFNiU4NCU4RiVFNCVCOCU4RCVFOCVBNiU4MSVFNiVCNyVCNyVFNiVCNyU4NiVFNCVCQSU4NiUyMFR5cGVTY3JpcHQlMjAlRTQlQjglQUQlRTclOUElODQlMjAlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJTNEJTNFJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJtYXJrJTIyJTJDJTIydHlwZSUyMiUzQSUyMmNvZGUlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTdEJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjIlMjAlRTUlOTIlOEMlMjBFUzYlMjAlRTQlQjglQUQlRTclOUElODQlMjAlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJTNEJTNFJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJtYXJrJTIyJTJDJTIydHlwZSUyMiUzQSUyMmNvZGUlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTdEJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjIlRTMlODAlODIlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmJsb2NrJTIyJTJDJTIydHlwZSUyMiUzQSUyMnBhcmFncmFwaCUyMiUyQyUyMmlzVm9pZCUyMiUzQWZhbHNlJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCUyQyUyMm5vZGVzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIydGV4dCUyMiUyQyUyMmxlYXZlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJUU1JTlDJUE4JTIwVHlwZVNjcmlwdCUyMCVFNyU5QSU4NCVFNyVCMSVCQiVFNSU5RSU4QiVFNSVBRSU5QSVFNCVCOSU4OSVFNCVCOCVBRCVFRiVCQyU4QyUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjIlM0QlM0UlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMm1hcmslMjIlMkMlMjJ0eXBlJTIyJTNBJTIyY29kZSUyMiUyQyUyMmRhdGElMjIlM0ElN0IlN0QlN0QlNUQlN0QlMkMlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiUyMCVFNyU5NCVBOCVFNiU5RCVBNSVFOCVBMSVBOCVFNyVBNCVCQSVFNSU4NyVCRCVFNiU5NSVCMCVFNyU5QSU4NCVFNSVBRSU5QSVFNCVCOSU4OSVFRiVCQyU4QyVFNSVCNyVBNiVFOCVCRSVCOSVFNiU5OCVBRiVFOCVCRSU5MyVFNSU4NSVBNSVFNyVCMSVCQiVFNSU5RSU4QiVFRiVCQyU4QyVFOSU5QyU4MCVFOCVBNiU4MSVFNyU5NCVBOCVFNiU4QiVBQyVFNSU4RiVCNyVFNiU4QiVBQyVFOCVCNSVCNyVFNiU5RCVBNSVFRiVCQyU4QyVFNSU4RiVCMyVFOCVCRSVCOSVFNiU5OCVBRiVFOCVCRSU5MyVFNSU4NyVCQSVFNyVCMSVCQiVFNSU5RSU4QiVFMyU4MCU4MiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">在 TypeScript 的类型定义中，<code class="code-81e98f88" data-slate-leaf="true">=></code> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
 　　3. <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJoZWFkaW5nLTElMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNyU5NCVBOCVFNiU4RSVBNSVFNSU4RiVBMyVFNSVBRSU5QSVFNCVCOSU4OSVFNSU4NyVCRCVFNiU5NSVCMCVFNyU5QSU4NCVFNSVCRCVBMiVFNyU4QSVCNiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">用接口定义函数的形状</div>
<div class="codeLine-a3169fbc" data-key="22233">　　
<div class="cnblogs_code">
<pre>interface SearchFunc {
(source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
return source.search(subString) !== -1;
}</pre>
</div>
<h2>类(class)</h2>
<div class="cnblogs_code">
<pre>// 类(class)相当于ES5中的构造函数

class Person{
// 声明静态属性
static version:string='V1.0.0';
//声明成员属性; 并进行数据类型的约束
name:string;
age:number;
sex:string;
//构造函数,做一些初始化的事,比如给成员属性赋值
 constructor(props){
 //成员属性赋值
 this.name=props.name;
 this.age=props.age;
 this.sex=props.sex;
}
//声明成员方法1
 sayName(){
 console.log('My name is '+this.name);
}
//声明成员方法2
 dance(){
 console.log('我会跳新疆舞');
}
// 静态成员方法
static sayHi():string{
 console.log('hello world!!!');
 return 'hello world!!';
}
}
//创建实例:和js中一样
let p1=new Person({name:'zs',age:10,sex:'男'})</pre>
</div>
<h3>类的继承(extends)</h3>
<div class="cnblogs_code">
<pre>//通过extends语法结构继承Person类的属性和方法
class Student extends Person{
//声明自己独有的成员属性; 并进行数据类型的约束
addr:string;
constructor(props){
 //必须在此处使用super()先调用父类的构造函数
 super(props);
 //属性赋值
 this.addr=props.addr
}
//添加自己独有的成员方法
 hobby(){
 console.log('爱生活,爱代码');
}

}
//创建实例对象
let s1=new Student({name:'ls',age:10,sex:'女',addr:'中国西安'});</pre>
</div>
 
<h1 class="reset-3c756112--pageTitle-33dc39a3">类型别名</h1>
<span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNyVCMSVCQiVFNSU5RSU4QiVFNSU4OCVBQiVFNSU5MCU4RCVFNyU5NCVBOCVFNiU5RCVBNSVFNyVCQiU5OSVFNCVCOCU4MCVFNCVCOCVBQSVFNyVCMSVCQiVFNSU5RSU4QiVFOCVCNSVCNyVFNCVCOCVBQSVFNiU5NiVCMCVFNSU5MCU4RCVFNSVBRCU5NyVFMyU4MCU4MiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">类型别名用来给一个类型起个新名字。
<div class="cnblogs_code">
<pre>type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
 return n;
} else {
 return n();
}
}</pre>
</div>
<h1 class="reset-3c756112--pageTitle-33dc39a3">字符串字面量类型</h1>
<span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBRCU5NyVFNyVBQyVBNiVFNCVCOCVCMiVFNSVBRCU5NyVFOSU5RCVBMiVFOSU4NyU4RiVFNyVCMSVCQiVFNSU5RSU4QiVFNyU5NCVBOCVFNiU5RCVBNSVFNyVCQSVBNiVFNiU5RCU5RiVFNSU4RiU5NiVFNSU4MCVCQyVFNSU4RiVBQSVFOCU4MyVCRCVFNiU5OCVBRiVFNiU5RiU5MCVFNSU4NyVBMCVFNCVCOCVBQSVFNSVBRCU5NyVFNyVBQyVBNiVFNCVCOCVCMiVFNCVCOCVBRCVFNyU5QSU4NCVFNCVCOCU4MCVFNCVCOCVBQSVFMyU4MCU4MiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">字符串字面量类型用来约束取值只能是某几个字符串中的一个。
<div class="cnblogs_code">
<pre>type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}

handleEvent(document.getElementById('hello'), 'scroll');// 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'

// index.ts(7,47): error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.</pre>
</div>
使用 <code class="code-81e98f88" data-slate-leaf="true">type</code> 定了一个字符串字面量类型 <code class="code-81e98f88" data-slate-leaf="true">EventNames</code><span data-offset-key="86179c558ea147629b0461a3ffd5cfd9:4" data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNCVCRCVCRiVFNyU5NCVBOCUyMCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjJ0eXBlJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJtYXJrJTIyJTJDJTIydHlwZSUyMiUzQSUyMmNvZGUlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTdEJTVEJTdEJTJDJTdCJTIyb2JqZWN0JTIyJTNBJTIybGVhZiUyMiUyQyUyMnRleHQlMjIlM0ElMjIlMjAlRTUlQUUlOUElRTQlQkElODYlRTQlQjglODAlRTQlQjglQUElRTUlQUQlOTclRTclQUMlQTYlRTQlQjglQjIlRTUlQUQlOTclRTklOUQlQTIlRTklODclOEYlRTclQjElQkIlRTUlOUUlOEIlMjAlMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyRXZlbnROYW1lcyUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTdCJTIyb2JqZWN0JTIyJTNBJTIybWFyayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJjb2RlJTIyJTJDJTIyZGF0YSUyMiUzQSU3QiU3RCU3RCU1RCU3RCUyQyU3QiUyMm9iamVjdCUyMiUzQSUyMmxlYWYlMjIlMkMlMjJ0ZXh0JTIyJTNBJTIyJUVGJUJDJThDJUU1JUFFJTgzJUU1JThGJUFBJUU4JTgzJUJEJUU1JThGJTk2JUU0JUI4JTg5JUU3JUE3JThEJUU1JUFEJTk3JUU3JUFDJUE2JUU0JUI4JUIyJUU0JUI4JUFEJUU3JTlBJTg0JUU0JUI4JTgwJUU3JUE3JThEJUUzJTgwJTgyJTIyJTJDJTIybWFya3MlMjIlM0ElNUIlNUQlN0QlNUQlN0QlNUQlN0QlNUQlN0Q=">，它只能取三种字符串中的一种。取其余的会报错
</div>
 参考文章：TypeScript 入门教程 https://ts.xcatliu.com/
                  TypeScript 官方指南  https://www.tslang.cn/docs/handbook/basic-types.html
  
来源：https://www.cnblogs.com/hanguidong/p/11969535.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript