typescript是jiavascript的超集这里记录一些简略的用法,如深刻档次的请查看官网。
typescript官网

typescript是属于渐进式的,如果对有的语法不太熟,也没关系,咱们能够齐全依照javascript的语法编写代码。

原始数据类型

const a: string = 'foobar'const b: number = 100 // NaN Infinityconst c: boolean = true // false// 在非严格模式(strictNullChecks)下,// string, number, boolean 都能够为空// const d: string = null// const d: number = null// const d: boolean = nullconst e: void = undefinedconst f: null = nullconst g: undefined = undefined// Symbol 是 ES2015 规范中定义的成员,// 应用它的前提是必须确保有对应的 ES2015 规范库援用// 也就是 tsconfig.json 中的 lib 选项必须蕴含 ES2015const h: symbol = Symbol()// Promise// const error: string = 100

作用域问题:默认文件中的成员会作为全局成员,多个文件中有雷同成员就会呈现抵触。

解决办法1: IIFE 提供独立作用域
(function () {
const a = 123
})()
解决办法2: 在以后文件应用 export,也就是把以后文件变成一个模块
模块有独自的作用域
const a = 123

export {}

前面记录都是默认模块导出,有模块作用域。

Object 类型

object 类型是指除了原始类型以外的其它类型
const foo: object = function () {} // [] // {}

如果须要明确限度对象类型,则应该应用这种类型对象字面量的语法,或者是「接口」

const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }

数组类型

数组类型的两种示意形式

const arr1: Array<number> = [1, 2, 3]const arr2: number[] = [1, 2, 3]

案例:

// 如果是 JS,须要判断是不是每个成员都是数字// 应用 TS,类型有保障,不必增加类型判断function sum (...args: number[]) {  return args.reduce((prev, current) => prev + current, 0)}sum(1, 2, 3) // => 6

元组

咱们晓得数组中元素的数据类型都个别是雷同的(any[] 类型的数组能够不同),如果存储的元素数据类型不同,则须要应用元组。

元组中容许存储不同类型的元素,元组能够作为参数传递给函数。

const tuple: [number, string] = [18, 'zce']const [age, name] = tupleconst entries: [string, number][] = Object.entries({  foo: 123,  bar: 456})const [key, value] = entries[0]

枚举(Enum)

规范的数字枚举

enum PostStatus {  Draft = 0,  Unpublished = 1,  Published = 2}数字枚举,枚举值主动基于前一个值自增enum PostStatus {  Draft = 6,  Unpublished, // => 7  Published // => 8}字符串枚举enum PostStatus {  Draft = 'aaa',  Unpublished = 'bbb',  Published = 'ccc'}// 常量枚举,不会侵入编译后果const enum PostStatus {  Draft,  Unpublished,  Published}const post = {  title: 'Hello TypeScript',  content: 'TypeScript is a typed superset of JavaScript.',  status: PostStatus.Draft // 3 // 1 // 0}

函数类型

function func1 (a: number, b: number = 10, ...rest: number[]): string {  return 'func1'}const func2: (a: number, b: number) => string = function (a: number, b: number): string {  return 'func2'}

任意类型(弱类型)

function stringify (value: any) {  return JSON.stringify(value)}let foo: any = 'string'

any 类型是不平安的

接口

任意值对象在代码里

interface Post {  title: string  content: string}function printPost (post: Post) {  console.log(post.title)  console.log(post.content)}printPost({  title: 'Hello TypeScript',  content: 'A javascript superset'})interface Post {  title: string  content: string  subtitle?: string//可选  readonly summary: string//只读}const hello: Post = {  title: 'Hello TypeScript',  content: 'A javascript superset',  summary: 'A javascript'}interface Cache {  [prop: string]: string}//定义对象属性名是字符串,值也是字符串const cache: Cache = {}cache.foo = 'value1'cache.bar = 'value2'

class

class Person {  name: string // = 'init name'  age: number    constructor (name: string, age: number) {    this.name = name    this.age = age  }  sayHi (msg: string): void {    console.log(`I am ${this.name}, ${msg}`)  }}class Person {  public name: string // = 'init name'  private age: number //公有 当成员被标记为private时,它就不能在申明它的类的内部拜访  protected gender: boolean //protected和private相似,然而,protected成员在派生类中能够拜访    constructor (name: string, age: number) {    this.name = name    this.age = age    this.gender = true  }  sayHi (msg: string): void {    console.log(`I am ${this.name}, ${msg}`)    console.log(this.age)  }}class Student extends Person { // 只读成员  protected readonly gender: boolean  private constructor (name: string, age: number) {    super(name, age)    this.gender = true;//必须初始赋值    console.log(this.gender)  }  static create (name: string, age: number) {    return new Student(name, age)  }}const tom = new Person('tom', 18)console.log(tom.name)// console.log(tom.age)// console.log(tom.gender)const jack = Student.create('jack', 18)

类与接口

interface Eat {  eat (food: string): void}interface Run {  run (distance: number): void}class Person implements Eat, Run {  eat (food: string): void {    console.log(`优雅的进餐: ${food}`)  }  run (distance: number) {    console.log(`直立行走: ${distance}`)  }}class Animal implements Eat, Run {  eat (food: string): void {    console.log(`呼噜呼噜的吃: ${food}`)  }  run (distance: number) {    console.log(`匍匐: ${distance}`)  }}

抽线类 只能被继承

abstract class Animal {  eat (food: string): void {    console.log(`呼噜呼噜的吃: ${food}`)  }  abstract run (distance: number): void}class Dog extends Animal {  run(distance: number): void {    console.log('四脚匍匐', distance)  }}const d = new Dog()d.eat('嗯西马')d.run(100)

泛型

function createNumberArray (length: number, value: number): number[] {  const arr = Array<number>(length).fill(value)  return arr}function createStringArray (length: number, value: string): string[] {  const arr = Array<string>(length).fill(value)  return arr}function createArray<T> (length: number, value: T): T[] {  const arr = Array<T>(length).fill(value)  return arr}// const res = createNumberArray(3, 100)// res => [100, 100, 100]const res = createArray<string>(3, 'foo')

有的库默认没有typescript反对,须要下载对应反对库。
如lodash,须要装置@types/lodash。

tsconfig.json文件配置详情查看:typescript官网配置阐明