harmony OS NEXT-TypeScript
<h1 id="ts基础内容">TS基础内容</h1><h2 id="11-typescript简介">1.1 TypeScript简介</h2>
<ol>
<li>TypeScript是由微软开发，是基于JavaScript的一个扩展语言</li>
<li>TypeScript包含了JavaScript的所有内容，即：TypeScript是JavaScript的超能</li>
<li>TypeScript增加了：静态类型检查、接口、泛型等很多现代开发特性，因此适合更大型的项目开发</li>
<li>TypeScript需要编译为JavaScript,然后交给浏览器或其他JavaScript运行环境执行</li>
</ol>
<h2 id="12为何需要typescript">1.2为何需要TypeScript</h2>
<h3 id="121-javascript中的困扰">1.2.1 JavaScript中的困扰</h3>
<ol>
<li>不清不楚的数据类型</li>
<li>有漏洞的逻辑</li>
</ol>
<pre><code>cont str =Date.now()%2 ? '奇数'：'偶数'
if(str!=='奇数'){
alert('hello')
}else if(str === '偶数'){
alert('world')
}
</code></pre>
<ol start="3">
<li>
<p>低级的拼写错误</p>
</li>
<li>
<p>访问不存在的属性</p>
</li>
</ol>
<blockquote>
<p>在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时异常的出现的几率，此种检查叫做静态类型检查，Typescript的核心就是【静态类型检查】，简而言之就是把运行时的错误前置</p>
<p>同样的功能，TypeScript的代码量要大于JavaScript，但由于TypeScript的代码结构更加清晰，在后期代码的维护中TypeScript却远胜于JavaScript</p>
</blockquote>
<h2 id="13编译typescript">1.3 编译TypeScript</h2>
<blockquote>
<p>.ts文件编译其实还是转成了.js文件</p>
</blockquote>
<pre><code>利用TypeScript Complier 编译器
利用tsc命令把ts文件变成js文件（编译.ts文件）
tsc --init 为我生成一个ts的配置文件（这个配置文件里面写了ts文件要如何转化为js）
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/e081284e5405ed6773e6639aeea868bc.png"></p>
<pre><code>1.将"target"改成“es2025"这样版本为ES6
2.输入：tsc --watch index.ts //检测index.ts文件的变化，只要有一丝丝的变化，都要转化成index.js文件
3.检测当前工程里的所有TS文件：tsc --watch
</code></pre>
<p>优化：自动化编译犯错的时候，不要转化成js了</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/b3dfec0b3c38604b42d83509f347f48c.png"></p>
<h3 id="131-命令行编译">1.3.1 命令行编译</h3>
<blockquote>
<p>要把.ts文件编译为.js文件，需要配置TypeScript的编译环境，tsc步骤如下</p>
</blockquote>
<ul>
<li>第一步：创建一个demo.ts文件，例如：</li>
</ul>
<h3 id="132自动编译">1.3.2 自动编译</h3>
<h2 id="14类型声明类型注解">1.4 类型声明（类型注解）</h2>
<blockquote>
<p>作用：限制变量能赋值的数据类型并给出调用方法的提示</p>
</blockquote>
<pre><code class="language-htMl">//简单类型的注解完全按照JS的类型（全小写的格式）来书写即可
let age:number =18
let a:string //变量a只能存储字符串注意：string是小写，不要写成String
a=9 //报错
a=false //报错
a='Hello'//正确
let b:number //变量b只能存储数值
b=-99
let c:boolean //变量c只能存储布尔值
c=true
function count(x：number,y:number)：number{//限制函数接受参数的类型
return x+y //返回值也必须是number,由括号后边的：number限制
return x+y+"hello" //报错
}
let result =count(1,2)
count(1)//少传，错误
count(1,2,4)//多传，错误
//注意：定义的函数接受几个参数就需要给他去传入几个参数，多几个少几个都不行，限制的非常严格
console.log(result)
</code></pre>
<p>在：后也可以写字面量类型，不过实际开发用的不多</p>
<pre><code>let a:'你好'`
let b:100
//a的值存储的是'你好',你可以能会逆推,'你好'是字符串类型，所以a变量也可以存储字符串类型，但是是错误的，a变量只能存储'你好',这就称作是字面量类型
</code></pre>
<h2 id="15类型推断">1.5 类型推断</h2>
<p>TS会根据我们的代码，进行类型推导，例如下面代码中的变量d,只能存储数字</p>
<pre><code>let d=-99 //TypeScript会推断出变量的类型是数字
d=false //警告：不能将类型"boolean"分配给类型"number"
</code></pre>
<blockquote>
<p>但要注意：类型声明不是万能的，面对复杂类型的推断容易出现问题，所以尽量还是明确的编写类型声明！</p>
</blockquote>
<h2 id="16类型总览">1.6 类型总览</h2>
<pre><code>JavaScript中的数据类型
1.string
2.number
3.boolean
4.null
5.undefined
6.bigint
7.symbol
8.object
备注：其中object包含：Array、Function、Date、Error
</code></pre>
<pre><code>TypeScript中的所有数据类型
1.上述所有的JavaScript类型
2.六个新类型
3.TS新增类型：联合类型、类型别名、接口(interface)、字面量类型、泛型、枚举、void、any等
</code></pre>
<ol>
<li>any</li>
<li>unkonw</li>
<li>never</li>
<li>void</li>
<li>tuple</li>
<li>enum</li>
</ol>
<p>注意：两个用于自定义类型的方式</p>
<ol>
<li>type</li>
<li>interface</li>
</ol>
<p>注意点！</p>
<pre><code>在JavaScript中的这些内置构造函数：Number、String、Boolean、它们用于创建对应的包装类对象、在日常开发时很少使用，在TypeScript中也是同理，所以在TypeScript中进行类型声明，通常都是小写的number、string、boolean
</code></pre>
<pre><code>例如下面代码
let str1：string
str1:'hello'
str1=new String('hello')//报错
let str2:String
str2= "hello"
str2=new String('hello')
console.log(typeof str1)
console.log(typeod str2)
</code></pre>
<h3 id="161原始类型vs包装类型">1.6.1 原始类型VS包装类型</h3>
<ul>
<li>原始类型：如number、string、boolean,在JavaScript中是最简单的数据类型，它们在内存中占用的空间很少，处理速度快</li>
<li>包装对象：如Number对象、String对象、Boolean对象，是复杂的数据类型，在内存中占用更多的空间。在日常的开发中很少由开发人员自己创建包装对象</li>
<li>自动装箱：JavaScript在必要时会自动将原始类型包装成对象，以便调用方法或属性</li>
</ul>
<pre><code class="language-html">//原始类型字符串
let str='hello'
// str.length//字符串没有length属性，但是怎么取到的呢
//当访问str.length时，JavaScript引擎做了以下工作
let size=(function)() {
//1.自动装箱：创建一个临时的String对象包装原始字符串
let tempStringObject =new String(str)
//2.访问String对象的length属性
//3.销毁临时对象，返回长度值
//(JavaScript引擎自动处理对象销毁，开发者无感知)
return lengthValue
})()
console.log(size)
</code></pre>
<h3 id="17-常用类型">1.7 常用类型</h3>
<ol>
<li>any</li>
</ol>
<blockquote>
<p>any的含义是：任意类型，一旦将变量类型限制为any,那就意味着放弃了对该变量的类型检查</p>
</blockquote>
<pre><code class="language-html">//显式的定义
//明确的表示了a的类型是 any -[显示的any]
let a:any
//以下对a的复制，均无警告
a=99
a='hello'
a=false
//隐式的定义
//以下是对b的赋值，均无警告
let b
b=99
b='hello'
b=false
</code></pre>
<blockquote>
<p>注意点：any可以赋值给任意类型的变量</p>
</blockquote>
<pre><code class="language-html">"use strict";
let c;
c = 9;
let x;
x = c; //无警告
console.log(x);//输出9
</code></pre>
<ol start="2">
<li>unknow</li>
</ol>
<blockquote>
<p>unknow的含义是：未知类型</p>
<p>unkonw可以理解为一个类型安全的any,适用于：不确定·数据的具体类型</p>
</blockquote>
<p>unknow和any的差别就是</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/678efd1f7dfaf26a84f5c09c553de04b.png"></p>
<ul>
<li>unkonw 会强制开发者使用之前进行类型检查，从而提供更强的类型安全性</li>
</ul>
<pre><code class="language-html">let a:unknown
a=99
a=false
a='hello'
let x:string
// x=a
console.log(a)
//第一种手段
if(typeof a==='string'){
x=a
}
//第二种方法：用断言
x=a as string
//第三种（断言的两种写法）
x=<string>a
</code></pre>
<ul>
<li>读取any的任意类型都不会报错，而unkonw刚好恰恰相反</li>
</ul>
<pre><code class="language-html">let str1:string
str1='hello'
str1.toUpperCase() //无警告
let str2:any
str2;'hello'
str2.toUpperCase() //无警告
let str3:unknown
str3='hello'
str3.toUpperCase()//警告：“str3"的类型为”未知",调用不到
//三种方法调用
//if判断，断言
(str3 as string).toUpperCase()
</code></pre>
<ol start="3">
<li>never</li>
</ol>
<blockquote>
<p>如果用来限制变量就被我们玩坏了，是没有意义的，never并不是用来限制变量的，是用来限制函数的</p>
</blockquote>
<pre><code>function demo():number{//返回值是number类型
return 100//有返回值，并且是数值型
}
function demo():never{
throw new Error('程序异常')
}
let x=demo()
console.log(x)
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/8686f279ca707e2d4a78215dd5e898ad.png"></p>
<blockquote>
<p>never一般是TypeScript自动推断出来的</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/img_convert/d338e4637989971b4bca5279899bc150.png"></p>
<ol start="4">
<li>void</li>
</ol>
<ul>
<li>void通常用于函数返回值的声明，含义：【函数不返回任何值，调用者也不应该依赖某返回值进行任何操作】</li>
</ul>
<pre><code class="language-html">function logMessage(msg:string):void{
console.log(msg)
}
console.log('你好');
//void的空可以接受undefined>隐式返回值
</code></pre>
<p>所以以下都是符合语法规范的</p>
<pre><code class="language-html">//1.
function logMessage(msg:string):void{
console.log(msg)
}
console.log('你好');
//2.
function logMessage2(msg:string):void{
console.log(msg)
return;
}
console.log('你好');
//3.
function logMessage3(msg:string):void{
console.log(msg)
return undefined;
}
console.log('你好');
</code></pre>
<blockquote>
<p>声明成void 和undefined的区别</p>
</blockquote>
<pre><code>function demo(msg:string):void{
console.log(msg)
}
let result =demo("hi")
console.log(result)
if(result)//警告，后续不能进行操作
</code></pre>
<pre><code>function demo(msg:string):undefined{
console.log(msg)
return;
}
let result =demo("hi")
console.log(result)
if(result){
}//不会报错
</code></pre><br><br>
来源：https://www.cnblogs.com/yihonghh/p/18785339
頁:
[1]