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官网配置阐明