TypeScript 基础入门(一)
1.typescript是什么?
typescript
是 javascript
的一个超集,typescript
在 javascript
的基础上添加了可选的 静态类型
和基于 类
的面向对象编程。
2.为什么要用 typescript ?
针对这个问题我们可以从两个方面来分析:
2.1 用typescript的目的是什么 ?
typescript
最大的目的是让程序员更具创造性,提高生产力,它将极大增强 javascript
编写应用的开发和调试环节,让 javascript
能够方便于编写大型应用和进行多人协作。
2.2 typescript 和 javascript 的对比
-
typescript
是一个应用程序级的javascript
开发语言。(这也表示 typescript 比较牛x,可以开发大型应用,或者说更适合大型应用。) -
typescript
是javascritpt
的超集,可以编译成纯javascript
。比较像less
和sass
,我们可以用更好的代码编写方式来进行编写,最后还是友好生成原生的javascript
语言。 -
typescript
跨浏览器、跨操作系统、跨主机、且开源。由于最后它编译成了javascript
所以只要能运行js
的地方,都可以运行我们写的程序,设置在node.js
里。 -
typescript
始于javascript
, 终于javascript
。遵循javascript
的语法和语义,所以对于我们前端从业者来说,学习起来的的心用手,并没有太大的难度。 -
typescript
可以重用javascript
代码,调用流行的javascript
库。 -
typescript
提供了类、模块和接口,更易于构建组件和维护。
3.开发环境的安装
3.1. 安装node.js
安装node.js
非常简单,只要到node官网下载一个最新版本就可以了:https://nodejs.org/zh-cn/ 我这里就不重复描述了。 安装好后,可以打开命令行工具
node -v npm -v
如果看到版本号说明已经安装成功了,看不到版本号就说明你的node.js没有安装成功。
3.2. 安装typescript包
npm install typescript -g tsc --version
同样如果安装成功后,会出现版本号。
3.3 构建你的第一个typescript文件
1.初始化项目:
进入你的变成文件夹后,可以使用 npm init -y
来初始化项目,生成 package.json
文件。(这里使用的是默认配置,如果在真实项目中需要重新进行配置)
2. 创建 tsconfig.json
文件
在终端中输入tsc --init
:它是一个typescript
项目的配置文件,可以通过读取它来设置typescript
编译器的编译参数。
编译选项
你可以通过 compileroptions
来定制你的编译选项:
{ "compileroptions": { /* 基本选项 */ "target": "es5", // 指定 ecmascript 目标版本: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017', or 'esnext' "module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015' "lib": [], // 指定要包含在编译中的库文件 "allowjs": true, // 允许编译 javascript 文件 "checkjs": true, // 报告 javascript 文件中的错误 "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react' "declaration": true, // 生成相应的 '.d.ts' 文件 "sourcemap": true, // 生成相应的 '.map' 文件 "outfile": "./", // 将输出文件合并为一个文件 "outdir": "./", // 指定输出目录 "rootdir": "./", // 用来控制输出目录结构 --outdir. "removecomments": true, // 删除编译后的所有的注释 "noemit": true, // 不生成输出文件 "importhelpers": true, // 从 tslib 导入辅助工具函数 "isolatedmodules": true, // 将每个文件做为单独的模块 (与 'ts.transpilemodule' 类似). /* 严格的类型检查选项 */ "strict": true, // 启用所有严格类型检查选项 "noimplicitany": true, // 在表达式和声明上有隐含的 any类型时报错 "strictnullchecks": true, // 启用严格的 null 检查 "noimplicitthis": true, // 当 this 表达式值为 any 类型的时候,生成一个错误 "alwaysstrict": true, // 以严格模式检查每个模块,并在每个文件里加入 'use strict' /* 额外的检查 */ "nounusedlocals": true, // 有未使用的变量时,抛出错误 "nounusedparameters": true, // 有未使用的参数时,抛出错误 "noimplicitreturns": true, // 并不是所有函数里的代码都有返回值时,抛出错误 "nofallthroughcasesinswitch": true, // 报告switch语句的fallthrough错误。(即,不允许switch的case语句贯穿) /* 模块解析选项 */ "moduleresolution": "node", // 选择模块解析策略: 'node' (node.js) or 'classic' (typescript pre-1.6) "baseurl": "./", // 用于解析非相对模块名称的基目录 "paths": {}, // 模块名到基于 baseurl 的路径映射的列表 "rootdirs": [], // 根文件夹列表,其组合内容表示项目运行时的结构内容 "typeroots": [], // 包含类型声明的文件列表 "types": [], // 需要包含的类型声明文件名列表 "allowsyntheticdefaultimports": true, // 允许从没有设置默认导出的模块中默认导入。 /* source map options */ "sourceroot": "./", // 指定调试器应该找到 typescript 文件而不是源文件的位置 "maproot": "./", // 指定调试器应该找到映射文件而不是生成文件的位置 "inlinesourcemap": true, // 生成单个 soucemaps 文件,而不是将 sourcemaps 生成不同的文件 "inlinesources": true, // 将代码与 sourcemaps 生成到一个文件中,要求同时设置了 --inlinesourcemap 或 --sourcemap 属性 /* 其他选项 */ "experimentaldecorators": true, // 启用装饰器 "emitdecoratormetadata": true // 为装饰器提供元数据的支持 } }
除了上面那些编译选项你还可以指定需要编译的文件:
{ "files": [ "./some/file.ts" ] }
或者,你可以使用 include
和 exclude
选项来指定需要包含的文件,和排除的文件:
{ "include": [ "./folder" ], "exclude": [ "./folder/**/*.spec.ts", "./folder/somesubfolder" ] }
==注意== :
使用 globs: /* (一个实例用法:some/folder//*)意味着匹配所有的文件夹和所有文件(扩展名为.ts/.tsx
),当开启了allowjs: true
选项时,扩展名可以是 (.js/.jsx
)。
3.安装@types/node
使用
npm install @types/node --dev-save
进行安装。这个主要是解决模块的声明文件问题。
4.创建一个 greeter.ts 文件
function greeter(person) { return "hello, " + person; } let user = "jane user"; document.body.innerhtml = greeter(user);
5.编译代码
好的ide
支持对 typescript
的即时编译。但是,如果你想使用tsconfig.json
时命令行手动运行typescript
编译器,你可以通过以下方式:
- 运行
tsc
,它会在当前目录或者是父级目录寻找tsconfig.json
文件。 - 运行
tsc -p ./greeter.ts
.当然,这个路径可以是绝对路径,也可以是相对于当前目录的相对路径。 - 使用
tsc -w
来启用typescript
编译器的观测模式,在监测到文件改动之后,它将重新编译。
6.制定编译的文件
你也可以显示指定需要编译的文件:
{ "files":[ "./project/file.ts" ] }
或者,你可以使用 include
和 exculde
选项来指定需要包含的文件和排除的文件:
{ "include":[ "./folder" ], "exclude":[ "node_modules", "webpack.*" ] }
上一篇: 妈妈这是猫干的
下一篇: JS: 数据结构与算法之栈