一、简介
- TypeScript 是 JavaScript 的一个超集，可以编译成纯JavaScript
- 适用于任何计算机、浏览器、操作系统
- 文件后缀
ts - 支持ES6
- 开源
- 微软开发
下载
npm install -g typescript
查看版本号
tsc -V
二、hello world
注：IDE 使用VSC，安装TypeScript 插件
新建hello.ts
const message:string = 'Hello World'
console.log(message)
编译
tsc hello.ts
编译后的文件默认在同级目录下hello.js
var message = 'Hello World';
console.log(message);
ES6属性没有保留，需要配置参数
tsc hello.ts --target es6
也可以使用tsconfig.json 配置文件，手动创建或者自动生成
tsc -init
三、 数据类型
// 布尔值
let isLogin: boolean = false
// 数字
let userAge: number = 18
// 字符串
let userName: string = 'Jony'
// 数组
let list: number[] = [1, 2, 3]
let arry: Array = [1, 2, 3] //数组泛型
// 元组Tuple
// 当访问一个越界的元素，会使用联合类型替代
let tuple: [string, boolean, number] = ['a', true, 8]
tuple = ['a', true, 8]
// 枚举
enum Color {Red, Green, Blue}
let oneColor: Color = Color.Blue
//自动递增，或者全部手动赋值
enum Province {
BeiJing = 1,
Tianjin,
Nanjing
}
let cityName: string = Province[3]
console.log(`cityName: ${cityName}`)
// Any
let notSureValue: any = 4
notSureValue = 'maybe a string instead'
notSureValue = false
let anyTypeList: any[] = [1, true, 'b']
// Void
//与any 相反，没有任何类型，一般用于没有返回值的方法
//void变量只能赋值undefined 或null
let unusable: void = undefined
// Null & Undefined
// 和void 相似
// 默认是所有类型的子类型
// Never
// 表示用不存在的值的类型
// Object
// 非原始类型
类型断言
- 只在编译阶段起作用
let someValue: any = 'this is a string'
let strLength: number
strLength = someValue.length
strLength = (someValue).length
strLength = (someValue as string).length
console.log(strLength) //16
四、 变量声明
- 尽量使用ES6 let、const
五、 接口
- 接口只定义有什么，没有实际的东西，所以编译后的js文件中，接口这部分代码是没有的
interface People {
readonly num: string //只读
name: string
age?: number //可选
commandline?: string|string[]|(()=>string) //联合类型
[propName: string]: any //可索引属性，索引可以是字符串或数字
}
let people: People = {
num:'001',
name:'sufei'
}
people.age = 12
people.commandline = () => `hello ${people.name}`
// people.num = '002'
//继承
enum Grade {A, B, C}
interface Student extends People {
grade?: Grade
}
let student: Student = {
num: '003',
name: 'zhang',
grade: Grade.A
}
六、 类
- 基本用法，和其他语言类似，构造函数，继承，重写，抽象方法，抽象类等
class Animal {
//属性
name: string
//构造函数
constructor(name:string) {
this.name = name
}
//方法
play():void {
console.log(`${this.name} play`)
}
}
//创建实例
let animalA = new Animal('A')
animalA.play()
//继承
class Dog extends Animal{
//方法重写
play():void {
console.log(`A dog named ${this.name} is playing`)
}
}
let dogA = new Dog('A')
dogA.play()
公共，私有与受保护的修饰符
- public
默认的 - private
不能在类外部访问 - protected
同private，但可以在派生类中访问
static 静态属性
-
static修饰属性或方法为静态的 - 可以直接通过类名调用
readonly修饰符
- 设置属性为只读，只允许在声明时或构造函数中被初始化
存取器
- 适用于ES5及以上
class Person {
private _name:string
get name(): string {
return this._name
}
set name(newName: string) {
this._name = newName
}
}
let person = new Person()
person.name = 'zuozhu'
console.log(person.name)
instanceof 运算符
- 判断对象所属类
抽象类
-
abstract修饰的类 - 不可实例化
- 用作其他派生类的基类
- 抽象类中的抽象方法（
abstract修饰的方法）不包含具体实现并且必须在派生类中实现
七、函数
- 支持递归，箭头，构造，匿名
function buildName(firstNmae:string = 'unknown', lastName?:string, ...restOfName: string[]): string {
return lastName?(firstNmae+' '+lastName+'('+restOfName.join(' ')+')'):(firstNmae+' '+'('+restOfName.join(' ')+')')
}
console.log(buildName())
console.log(buildName('Lucy'))
console.log(buildName('Lucy', 'Job'))
console.log(buildName('Lucy', 'Job', 'Yun'))
八、模块 & 命名空间
- 如果仅导出单个
class或function，使用export default - 模块里不要使用命名空间
- 模块尽可能的在顶层导出
export const PI = 3
export function getValue() {
}
export interface Verifier {
}
export class Person {
}
import {Person} from './moduleA'
let person = new Person()
- “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”
官网示例
Validation.ts
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}
LettersOnlyValidator.ts
/// ZipCodeValidator.ts
/// Test.ts
///