19年ts一定大火, 请大家放心学ts吧

typescript工作原理

通过typescript命令行工具, 把typescript转成javascript, 从而支持在浏览器运行.

typescript特性

ts和js最大的区别就是ts多了类型注解功能, 通过名字中的”type“也能看出语言的重点在”类型“上. 这个类型分为基础类型和高级类型, 高级类型就是通过基础类型组成的自定义类型.

基础类型

ts中包含了boolean / number / string / object / 数组(数组的表示有多种, 后续文章会展开) / 元组 / 枚举 / any / Undefined / Null / Void / Never

高级类型

大部分情况是对object类型做更细的标注, 此处不多讲, 先放个例子了解即可, 知道关键词interface即可, 中文名”接口“, 后续章节会展开.

  1. interface Article {
  2.     title: string;
  3.     count: number;
  4.     content: string;
  5.     tags: string[]; // 数组里的元素都是字符串
  6. }


动手开始, 安装

  1. 安装nodejs
  2. 在命令行运行npm i -g typescript, 安装编译器到全局.
  3. 安装vscode编辑器.

开始写代码

生成js

  1. 建立一个文件夹, 在里面新建一个hello.ts文件, 注意扩展名是ts.
  2. 用vscode打开hello.ts文件.
  3. 输入如下代码, 让我们体验下ts:
    1. interface A {
    2.  a:number,
    3.  b:string
    4. }
    5. let obj:A = {a:123,b:'456'};

命令行进入文件夹, 执行命令

  1. npx tsc hello.ts

好了我们可以看下文件内部多了一个hello.js, 打开看看:

  1. var obj = { a: 123, b: '456' };

代码中的”类型注解“不见了 ,我们的ts被编译成js了, 是不是很神奇.

any类型

any代表任意类型, 这个类型特别适合ts新手, 初期有些类型不知道如何表达, 我们就可以暂时使用any表达, 等熟练ts后再标注精准的类型.

  1. let n:any;


联合类型

  1. let n:string|number

补充配置文件—tsconfig.json

tsconfig.json放在你项目的根目录即可:
image.png

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     // 不报告执行不到的代码错误。
  5.     "allowUnreachableCode": true,
  6.     // 必须标注为null类型,才可以赋值为null
  7.     "strictNullChecks": true,
  8.     // 严格模式, 强烈建议开启
  9.     "strict": true,
  10.     // 支持别名导入:
  11.     // import * as React from "react"
  12.     "esModuleInterop": true,
  13.     // 目标js的版本
  14.     "target": "es5",
  15.     // 目标代码的模块结构版本
  16.     "module": "es6",
  17.     // 在表达式和声明上有隐含的 any类型时报错。
  18.     "noImplicitAny": true,
  19.     // 删除注释
  20.     "removeComments": true,
  21.     // 保留 const和 enum声明
  22.     "preserveConstEnums": false,
  23.     // 生成sourceMap    
  24.     "sourceMap": true,
  25.     // 目标文件所在路径
  26.     "outDir": "./lib",
  27.     // 编译过程中需要引入的库文件的列表
  28.     "lib": [
  29.       "dom",
  30.       "es7"
  31.     ],
  32.     // 额外支持解构/forof等功能
  33.     "downlevelIteration": true,
  34.     // 是否生成声明文件
  35.     "declaration": true,
  36.     // 声明文件路径
  37.     "declarationDir": "./lib",
  38.     // 此处设置为node,才能解析import xx from 'xx'
  39.     "moduleResolution": "node"
  40.   },
  41.   // 入口文件
  42.   "include": [
  43.     "src/main.ts"
  44.   ],
  45.   //排除的文件
  46.   "exclude": [
  47.     "test.ts",
  48.     "**/*.spec.ts",
  49.     "app/pages/company-details/outline/outline.*"
  50.   ]
  51. }

参考

  1. 为vue3学点typescript(1), 体验typescript