let name: string | number = 123
let names: (string | number)[] = [123, '123']
let names: Array<string | number> = [123, '123']
let funcs: Array<() => string> = [() => {return '123'}]
let isDone: boolean = false;
let decLiteral: number = 6;
let name: string = "bob";
// 联合类型
let name: string | number = 1 // string or number options
// 数组
let list: number[] = [1, 2, 3];
// 元祖
let x: [string, number] = ['hello', 10];
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; // 2
let func = (item: string): void => console.log(1)
function func(item: string): void {}
// interface接口
interface SquareConfig {
color?: string; // 可选属性
width?: number;
readonly x: number; // 只读属性（除初次赋值，就不能修改）
[propName: string]: any; // 额外的属性检查
}
// 内联类型注解
let name: {
first: string;
second: string;
} = {
first: 'John',
second: 'Doe'
}
两者基本没什么差别，平时开发能用Interface尽量用
interface Person {
name: string;
age: number;
}
type Person = {
name: string;
age: number;
}
type Animal = Person | string
interface Person {
name: string;
age : number | string;
}
interface Person {
name: string;
age : number;
schools: string[];
}
let tom: [string, number] = ['Tom', 25];
interface Person {
name: string;
age ?: number;
}
interface Person {
name: string;
age: number;
[key: string] : string;
}
interface Person {
name: string;
age: number;
attr : { label: string; value: string; color?: string; tips?: string }
}
export interface PagingResponseMsg<T> {
code: number;
message: string;
data: T;
totalCount?: number; // 数据总条数
pageNo?: number; // 当前页码
pageSize?: number; // 页大小
pageCount?: number; // 总页数
}
const todo = {
id: 1,
name: 'james',
address: 'shisanjia'
}
type K = keyof todo // "id" | "name" | "address"
const todo = {
id: 1,
name: 'james',
address: 'shisanjia'
}
# K 将是T返回的union类型中的一种
＃ 并且返回值为 K[T] 类型
function prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
prop(todo, 'name')
prop(todo, 'gender') // ts报错
interface IPoint {
x: number
y: number
}
type Name<T> = { [P in keyof T]: T[P]}
type real = Name<IPoint> // {x: number, y: number}
type test2 = Name<{Job: string, Job2: string}> // {Job: string, Job2: string}
vue-cli3.0安装时有typescript选项，可以非常便捷的在vue项目中应用上typescript环境。其实现方式是通过cli-plugin-typescript (opens new window)插件。如果想知道其过程，可以看其源码或者笔者之前改造的基于vue-cli2.x项目博客文章：TypeScript开发Vue应用。
TS除了类型系统以及IDE提示外，最重要特性之一就是可以使用装饰器。使用装饰器可以用极简的代码代替以前冗长的代码。以下介绍在Vue 2.x工程项目(Vue3.0计划原生支持Typescript，所以将来或许存在变数)中，必备的三个工具包。
vue-class-component (opens new window)是官方维护的TypeScript装饰器,它是基于类的 API，Vue对其做到完美兼容。因为是vue官方出的，所以可以保证其稳定性，但缺点是特性太少了，只有三个feature：
import Vue from "vue";
import Component from "vue-class-component";
@Component({
props: {
propMessage: String
},
components: {},
filters: {},
directive: {}
})
export default class App extends Vue {
// data
name:string = 'Simon Zhang'
helloMsg = 'Hello, ' + this.propMessage // use prop values for initial data
// computed
get MyName():string {
return `My name is ${this.name}`
}
// lifecycle hook
mounted() {
this.sayHello()
}
// methods
sayHello():void {
alert(`Hello ${this.name}`)
}
}
vue-property-decorator (opens new window)完全基于vue-class-component，但它扩展了很多特性，极大的方便Vue的写法。它包含7个装饰器以及1个函数：
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) propA!: number
@Prop({ default: 'default value' }) propB!: string
@Prop([String, Boolean]) propC!: string | boolean
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) { }
/* equal
watch: {
'person': [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true
}
]
}
*/
@Emit()
returnValue() {
return 10
}
/* equal
returnValue() {
this.$emit('return-value', 10)
}
*/
}
更多详细用法看vue-property-decorator README (opens new window)，讲解的非常清晰易懂
vuex-class (opens new window)是基于基于vue-class-component对Vuex提供的装饰器。它的作者同时也是vue-class-component的主要贡献者，质量还是有保证的。但不知道vue3.0出来后是否会有官方维护的针对Vuex的TypeScript装饰器。
import Vue from 'vue'
import Component from 'vue-class-component'
import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class'
const someModule = namespace('path/to/module')
@Component
export class MyComp extends Vue {
// 多种方式
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
// 子模块处理
@someModule.Getter('foo') moduleGetterFoo
// 如果参数省略，则使用属性名
@State foo
@Getter bar
@Action baz
@Mutation qux
created () {
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
this.moduleGetterFoo // -> store.getters['path/to/module/foo']
}
}
注意：使用vuex-class等库，需要在tsconfig.json配置中打开TypeScript装饰器。建议在工程目录中设置如下三个配置：experimentalDecorators、strictFunctionTypes、strictPropertyInitialization
{
"compilerOptions": {
// 启用装饰器.启用 vue-class-component 及 vuex-class 需要开启此选项，设置值为true
"experimentalDecorators": true,
// 启用 vuex-class 需要开启此选项，设置值为false
"strictFunctionTypes": false,
// 是否必须要有初始值。vuex-class最好开启此项，不然所有的@State等装饰器都需要设置初始值。设置值为false
"strictPropertyInitialization": false,
}
}
typescript的描述文件，以d.ts结尾的文件名，比如xxx.d.ts。大部分编辑器能识别d.ts文件，当你写js代码的时候给你智能提示。declare 全局声明，使得ts可以找到并识别出。
在我们尝试给一个 npm 包创建声明文件之前，需要先看看它的声明文件是否已经存在。一般来说，npm 包的声明文件可能存在于两个地方：
假如以上两种方式都没有找到对应的声明文件，那么我们就需要自己为它写声明文件了。
针对的是在应用端，无import写法 + 补充npm包的全局变量，（通过 <script> 标签引入第三方库，注入全局变量）。
// 变量
declare var aaa:number|string
//函数
// id has type number | string | undefined
// ?表示非必须。 !?表示一定要有值
declare function getName(id?:number|string):string
declare function render(callback?:()=>void): string
// 类
declare class Person {
static maxAge: number //静态变量
static getMaxAge(): number //静态方法
constructor(name: string, age: number) //构造函数
getName(id: number): string
}
// 调用：
// 假设已存在window.aaa，window.getName,window.person。
// declare好以上就可以直接调用而不会报ts错误
getName(aaa) // 不会报错
对象嵌套使用declare namespace 关键字
针对的是在应用端，import写法 + 补充npm包的变量（适用于：通过 import foo from 'foo' 导入，符合 ES6 模块规范）
核心：只有在声明文件中使用 export 导出，然后在使用方 import 导入后，才会应用到这些类型声明。
declare module xxx// types/any.d.ts
declare module "abcde" {
// 导出需要的变量、函数（匹配export导出）
export let a: number
export function b(): number
export namespace c{
let cd: string
}
}
let aaa = require('abcde');
aaa.b()
// 导出是函数本身
declare module "app" {
function aaa(some:number):number
export=aaa
}
// 调用
let app = app();
app(some)
指定到对应的@types/moduleName/index.d.ts文件，自动去该文件找出export，此时就不需要declare module 'moudleName'了
// types/abcde/index.d.ts
export let a: number
export function b(): number
总结：d.ts文件（A.d.ts）文件放到哪个目录里，如果是模块化的话那就放到和源码（A.js）文件同一个目录下，如果是全局变量的话理论上放到哪里都可以。————以上说的是未在tsconfig.json 文件里面特殊配置过。
有时通过 import 导入一个模块插件，可以改变另一个原有模块的结构。此时如果原有模块已经有了类型声明文件，而插件模块没有类型声明文件(最常见的是自定义扩展Vue.prototype.$xxx)，就会导致类型不完整，缺少插件部分的类型。
ts 提供了一个语法 declare module，它可以用来扩展原有模块的类型。
// 如果是需要扩展原有模块的话，需要在类型声明文件中先引用原有模块，再使用 declare module 扩展原有模块
import Vue from "vue"; // 记得import Vue,引入原有模块
declare module 'vue/types/vue' {
interface Vue {
$openDialog: Function;
$closeDialog: Function;
}
}
在全局变量的声明文件中，是不允许出现 import, export 关键字的。一旦出现了，那么他就会被视为一个 npm 包或 UMD 库，就不再是全局变量的声明文件了。
如果库的源码本身就是由 ts 写的，那么在使用 tsc 脚本将 ts 编译为 js 的时候，添加 declaration 选项，就可以同时也生成 .d.ts 声明文件了。此时每个ts文件都会生成.d.ts文件，使得使用方可以单独import每一个ts子文件。
通过 tsc 自动生成的，那么无需做任何其他配置，只需要把编译好的文件也发布到 npm 上，使用方就可以获取到类型提示了（因为每一个ts文件，都有对应的.d.ts文件）。手动写的声明文件，那么需要满足以下条件之一，才能被正确的识别：
使用ts书写源码时，自动生成同时，也可以手动设置d.ts文件。
declare module 'xxx'
export * from '../lib' // lib是源码入口
这个章节内容有点多，另开Typescript tsconfig.json全解析专题