TS语言学习记录

博主：小草林
发布时间：2022 年 07 月 12 日
325 次浏览
暂无评论
2400字数
分类：编程日常-TS/JS

> 由于鸿蒙3.0的变更，使得鸿蒙开发必须用ets语言写业务逻辑，所以我花了1.5天的时间学习了一下TypeScript
> 在有着Java和少量Js的基础下，学习TS语言还是相对轻松的

# 1. 配置编译器以及开发环境

1. 下载、安装Webstorm
2. 提前我已经装好nodejs 14.19.3[建议]版本以及TS语言(只要你安装过鸿蒙DevEco 3.0 Beta4,就会自动安装nodejs)
3. 安装TS语言[前提已安装nodejs]：

```
   Node.js
   命令行的TypeScript编译器可以使用Node.js包来安装。
   安装
   npm install -g typescript
   编译
   tsc helloworld.ts
```

4. 默认Webstorm会自动将.ts文件编译为.js，但为了可以直接调试/运行.ts文件，需要安装插件`run-configuration-for-typescript`[直达链接](https://plugins.jetbrains.com/plugin/10841-run-configuration-for-typescript)

# 2. 开发配置

这里记录一下自己`tsconfig.json`的配置文件:

```
{
"include": [
"./src/main/**/*.ts",
"./src/test/**/*"
],
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"lib": [
"es2015","dom","es5"
],
"sourceMap": true,
"allowJs": false, // 允许编译器编译JS，JSX文件
"checkJs": false, // 允许在JS文件中报错，通常与allowJS一起使用
"removeComments": true, // 删除注释
"esModuleInterop": true, // 允许export=导出，由import from 导入
/* 严格检查选项 */
"strict": true, // 开启所有严格的类型检查
"alwaysStrict": true, // 在代码中注入'use strict'
"noImplicitAny": true, // 不允许隐式的any类型
"noImplicitThis": true, // 不允许this有隐式的any类型
"strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
"strictBindCallApply": true, // 严格的bind/call/apply检查
"strictFunctionTypes": true, // 不允许函数参数双向协变
"strictPropertyInitialization": true, // 类的实例属性必须初始化
/* 额外检查 */
"noUnusedLocals": true,//是否检查未使用的局部变量
"noUnusedParameters": true,//是否检查未使用的参数
"noImplicitReturns": true,//检查函数是否不含有隐式返回值
"noFallthroughCasesInSwitch": true,//检查switch中是否含有case没有使用break跳出
"suppressExcessPropertyErrors": false,//不抑制属性错误提示
"suppressImplicitAnyIndexErrors": false,//不抑制隐式any索引错误提示
/* 实验选项 */
"experimentalDecorators": true,//是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准
"emitDecoratorMetadata": true,//为装饰器启用对发出类型元数据的实验性支持
/* 高级选项 */
"forceConsistentCasingInFileNames": true,//是否区分文件系统大小写规则
"extendedDiagnostics": true,//是否查看 TS 在编译时花费的时间
"noEmitOnError": true,//有错误时不进行编译
"resolveJsonModule": true,//是否解析 JSON 模块
"charset": "utf8",//设置编译文件的编码格式，默认为utf8
"pretty": true,//是否美化输出，默认为false
"declaration": true,//是否生成.d.ts文件
},
"exclude": [
"node_modules"
]
}
```

# 3.学习网址

1. [TypeScript官网](https://www.tslang.cn/docs/home.html)；建议从[基础类型](https://www.tslang.cn/docs/handbook/basic-types.html)学起
2. [TS官方的一些示例](https://www.tslang.cn/play/index.html)
3. 也可以参考这里：[菜鸟教程](https://m.runoob.com/typescript/)

最后修改：2022 年 09 月 19 日