这里不做过多介绍 只是贴一些代码 便于理解
（注意： 下面代码都是运行在.ts 文件下的）

可以完全按照 JavaScript 标准语法编写代码

  1. // 可以完全按照 JavaScript 标准语法编写代码
  3. const hello = (name: any) =>  {
  4.   console.log(`Hello, ${name}`)
  5. }
  7. hello('TypeScript')

原始数据类型

  1. // 原始数据类型
  3. const a: string = 'foobar'
  5. const b: number = 100 // NaN Infinity
  7. const c: boolean = true // false
  9. // 在非严格模式（strictNullChecks）下，
  10. // string, number, boolean 都可以为空
  11. // const d: string = null
  12. // const d: number = null
  13. // const d: boolean = null
  15. const e: void = undefined
  17. const f: null = null
  19. const g: undefined = undefined
  21. // Symbol 是 ES2015 标准中定义的成员，
  22. // 使用它的前提是必须确保有对应的 ES2015 标准库引用
  23. // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
  24. const h: symbol = Symbol()
  26. // Promise
  28. // const error: string = 100

作用域问题

  1. // 作用域问题
  3. // 默认文件中的成员会作为全局成员
  4. // 多个文件中有相同成员就会出现冲突
  5. // const a = 123
  7. // 解决办法1: IIFE 提供独立作用域
  8. // (function () {
  9. //   const a = 123
  10. // })()
  12. // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块
  13. // 模块有单独的作用域
  14. const a = 123
  16. export {}

Object 类型

  1. // Object 类型
  3. export {} // 确保跟其它示例没有成员冲突
  5. // object 类型是指除了原始类型以外的其它类型
  6. const foo: object = function () {} // [] // {}
  8. // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
  9. const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }
  11. // 接口的概念后续介绍

数组类型

  1. // 数组类型
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 数组类型的两种表示方式
  7. const arr1: Array<number> = [1, 2, 3]
  9. const arr2: number[] = [1, 2, 3]
  11. // 案例 -----------------------
  13. // 如果是 JS，需要判断是不是每个成员都是数字
  14. // 使用 TS，类型有保障，不用添加类型判断
  15. function sum (...args: number[]) {
  16.   return args.reduce((prev, current) => prev + current, 0)
  17. }
  19. sum(1, 2, 3) // => 6

元组（Tuple）

  1. // 元组（Tuple）
  3. export {} // 确保跟其它示例没有成员冲突
  5. const tuple: [number, string] = [18, 'zce']
  7. // const age = tuple[0]
  8. // const name = tuple[1]
  10. const [age, name] = tuple
  12. // ---------------------
  14. const entries: [string, number][] = Object.entries({
  15.   foo: 123,
  16.   bar: 456
  17. })
  19. const [key, value] = entries[0]
  20. // key => foo, value => 123

枚举（Enum）

  1. // 枚举（Enum）
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 用对象模拟枚举
  6. // const PostStatus = {
  7. //   Draft: 0,
  8. //   Unpublished: 1,
  9. //   Published: 2
  10. // }
  12. // 标准的数字枚举
  13. // enum PostStatus {
  14. //   Draft = 0,
  15. //   Unpublished = 1,
  16. //   Published = 2
  17. // }
  19. // 数字枚举，枚举值自动基于前一个值自增
  20. // enum PostStatus {
  21. //   Draft = 6,
  22. //   Unpublished, // => 7
  23. //   Published // => 8
  24. // }
  26. // 字符串枚举
  27. // enum PostStatus {
  28. //   Draft = 'aaa',
  29. //   Unpublished = 'bbb',
  30. //   Published = 'ccc'
  31. // }
  33. // 常量枚举，不会侵入编译结果
  34. const enum PostStatus {
  35.   Draft,
  36.   Unpublished,
  37.   Published
  38. }
  40. const post = {
  41.   title: 'Hello TypeScript',
  42.   content: 'TypeScript is a typed superset of JavaScript.',
  43.   status: PostStatus.Draft // 3 // 1 // 0
  44. }
  46. // PostStatus[0] // => Draft

函数类型

  1. // 函数类型
  3. export {} // 确保跟其它示例没有成员冲突
  5. function func1 (a: number, b: number = 10, ...rest: number[]): string {
  6.   return 'func1'
  7. }
  9. func1(100, 200)
  11. func1(100)
  13. func1(100, 200, 300)
  15. // -----------------------------------------
  17. const func2: (a: number, b: number) => string = function (a: number, b: number): string {
  18.   return 'func2'
  19. }

任意类型（弱类型）

  1. // 任意类型（弱类型）
  3. export {} // 确保跟其它示例没有成员冲突
  5. function stringify (value: any) {
  6.   return JSON.stringify(value)
  7. }
  9. stringify('string')
  11. stringify(100)
  13. stringify(true)
  15. let foo: any = 'string'
  17. foo = 100
  19. foo.bar()
  21. // any 类型是不安全的

隐式类型推断

  1. // 隐式类型推断
  3. export {} // 确保跟其它示例没有成员冲突
  5. let age = 18 // number
  7. // age = 'string'
  9. let foo
  11. foo = 100
  13. foo = 'string'
  15. // 建议为每个变量添加明确的类型标注

类型断言

  1. // 类型断言
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 假定这个 nums 来自一个明确的接口
  6. const nums = [110, 120, 119, 112]
  8. const res = nums.find(i => i > 0)
  10. // const square = res * res
  12. const num1 = res as number
  14. const num2 = <number>res // JSX 下不能使用

接口

  1. // 接口
  3. export {} // 确保跟其它示例没有成员冲突
  5. interface Post {
  6.   title: string
  7.   content: string
  8. }
  10. function printPost (post: Post) {
  11.   console.log(post.title)
  12.   console.log(post.content)
  13. }
  15. printPost({
  16.   title: 'Hello TypeScript',
  17.   content: 'A javascript superset'
  18. })

可选成员、只读成员、动态成员

  1. // 可选成员、只读成员、动态成员
  3. export {} // 确保跟其它示例没有成员冲突
  5. // -------------------------------------------
  7. interface Post {
  8.   title: string
  9.   content: string
  10.   subtitle?: string
  11.   readonly summary: string
  12. }
  14. const hello: Post = {
  15.   title: 'Hello TypeScript',
  16.   content: 'A javascript superset',
  17.   summary: 'A javascript'
  18. }
  20. // hello.summary = 'other'
  22. // ----------------------------------
  24. interface Cache {
  25.   [prop: string]: string
  26. }
  28. const cache: Cache = {}
  30. cache.foo = 'value1'
  31. cache.bar = 'value2'

类（Class）

  1. // 类（Class）
  3. export {} // 确保跟其它示例没有成员冲突
  5. class Person {
  6.   name: string // = 'init name'
  7.   age: number
  9.   constructor (name: string, age: number) {
  10.     this.name = name
  11.     this.age = age
  12.   }
  14.   sayHi (msg: string): void {
  15.     console.log(`I am ${this.name}, ${msg}`)
  16.   }
  17. }

类的访问修饰符

  1. // 类的访问修饰符
  3. export {} // 确保跟其它示例没有成员冲突
  5. class Person {
  6.   public name: string // = 'init name'
  7.   private age: number
  8.   protected gender: boolean
  10.   constructor (name: string, age: number) {
  11.     this.name = name
  12.     this.age = age
  13.     this.gender = true
  14.   }
  16.   sayHi (msg: string): void {
  17.     console.log(`I am ${this.name}, ${msg}`)
  18.     console.log(this.age)
  19.   }
  20. }
  22. class Student extends Person {
  23.   private constructor (name: string, age: number) {
  24.     super(name, age)
  25.     console.log(this.gender)
  26.   }
  28.   static create (name: string, age: number) {
  29.     return new Student(name, age)
  30.   }
  31. }
  33. const tom = new Person('tom', 18)
  34. console.log(tom.name)
  35. // console.log(tom.age)
  36. // console.log(tom.gender)
  38. const jack = Student.create('jack', 18)

类的只读属性

  1. // 类的只读属性
  3. export {} // 确保跟其它示例没有成员冲突
  5. class Person {
  6.   public name: string // = 'init name'
  7.   private age: number
  8.   // 只读成员
  9.   protected readonly gender: boolean
  11.   constructor (name: string, age: number) {
  12.     this.name = name
  13.     this.age = age
  14.     this.gender = true
  15.   }
  17.   sayHi (msg: string): void {
  18.     console.log(`I am ${this.name}, ${msg}`)
  19.     console.log(this.age)
  20.   }
  21. }
  23. const tom = new Person('tom', 18)
  24. console.log(tom.name)
  25. // tom.gender = false

类与接口

  1. // 类与接口
  3. export {} // 确保跟其它示例没有成员冲突
  5. interface Eat {
  6.   eat (food: string): void
  7. }
  9. interface Run {
  10.   run (distance: number): void
  11. }
  13. class Person implements Eat, Run {
  14.   eat (food: string): void {
  15.     console.log(`优雅的进餐: ${food}`)
  16.   }
  18.   run (distance: number) {
  19.     console.log(`直立行走: ${distance}`)
  20.   }
  21. }
  23. class Animal implements Eat, Run {
  24.   eat (food: string): void {
  25.     console.log(`呼噜呼噜的吃: ${food}`)
  26.   }
  28.   run (distance: number) {
  29.     console.log(`爬行: ${distance}`)
  30.   }
  31. }

抽象类

  1. // 抽象类
  3. export {} // 确保跟其它示例没有成员冲突
  5. abstract class Animal {
  6.   eat (food: string): void {
  7.     console.log(`呼噜呼噜的吃: ${food}`)
  8.   }
  10.   abstract run (distance: number): void
  11. }
  13. class Dog extends Animal {
  14.   run(distance: number): void {
  15.     console.log('四脚爬行', distance)
  16.   }
  18. }
  20. const d = new Dog()
  21. d.eat('嗯西马')
  22. d.run(100)

泛型

  1. // 泛型
  3. export {} // 确保跟其它示例没有成员冲突
  5. function createNumberArray (length: number, value: number): number[] {
  6.   const arr = Array<number>(length).fill(value)
  7.   return arr
  8. }
  10. function createStringArray (length: number, value: string): string[] {
  11.   const arr = Array<string>(length).fill(value)
  12.   return arr
  13. }
  15. function createArray<T> (length: number, value: T): T[] {
  16.   const arr = Array<T>(length).fill(value)
  17.   return arr
  18. }
  20. // const res = createNumberArray(3, 100)
  21. // res => [100, 100, 100]
  23. const res = createArray<string>(3, 'foo')

类型声明

  1. // 类型声明
  3. import { camelCase } from 'lodash'
  4. import qs from 'query-string'
  6. qs.parse('?key=value&key2=value2')
  8. // declare function camelCase (input: string): string
  10. const res = camelCase('hello typed')
  12. export {} // 确保跟其它示例没有成员冲突