webpack集成ts（typescript）
<h1>typscript是什么？</h1><p>Typescript是一种基于静态类型检查的强类型语言</p>
<ul>
<li>弱类型：javaScript是动态运行的弱类型语言，例如：</li>
</ul>
<pre><code> var a=1;
a='hello'
</code></pre>
<ul>
<li> 强类型 列如：</li>
</ul>
<pre><code> let str: string = 'hello ts';
str=1<br>下面会给你显示：不能将类型“999”分配给类型“string”。<br><br>今年要发布vue3.0源码是用TS写的<br><br></code></pre>
<blockquote>
<p>typescript和javaScript是什么关系?</p>
</blockquote>
<pre><code>typescript是javaScript的一个超集，比JS多了类型静态检查功能，</code><code>typeScript是由微软公司于2014年开发的，</code><code>浏览器不支持支持TypeScript，必须通过编译器把TypeScript编译成JS，才可以跑在浏览器</code></pre>
<pre><code>安装TypeScript编译器 ：npm install -g typescript</code></pre>
<p><span style="font-size: 18px"><code>typeScript官方文档：https://www.typescriptlang.org</code></span></p>
<p> </p>
<h1>webpack与TS集成</h1>
<ol>
<li>
<p>安装typescript</p>
<pre><code>npm install typescript ts-loader -D
</code></pre>
</li>
<li>
<p>配置ts-loader</p>
<pre><code> {test:/\.ts$/,exclude: /node_modules/,use:['ts-loader']}
</code></pre>
</li>
<li>
<p>创建tsconfig.json文件</p>
<pre><code>tsc --init
</code></pre>
</li>
<li>
<p>配置模块化引入文件的缺省类型</p>
<pre><code>const config = {
//指定模式：production-生产环境，development:开发环境
mode: "development",
//项目的入口文件
entry: "./src/main.ts",
output: {
//设置项目的输出目录
path: path.resolve(__dirname, "dist"),
//输出的文件名
filename: "bundle.js" //chunk
},
//webpack通过loader识别文件的匹配规则
module: {
rules: [
{test:/\.ts$/,exclude: /node_modules/,use:['ts-loader']}
]
},
//配置模块化引入文件的缺省类型
resolve: {
extensions:['.js','.ts']
},
plugins: []</code></pre>
</li>
</ol>
<h1>TypeScript语法</h1>
<p> </p>
<p>TS数据类型</p>
<p> 支持所有的JS数据类型，还包括TS中添加的数据类型</p>
<blockquote>
<p>JS基本数据类型有哪些：number,string,boolean,undefined,null</p>
<p>JS引用类型：Array,Object,function</p>
<p>TS除了上面支持的类型外，还支持：元组，枚举，any,void,never</p>
</blockquote>
<p><code>JavaScript：<br>const user = { name: "Hayes", id: 0, };<br></code></p>
<p>TypeScript：</p>
<p>interface User { name: string; id: number; }</p>
<p><span>可以</span><code>interface</code><span>像</span><code>: TypeName</code><span><span>在变量声明之后</span><span>那样使用语法</span><span>来声明JavaScript对象符合新形状</span><span>：</span></span></p>
<div class="code-container"><code>const user: User = { name: "Hayes", id: 0, };</code></div>
<div class="code-container"> </div>
<div class="code-container"> </div>
<div class="code-container">
<p><span>如果您提供的对象与您提供的接口不匹配，TypeScript会警告您：</span></p>
<div class="code-container"><code>interface User { name: string; id: number; } const user: User = { username: "Hayes",</code></div>
<div class="code-container"> </div>
<div class="code-container"><code> <span class="error">Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.<span class="error-behind">Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.</span></span></code></div>
<div class="code-container"> </div>
<div class="code-container"><code><span class="error"><span class="error-behind"> id: 0, };</span></span></code></div>
</div>
<div class="code-container"> </div>
<div class="code-container">
<p><span>TypeScript了解代码如何随时间改变变量的含义，您可以使用这些检查来缩小类型的范围。</span></p>
<table>
<thead>
<tr><th><span><span>类型</span></span></th><th><span><span>谓语</span></span></th></tr>
</thead>
<tbody>
<tr>
<td><span><span>串</span></span></td>
<td><code>typeof s === "string"</code></td>
</tr>
<tr>
<td><span><span>数</span></span></td>
<td><code>typeof n === "number"</code></td>
</tr>
<tr>
<td><span><span>布尔值</span></span></td>
<td><code>typeof b === "boolean"</code></td>
</tr>
<tr>
<td><span><span>未定义</span></span></td>
<td><code>typeof undefined === "undefined"</code></td>
</tr>
<tr>
<td><span><span>功能</span></span></td>
<td><code>typeof f === "function"</code></td>
</tr>
<tr>
<td><span><span>数组</span></span></td>
<td><code>Array.isArray(a)</code></td>
</tr>
</tbody>
</table>
</div>
<div class="code-container"> </div>
<div class="code-container"> </div>
<p class="code-container"><span style="font-size: 18px">官方ts文档：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html</span></p>
<div class="code-container"> </div><br><br>
来源：https://www.cnblogs.com/akby/p/12901890.html
頁:
[1]