一、编程语言的类型
- 动态类型语言
- 静态类型语言
二、Typescript究竟是什么
- Javascript that scales Javascript的超集
- 静态类型风格的类型系统
- 从es6到es10甚至是esnext的语法支持
- 兼容各种浏览器,各种系统,各种服务器,完全开源
三、官网
四、为什么要使用Typescript
- 程序更容易理解
- 问题:函数或者方法输入输出的参数类型,外部条件等
- 动态语言的约束:需要手动调试等过程
- 有了Typescript:代码本身就可以回答上述问题
- 效率更高
- 在不同的代码块和定义中进行跳转
- 代码自动补全
- 更少的错误
- 编译期间能够发现大部分错误
- 杜绝一些比较常见的错误
- 非常好的包容性
- 完全兼容javascript
- 第三方库可以单独编写类型文件
- 大多数项目都支持使用typescript
五、一些小缺点
- 增加了一些学习成本
- 短期内增加了一些开发成本
六、安装typescript
npm install -g typescript
tsc -v
推荐使用IDE: visual Studio code
编译成js:报错也会生成编译结果
tsc test.ts
cat test.js
七、原始数据类型和Any类型
let isDone: boolean = false
let age: number = 10
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}`
let u: undefined = undefined
let n: null = null
let notSure: any = 4
notSure = 'maybe a string'
notSure = true
notSure.myName
notSure.getName()
八、数组和元组
let arrOfNumbers: number[] = [1, 2, 3]
arrOfNumbers.push(3)
function test(){
console.log(arguments)
}
let user: [string, number] = ['viking', 20]
user.push('123')
九、Interface 接口
- 对对象的形状(shape)进行描述
- Duck Typing(鸭子类型)
interface person{
readonly id: number;
name: string;
age?: number;
}
let viking: person = {
id: 1,
name: 'viking'
}
十、函数
在JS中,函数是一等公民
const add = (x:number, y: number, z?: number) : number => {
if(typeof z === 'number'){
return x + y + z
}else{
return x + y
}
}
let result = add(1, 2)
interface ISum {
(x:number, y:number, z?:number): number
}
let add2: ISum = add
十一、类型推论 联合类型和类型断言
//type inference
let str = 'str'
//union types
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123
numberOrString.valueOf()
numberOrString.toString()
function getLength(input:string | number): number{
const str = input as string
if(str.length){
return str.length
}else{
const number = input as number
return number.toString().length
}
}
//type guard
function getLength2(input:string | number): number{
if(typeof input === 'string'){
return input.length
}else{
return input.toString().length
}
}
十二、class 类
- 类(Class): 定义了一切事物的抽象特点
- 对象(Object):类的实例
- 面向对象(OOP)三大特性: 封装、继承、多态
//封装
class Animal {
constructor(name){
this.name = name
}
run(){
return `${this.name} is running`
}
}
const snake = new Animal('lily')
console.log(snake.run())
//继承
class Dog extends Animal {
bark() {
return `${this.name} is barkong`
}
}
const xiaobao = new Dog('xiaobao')
console.log(xiaobao.run())
console.log(xiaobao.bark())
//多态 - 重写
class Cat extends Animal {
static categories = ['mammal']
constructor(name) {
super(name)
console.log(this.name)
}
run(){
return 'Meow, ' + super.run()
}
}
const maonao = new Cat('maomao')
console.log(maomao.run())
Typescript中的类
- Public: 修饰的属性或方法是共有的
- Private: 修饰的属性或方法是私有的
- Protected: 修饰的属性或方法是受保护的
十三、类和接口
- 继承困境
- 类可以使用implements来实现接口
interface Radio {
switchRadio(trigger: boolean) : void;
}
interface Battery {
checkBatteryStatus(): void;
}
interface RadioWithBattery extends Radio{
checkBatteryStatus(): void;
}
class Car implements Radio{
switchRadio(trigger: boolean){
}
}
class CellPhone implements RadioWithBattery {
switchRadio(trigger: boolean){
}
checkBatteryStatus(){
}
}
十四、枚举
//常量枚举 - 双向映射
const enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
// console.log(Direction.up)
// console.log(Direction[0])
const value = 'UP'
if(value === Direction.Up){
console.log('go up!')
}
十五、泛型
相当于一个占位符,一个变量,把定义好的参数类型原封不动的输出
function echo<T>(arg: T): T {
return arg
}
const str: string = 'str'
const result = echo(str)
function swap<T, U>(tuple: [T, U]):[U, T]{
return [tuple[1], tuple[0]]
}
const reusult2 = swap(['string', 123])
function echoWithArr<T>(arg: T[]): T[] {
console.log(arg.length)
return arg
}
const arrs = echoWithArr([1, 2, 3])
interface IWithLength {
length: number
}
function echoWithLength<T extends IWithLength>(arg: T): T {
console.log(arg.length)
return arg
}
const str2 = echoWithLength('str')
const obj = echoWithLength({length: 10})
const arr2 = echoWithLength([1, 2, 3])