TypeScript基础

本文由清尘发表于2019-04-21 17:07最后修改于2019-04-26属于javascript分类

安装 TypeScript 编译工具

npm install typescript --global

完成以后我们就可以在任何地方使用一个叫 tsc 的命令 .. 它可以帮我们把 TypeScript 代码编译成普通的 JavaScript ..

新建一个项目目录 shine-typescript

用 tsc 命令编译 .ts 文件

在项目目录下新建一个文件 src/app.ts

/**
 * TypeScript
 */
let lastNight = 'test';

TypeScript 不强制我们使用它提供的东西,所以你可以在 ts 文件里使用普通的 JavaScript 代码 .. 随便先输入点东西 … 添加一个注释 … TypeScript …

项目目录下在终端中执行编译,编译之后会在dist目录中生成一个app.js文件

tsc ./src/app.ts --outFile ./dist/app.js

tsconfig.json 配置文件

要编译的文件,要排除编译的文件,还有一些编译选项,这些东西可以放在一个配置文件里面 .. tsc 命令会自动搜索项目下面的这个配置文件,根据里面的配置给我们编译 TypeScript 项目 .. 这个配置文件是 json 格式的,默认的名字是 tsconfig.json .. 使用 tsc 命令可以生成这个配置文件 ..

tsc --init

打开tsconfig.json 修改编译后的目录

取消outDir的注释修改为dist

......
"outDir": "./dist",   
......

增加一个include

......
// "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
},
"include": [
"./src/**/*"
]
}

tsc

类型标注

指定类型

let lastNight:string = 'testaaaa';
lastNight = 3;

TypeScript 会给我们提示 .. 说这个 3 不是一个 string 类型的值

其它类型

let isDone:boolean = true;
let age:number = 3;
let fruits:string[] = ['apple','orange','test']
let test:any = 'any type';

函数

编写一个函数,鼠标移到greet函数名上时ts会推断出返回值是一个void

function greet(){
  console.log('hello');
}

也可以指定返回值的类型,现在指定返回值为void之后,再修改了返回值是一个字符串,这样TS会提示我们这个有问题

function greet():void{
  return 'hello ~';
}

修改为后正常

function greet():string{
  return 'hello ~';
}

增加一个参数,TS会提示我们,需要一个参数

function greet(user:string):string{
  return `hello ~ ${user}`;
}

greet()

接口:Interfaces

Interface,接口 .. 接口就像是一种合同,使用了某个接口就要遵守这个接口定义的合同 .. 其实接口定义的就是对象的形状,比如说明一下对象里面应该有什么样的属性,属性的类型是什么,有什么样的行为等等 ..

属性后面加?表示content为可选

interface Post {
  title:string;
  content?:string;
}

let post:Post = {
  title:'One Day'
}

Enums

Enum 就是 enumeration .. 比如在 Post 里面,可能有一个表示文章发布状态的属性 .. 起个名字可以叫 status .. 它的值的类型是数字 .. 比如数字 0 可以表示未发布的状态,数字 1 表示已发布的状态 ..

这样下面这个 post 里面就需要再添加一个 stauts 属性,它的值是个数字 .. 这种代码不太容易明白 .. 因为别人不能马上知道不同的数字表示的真正的意义是什么 .. 我们可以用一些注释来说明一下 ..

或者可以使用 TypeScript 里面提供的 enum 功能 ..

先去定义一个 enum,用一下 enum 这个关键词 .. 里面是一些数据 .. Unpublished .. Published … 再添加一个 Draft ..

有了这个 enum 以后,可以让 Post 里面的这个 status 属性的类型是这个 PostStatus .. 就是上面定义的这个 enum ..

这样设置 status 属性的值的时候就不用直接使用数字了,可以使用更友好的名字 .. 比如这个 post 它的发布状态是未发布 .. 这个值就是 PostStatus 这个 enum 里的 UnPublished .. 输入 PostStatus,加上一个点以后,编辑器会出现提示 .. 告诉我们这个 enum 里面的一些数据的名字,还有它具体表示的那个值 ..Draft 是数字 2 .. Published 是数字 1 ,UnPublished 是数字 0 …

/**
 * TypeScript
 */
enum PostStatus{
  Unpublished,
  Published,
  Draft,
}

interface Post {
  title:string;
  content?:string;
  status:PostStatus;
}

let post:Post = {
  title:'One Day',
  status:PostStatus.Unpublished
}

console.log(post);