TypeScript上手

快速上手

安装TS ： yarn add typescript --dev 

编译

// 可以完全按照 JavaScript 标准语法编写代码
var hello = function (name) {
    console.log("Hello, " + name);
};
hello('TypeScript');

运行命令 yarn tsc [filename] 在文件中就可以看到编译过后的js 文件

 

配置文件编译整个项目

1.运行 yarn tsc --init 生成配置文件

2.将源代码文件和输出文件修改，在源文件中放入TS文件，就可以 运行命令  yarn tsc    编译整个项目

原始数据类型和内置标准库

// 原始数据类型

const a: string = 'foobar'

const b: number = 100 // NaN Infinity

const c: boolean = true // false

// 在非严格模式（strictNullChecks）下，
// string, number, boolean 都可以为空
// const d: string = null
// const d: number = null
// const d: boolean = null

const e: void = undefined

const f: null = null

const g: undefined = undefined

// Symbol 是 ES2015 标准中定义的成员，
// 使用它的前提是必须确保有对应的 ES2015 标准库引用
// 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
const h: symbol = Symbol()

// Promise

// const error: string = 100

作用域问题

// 作用域问题

// 默认文件中的成员会作为全局成员
// 多个文件中有相同成员就会出现冲突
// const a = 123

// 解决办法1: IIFE 提供独立作用域
// (function () {
//   const a = 123
// })()

// 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块
// 模块有单独的作用域
const a = 123

export {}

Object类型

// Object 类型

export {} // 确保跟其它示例没有成员冲突

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

// 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }

数组类型

// 数组类型

export {} // 确保跟其它示例没有成员冲突

// 数组类型的两种表示方式

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)
}

枚举类型

标准枚举类型

// 标准的数字枚举
enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2
}

数字枚举，枚举值自动基于前一个值自增

enum PostStatus {
  Draft = 6,
  Unpublished, // => 7
  Published // => 8
}

字符串枚举

enum PostStatus {
  Draft = 'aaa',
  Unpublished = 'bbb',
  Published = 'ccc'
}

一般的枚举会侵入代码，编译之后声明双向键值对对象

// 标准的数字枚举
var PostStatus;
(function (PostStatus) {
    PostStatus[PostStatus["Draft"] = 0] = "Draft";
    PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";
    PostStatus[PostStatus["Published"] = 2] = "Published";
})(PostStatus || (PostStatus = {}));

所以建议使用常量枚举，不会侵入编译结果

const enum PostStatus {
  Draft,
  Unpublished,
  Published
}

编译后结果为，仅在后面编译为注释 

// 枚举（Enum）
Object.defineProperty(exports, "__esModule", { value: true });
var post = {
    title: 'Hello TypeScript',
    content: 'TypeScript is a typed superset of JavaScript.',
    status: 0 /* Draft */ // 3 // 1 // 0
};

函数类型约束

标准约束  可选参数在参数后加？（a?:number）默认参数加=号，剩余参数如代码 所示

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'
}

任意类型

// 任意类型（弱类型）

export {} // 确保跟其它示例没有成员冲突

function stringify (value: any) {
  return JSON.stringify(value)
}

stringify('string')

stringify(100)

stringify(true)

let foo: any = 'string'

foo = 100

foo.bar()

// any 类型是不安全的

隐式类型推断

声明一个变量并赋值，会将变量隐式推断为赋值的类型

如果只声明变量不赋值，会隐式推断为any类型

export {} // 确保跟其它示例没有成员冲突

let age = 18 // number

// age = 'string'

let foo

foo = 100

foo = 'string'

// 建议为每个变量添加明确的类型标注

类型断言

在某些特定情况下，typescript不能推断出一个变量的具体类型，我们开发者根据逻辑知道变量的具体类型

export {} // 确保跟其它示例没有成员冲突

// 假定这个 nums 来自一个明确的接口
const nums = [110, 120, 119, 112]

const res = nums.find(i => i > 0)

// const square = res * res

const num1 = res as number

const num2 = <number>res // JSX 下不能使用