TypeScrip基本介绍
TypeScript是一个编译到纯JS的有类型定义的JS超集。
TS遵循当前以及未来出现的ECMAScript规范。TS不仅能兼容现有的JavaScript 代码，它也拥有兼容未来版本的JavaScript的能力。大多数TS的新增特性 都是基于未来的JavaScript提案，这意味着许多TS代码在将来很有可能会变成ECMA的标准.
配置文件生成
npx tsc
标准库声明
"target": "es5"
中文错误消息
npx tsc --local zh_CN
作用域的问题
const a = 222;
export { }// 表示当前文件属于一个模块，变量a属于独立作用域，确保跟其他文件中a变量不会冲突
原始数据类型
布尔类型：boolean
数字类型：number
字符串类型：string
空值：void
Null 和 Undefined：null 和 undefined
Symbol 类型：symbol
BigInt 大数整数类型：bigint
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,];
元组类型
数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。元组中允许存储不同类型的元素，元组可以作为参数传递给函数，一般用于在一个函数之中返回多个返回值。
var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0])
console.log(mytuple[1])
枚举类型
枚举类型主要用于标识代码状态,是一个标识符.当我们需要表示某些变量表示什么意思时,可以通过枚举类型
语法:(枚举类型首字母大写)
enum Schedule {
not = 1,
reported,
stored,
}
函数类型
// 函数类型
export { } // 限制变量作用域
function aa(a: number, b: string) {
console.log(a,b)
}
aa(4,'m')
任意类型
// 任意类型
export { } // 限制变量作用域
let aa: any = 99;
aa = 'kkk'
隐式类型推断
// 函数类型
export { } // 限制变量作用域
let aa = 99;
aa = 'kkk'
接口
约定一个对象中有哪些成员以及这些成员的类型
// 接口，约定对象的成员
export { } // 限制变量作用域
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// 只读成员
// [key:string]:string,
}
function printPost(post: Post) {
console.log(post.title)
console.log(post.content)
}
printPost({
title: 'hello TypeScript',
content: 'A javascript superset',
summary: 'lll'
})
动态成员
interface Cache {
[prop: string]: string
}
const cache: Cache = {
'mmm': 'kkk'
}
console.log('cache',cache)
Typescript中类的基本使用
类用来描述一类具体对象的抽象成员
// 类(class)
export { } // 限制变量作用域
class Person {
name: string
age: number // 类的属性必须有初始值
constructor(name: string, age: number) {
this.name = name;
this.age = age
}
sayHi(msg: string): number {
return 222
}
}
typeScript类的访问修饰符
控制类中成员的可访问级别(共有，私有，受保护)
// 类(class)
export { } // 限制变量作用域
class Person {
public name: string
private age: number // 类的属性必须有初始值
protected gender:boolean
constructor(name: string, age: number) {
this.name = name;
this.age = age
this.gender = true
}
sayHi(msg: string): number {
return 222
}
}
const tom = new Person('tom', 18)
console.log(tom.name)
class Student extends Person{
constructor(name:string,age:number){
super(name,age)
console.log(this.gender)
}
}
class Student extends Person {
private constructor(name: string, age: number) {
super(name, age)
console.log(this.gender)
}
static create(name: string, age: number) {
return new Student(name, age)
}
}
const jack = Student.create('jack',25)
只读属性
// 类(class)
export { } // 限制变量作用域
class Person {
public name: string
private age: number // 类的属性必须有初始值
protected readonly gender: boolean // 只读属性
constructor(name: string, age: number) {
this.name = name;
this.age = age
this.gender = true
}
sayHi(msg: string): number {
return 222
}
}
const tom = new Person('tom', 18);
tom.gender = false;(不被允许)
console.log(tom.name)
类与接口
// 类(class)
export { } // 限制变量作用域
// 一个接口只约束一个能力，一个类型同时实现多个接口
interface Eat {
eat(food: string): void
}
interface Run {
run(distance: number): void
}
// 一个类通过关键字implements声明自己使用一个或者多个接口
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}`)
}
}
抽象类
// 抽象类(class)它可以包括一些具体实现，接口不包括具体实现
export { } // 限制变量作用域
// 抽象类只能被集成不能被实例化
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();// 同时拥有父类中实例方法以及子类中实现的方法
泛型
// 泛型
export { } // 限制变量作用域
//
function creatNumberArray<T>(length: number, value: number): number[] {
const arr = Array<number>(length).fill(value)
return arr
}
function creatArray<T>(length: number, value: T): T[] {
const arr = Array<T>(length).fill(value)
return arr
}
// 定义的时候不能明确的类型变成一个参数，在使用的时候传入
const res = creatArray<string>(3, '100');
类型声明
// 类型声明
import { camelCase } from 'lodash'
import qs from 'query-string'
// cameCase把字符串转为驼峰格式
// declare function camelCase(input: string): string;
const res = camelCase('hello typed')
qs.parse('?weekId=765&lessonId=1573')
网友评论