webpack集成ts（typescript）

2020-05-16 19:53:06 阅读：201 来源： 互联网

标签：TypeScript string ts webpack typescript User id

typscript是什么？

Typescript是一种基于静态类型检查的强类型语言

弱类型：javaScript是动态运行的弱类型语言，例如：

 　　var a=1;
 　　a='hello'

强类型列如：

  　　let str: string = 'hello ts';
 　　 str=1
下面会给你显示：不能将类型“999”分配给类型“string”。

今年要发布vue3.0源码是用TS写的

typescript和javaScript是什么关系?

typescript是javaScript的一个超集，比JS多了类型静态检查功能，typeScript是由微软公司于2014年开发的，浏览器不支持支持TypeScript，必须通过编译器把TypeScript编译成JS，才可以跑在浏览器

安装TypeScript编译器 ：  npm install -g typescript

typeScript官方文档：https://www.typescriptlang.org

webpack与TS集成

安装typescript
```
npm install typescript ts-loader -D
```

配置ts-loader

 {test:/\.ts$/,exclude: /node_modules/,use:['ts-loader']}

创建tsconfig.json文件
```
tsc --init
```

配置模块化引入文件的缺省类型

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: []

TypeScript语法

TS数据类型

　　支持所有的JS数据类型，还包括TS中添加的数据类型

JS基本数据类型有哪些：number,string,boolean,undefined,null

JS引用类型：Array,Object,function

TS除了上面支持的类型外，还支持：元组，枚举，any,void,never

JavaScript： const user = { name: "Hayes", id: 0, };

TypeScript：

interface User { name: string; id: number; }

可以interface像: TypeName在变量声明之后那样使用语法来声明JavaScript对象符合新形状：

const user: User = { name: "Hayes", id: 0, };

如果您提供的对象与您提供的接口不匹配，TypeScript会警告您：

interface User { name: string; id: number; } const user: User = { username: "Hayes",

 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'.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'.

id: 0, };

TypeScript了解代码如何随时间改变变量的含义，您可以使用这些检查来缩小类型的范围。

类型	谓语
串	`typeof s === "string"`
数	`typeof n === "number"`
布尔值	`typeof b === "boolean"`
未定义	`typeof undefined === "undefined"`
功能	`typeof f === "function"`
数组	`Array.isArray(a)`

官方ts文档：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

标签：TypeScript,string,ts,webpack,typescript,User,id
来源： https://www.cnblogs.com/akby/p/12901890.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack集成ts（typescript）

typscript是什么？

webpack与TS集成

TypeScript语法