TypeScript学习_入门向

布偶喵 發表於 2022-4-12 12:18:00

<h1 class="md-end-block md-heading" style="text-align: center"><span class="md-plain md-expand">TypeScript学习_入门向</span></h1>
<h2 class="md-end-block md-heading"><span class="md-plain">1-TypeScript简介</span></h2>
<p class="md-end-block md-p"><span class="md-plain">首先官网祭天 ---> <span class="md-link md-pair-s">https://www.tslang.cn/</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。</span></p>
<p class="md-end-block md-p"><span class="md-plain">TypeScript 由微软开发的自由和开源的编程语言。</span></p>
<p class="md-end-block md-p"><span class="md-plain">TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。</span></p>
<p class="md-end-block md-p"><span class="md-plain">我们使用一张图来说明TypeScript和JavaScript的关系</span></p>
<p class="md-end-block md-p"><img src="https://img2022.cnblogs.com/blog/2767461/202204/2767461-20220412103613831-671028511.png" alt="" loading="lazy"></p>
<p> </p>
<p> <span class="md-plain">使用更加简单的说法：</span></p>
<p class="md-end-block md-p md-focus"> </p>
<p class="md-end-block md-p"><span class="md-plain">TypeScript = JavaScript + 类型约束 + 高级特性</span></p>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">我们一般只会在项目中使用类型约束，高级特性我就先不涉及了。</span></p>
</blockquote>
<h2 class="md-end-block md-heading"> </h2>
<h2 class="md-end-block md-heading"><span class="md-plain">2-环境准备</span></h2>
<p class="md-end-block md-p"><span class="md-plain">TypeScript最终会编译成js来运行，所以我们需要先准备好将TypeScript编译为js的环境。</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">a.安装TypeScript</span></h3>
<p class="md-end-block md-p"><span class="md-plain">首先全局安装ts</span></p>
<pre class="language-bash"><code> npm install -g typescript</code></pre>
<p class="md-end-block md-p"><span class="md-plain">然后可以使用命令来验证安装是否成功了。</span></p>
<div class="cnblogs_code">
<pre> tsc --version</pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain">b.使用tsc命令编译ts为js</span></h3>
<pre class="language-bash"><code> tsc ./src/xxx.ts</code></pre>
<p class="md-end-block md-p"><span class="md-plain">这时候会自动生成对应的.js文件</span></p>
<p class="md-end-block md-p"><span class="md-plain">然后我们就可以执行对应的js文件。</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">c.配置tsconfig文件</span></h3>
<p class="md-end-block md-p"><span class="md-plain">但是每次都使用tsc命令编译单个文件会比较麻烦，所以我们可以做一个统一配置</span></p>
<p class="md-end-block md-p"><span class="md-plain">先使用 <span class="md-pair-s"><code>tsc --init</code><span class="md-plain"> 命令初始化一个 <span class="md-pair-s"><code>tsconfig.json</code><span class="md-plain"> 文件</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain"><span class="md-pair-s"><span class="md-plain"><span class="md-pair-s"><span class="md-plain">然后输入在终端代码<code>tsc -p .\tsconfig.json --watch</code>,开启监听文件(之后只要你新建了TS文件,Vscode会自动帮你新建对应的JS文件):</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">这时你会发现,新建的文件是在全局目录下,你需要在<span class="md-pair-s"><code>tsconfig.json</code>中找到 </span></span><code>"outDir": "./"</code>,将它的注释解开,并且将路径修改为<code>"outDir": "./js"</code>,相对应的你需要在全局路径下新建一个js文件夹,用于存放js文件,当然,你要是想配置在其他路径里,也可以通过这个配置项修改.</p>
<p class="md-end-block md-p">或者用以下配置方法</p>
<p class="md-end-block md-p"><span class="md-plain">里面配置如下：</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">compilerOptions</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: {
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">target</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ESNext</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">module</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ESNext</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">outDir</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./dist</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">skipLibCheck</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
...
}
}</span></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain">然后我们只需要 <span class="md-pair-s"><code>tsc</code><span class="md-plain"> 一下，所有的ts文件就能被编译了。</span></span></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">d.自动编译</span></h3>
<p class="md-end-block md-p"><span class="md-plain">之后我们只需要启动vscode的监听任务功能，就能自动编译了。</span></p>
<p class="md-end-block md-p"><span class="md-plain">1.选择终端 -> 运行任务</span></p>
<p class="md-end-block md-p"><img src="https://img2022.cnblogs.com/blog/2767461/202204/2767461-20220412103932236-1733578543.png" alt="" loading="lazy"></p>
<p class="md-end-block md-p"><span class="md-plain">2.选择typescript类型的任务</span></p>
<p class="md-end-block md-p"><img src="https://img2022.cnblogs.com/blog/2767461/202204/2767461-20220412103940785-234254308.png" alt="" loading="lazy"></p>
<p class="md-end-block md-p"><span class="md-plain">3.选择监视任务</span></p>
<p class="md-end-block md-p"><img src="https://img2022.cnblogs.com/blog/2767461/202204/2767461-20220412103951853-738757751.png" alt="" loading="lazy"></p>
<h2 class="md-end-block md-heading"> </h2>
<h2 class="md-end-block md-heading"><span class="md-plain">3-变量类型约束</span></h2>
<div>
<div>ts里面声明变量和常量，固定语法 :</div>
<blockquote>
<div>        let/const/var 变量:类型 = 值;</div>
</blockquote>
</div>
<div>其实ts也可以自动进行类型的推导：</div>
<div>
<pre class="language-typescript"><code>let str:string = "abc";
let str2 = "DeF";</code></pre>
</div>
<div>
<p> </p>
<p>类型大小写的区别：</p>
<pre class="language-typescript"><code>// 小写的number指的是字面量类型的数字
let str3:number;
// 大写的Number指的是对象类型的数字
let n:Number;</code></pre>
</div>
<div>
<div>所以在没法进行类型推导的时候，一定把类型约束加上，</div>
<div> </div>
</div>
<p class="md-end-block md-p"><span class="md-plain">我们在ts里面，基本都会给任何一个数据添加类型约束。基本语法如下：</span></p>
<pre class="language-typescript"><code>const/let/var 变量名:数据类型=数据;</code></pre>
<p class="md-end-block md-p"><span class="md-plain">例如：</span></p>
<div class="cnblogs_code">
<pre> const num:number = 10<span style="color: rgba(0, 0, 0, 1)">;
let str:string </span>= 'abc'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bool:<span style="color: rgba(0, 0, 255, 1)">boolean</span> = <span style="color: rgba(0, 0, 255, 1)">true</span>;</pre>
</div>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">在ts里面，类型一旦定义了，在代码执行过程中就不允许改变其类型。</span></p>
<div class="cnblogs_code">
<pre> let num:number = 10<span style="color: rgba(0, 0, 0, 1)">;
num </span>= 'abc'; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 报错：不能将类型“string”分配给类型“number”。</span></pre>
</div>
<p> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">4-any类型</span></h2>
<p class="md-end-block md-p"><span class="md-plain">唯一的一个例外，如果我们定义的类型是any，那么就可以被修改类型，因为这个any类型表示任意类型，会跳过ts的类型检查，其实是不安全的，如果不是迫不得已，我们不要使用any。</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> let value: any;
value </span>= 10<span style="color: rgba(0, 0, 0, 1)">;
value </span>= "abc"<span style="color: rgba(0, 0, 0, 1)">;
value </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
value </span>= undefined;</pre>
</div>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">5-复杂类型</span></h2>
<blockquote>
<div> 以前在 js 里面，所有的引用都 Object 类型</div>
<div>
<div class="cnblogs_code">
<pre>new Object() { }</pre>
</div>
</div>
<div> </div>
<div>但是在ts里面如果直接使用 {} / new Object(),是会报错的</div>
<div>
<pre class="language-typescript"><code>let obja = {}
obja.name = '狗蛋'; // 引用类型，在ts里面约束尤其严格</code></pre>
</div>
<div> </div>
<div>Date 对象有 Date 对象的属性和方法。</div>
<div>Math 对象有 Math对象的属性和方法。</div>
<div>两者都是对象，但是不能混为一谈，他们两种对象的属性和方法是完全不一样的，如果不区分，就没法推导对象身上的成员。</div>
</blockquote>
<div> </div>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">如果我们想约束一个复杂数据的类型，就要使用 <span class="md-pair-s"><code>type</code><span class="md-plain"> / <span class="md-pair-s"><code>interface</code><span class="md-plain"> / <span class="md-pair-s"><code>对象字面量</code><span class="md-plain"> 的方式。</span></span></span></span></span></span></span></p>
<p>在ts里面，每种对象都是一个类型，每种对象才能进行类型推导和类型约束。</p>
<p>有五个常用方式可以进行类型的约束。</p>
</blockquote>
<div>
<div> </div>
<div> </div>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain">a.对象字面量进行类型约束</span></h3>
<div>
<div>字面量  -->  直接使用 {属性名:类型}</div>
</div>
<div class="cnblogs_code">
<pre> let obj:{name:string,age:number} = {name:'狗蛋',age:12}</pre>
</div>
<h4>a-1 补充另外的字面量进行类型约束</h4>
<div>比如想定义一个人类的性别：</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> p1 : {name:string,gender:"男" | "女"<span style="color: rgba(0, 0, 0, 1)">};
p1 </span>=<span style="color: rgba(0, 0, 0, 1)"> {
name:</span>"狗蛋"<span style="color: rgba(0, 0, 0, 1)">,
gender : </span>"女"<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain">b.interface(接口)--开发常用</span></h3>
<div>
<div>在进行引用类型的约束的时候，除了字面量，还可以使用  interface 进行数据结构的约定：</div>
<div> </div>
<div>  语法：</div>
<div>
<pre class="language-typescript"><code>//接口名称其实怎么写都行，最好有一个约定： interface 都以 I 开头
   
interface 接口名称 {
               属性名:类型;
               ...
           }</code></pre>
</div>
<div>       interface 相比于字面量定义引用类型来说 <span style="color: rgba(224, 62, 45, 1)">在项目中使用得最多的</span></div>
<div>          <span style="color: rgba(224, 62, 45, 1)"> 1. interface 可以复用</span></div>
<div><span style="color: rgba(224, 62, 45, 1)">           2. 实现继承</span></div>
<div> </div>
</div>
<p class="md-end-block md-p"><span class="md-plain">interface主要用来约定一个复杂数据的类型。</span></p>
<pre class="language-typescript"><code> interface IUser{
id:number;
name:string;
gender:boolean;
}
let user:IUser = {
id:1,name:'狗蛋',gender:true
}</code></pre>
<div>
<div>接口继承：</div>
<div>
<pre class="language-typescript"><code>interface IPerseon{
id:number;
name:string;
age:number;
}
interface IStudent extends IPerseon{
number:number;
}

const s1:IStudent = {
id:2,
name:'翠花',
age:15,
number:1000
}</code></pre>
</div>
</div>
<p class="md-end-block md-p"><span class="md-plain">如果有一个属性是可能有可能没有的，可以使用可选的方式声明：</span></p>
<pre class="language-typescript"><code>interface IUser{
id:number;
name:string;
// ? 表示可选
gender ?: boolean;
}</code></pre>
<p> </p>
<h3 class="md-end-block md-heading"><span class="md-plain">c.type类型别名--开发常用</span></h3>
<div>
<div> 有时候我们会觉得一个类型的声明太麻烦，可以给该类型一个别名：</div>
<blockquote>
<div>type 别名 = 类型</div>
</blockquote>
</div>
<p class="md-end-block md-p"><span class="md-plain">type关键字用于取一个类型别名。</span></p>
<pre class="language-typescript"><code> // 类型别名
type mult = number | string;
let m:mult = 10; // 合法
m = 'abc'; // 合法</code></pre>
<p> </p>
<h3>d.泛类型TS</h3>
<div>
<div>泛型其实就是  类型参数化</div>
<div> </div>
<div>       有时候，我们在定义一个数据结构的时候，并不清楚将来这个数据是什么类型，希望将来使用的时候才确定；</div>
<div>       在使用这个类型的时候，再告诉ts进行推导就行；</div>
<div> </div>
<div>   以前发请求的时候：</div>
<div>       请求返回的数据主要有三大块：</div>
<div>
<pre class="language-typescript"><code>{
               code : number ;
               message : string ;
               data : ?  data的类型无法确定，不同的接口，返回的data是不一样，可能是 null ，可能是 boolean ，也可以是对象，还可能是数组
           }</code></pre>
</div>
<div> </div>
<div>  难道在请求的时候，data是any? <strong><span style="color: rgba(224, 62, 45, 1)">不对！！！</span></strong></div>
<div> </div>
<div>  此时就是在我们使用到这个data的时候，再确定这个data是什么类型 ----> 这就是泛型的使用场景</div>
<div> </div>
<div>   泛型的语法</div>
<blockquote>
<div>   类型<T,...> {</div>
<div>           属性:T,</div>
<div>       }</div>
</blockquote>
</div>
<pre class="language-typescript"><code>// 比如：
interface IExample1<T,N,M> {
// data的类型不能确定，传多个值必须声明对应个数的形参
data: T,
data2: N,
data3:M
}

let obj1:IExample1<string,string,boolean> = {
data:"abc",
data2:"def",
data3:true
}

let obj2:IExample1<number> = {
data:1
}

// 将来我们想确定请求回来的数据是什么类型
interface IResponse<T> {
code : number;
message : string;
data : T;
}</code></pre>
<h3> </h3>
<h3>e.函数TS</h3>
<div>
<div>ts里面函数的完整写法，相比会有点不同</div>
<br>
<div>    js 格式 :</div>
<div>      
<pre class="language-javascript"><code>  function 函数名(参数){
            函数体
        }</code></pre>
</div>
<br>
<div>    ts 格式：</div>
<div>       
<pre class="language-typescript"><code> function 函数名(参数:参数类型): 函数返回值的类型{

        }</code></pre>
<div>
<div>
<p> </p>
<pre class="language-typescript"><code>// 在参数后面加  :类型  意思是要求函数返回该类型
function addFn(a:number,b:number):number{
//必须return，return的类型必须是要求函数返回该类型
    return 'abc'
}</code></pre>
</div>
</div>
</div>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/Laoevil/p/16134515.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript学习_入门向